Is it possible to configure the time format as HH:mm:ss in amcharts?

When using amcharts, I am facing an issue with setting hours and minutes on the chart. It always displays 00:00.

// Set date label formatting
    dateAxis.dateFormats.setKey("day", "yyyy/MMM/dd HH:mm");

The input passed is in milliseconds.

let newDate = new Date(parseInt(this.vitalHistoryEachData[i]['observation-time']));

https://i.sstatic.net/LkLuf.png

Data is being pushed into a list.

chartData.push({
date:newDate,
DataSet1: DataSet1,
DataSet2: DataSet2
});

A sample has been created at https://codesandbox.io/s/4mzp27v67

angulartypescriptangular6amcharts

Answer №1

At this moment, your focus is on defining "day".

It's crucial to establish the granularity of your dates.

Data Granularity: Data that is based on date and time can be available at various intervals. For instance, the data could have an entry for each year or even every millisecond.

The date axis will intelligently determine the granularity by analyzing your specific dataset. If there is a minute gap between data points, the axis will select the most appropriate granularity, such as using minutes.

Data granularity influences how the axis grid lines are displayed and how labels are formatted. For example, if you have data points for each day, it would make sense to show both a grid line and a date label for each point.

For further information, please visit:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 7 - Customize Mat-select-value color depending on a specific condition

One issue I am facing is changing the color of a selected value in a mat select based on a condition. This change should be visually apparent to the user. Although accessing mat-select-value from the styles is possible, implementing a condition using ng-cl ...

cssangularangular-material

The CSS file is being prevented from loading due to a MIME type mismatch error with the header X-Content-Type-Options set to

As I work on developing my Angular 4 app, I have been exploring ways to apply global styles. Following a helpful tutorial on the Angular site, I created a "styles.css" file in the root directory of my application and linked it in the index.html file: < ...

cssnode.jsangularexpressmime-types

Having trouble uploading a PNG image (logo) with Cypress

I have been attempting to upload a png file using Cypress and here is what I have tried so far: Cypress.Commands.add('upload_image', (fileName, selector) => { return cy.get(selector).then(subject => { return cy.fixture(fileName, &apo ...

typescriptcypress

Invoking numerous functions through the (click)= event

When it comes to removing a user from my site, I find myself having to execute multiple database queries to delete the user's ID across approximately 10 different tables. Currently, I am resorting to what I consider a messy workaround where I have mu ...

javascriptangulartypescriptclick

Encountering an error while using *ngIf to filter within a loop in Angular

I'm having trouble using *ngIf to filter out items in a list generated by looping, and it's throwing an error. Can someone please assist me with this issue? abc.component.html <ul> <li *ngFor="let x of students" *ngIf="x.age < ...

javascriptangularangular-directivengforangular-ng-if

Using MUI DatePicker and react-hook-form to implement a date picker in the format DD/MM/YYYY

I have developed a custom datePicker component that combines react-hook-form and Material UI. However, I am encountering an issue where the values are being displayed in the format: "2024-04-10T22:00:00.000Z" Below is the code snippet: import { Localizati ...

reactjstypescriptmaterial-uiformatreact-hook-form

Tracking button clicks on Angular Material using Google Analytics through Google Tag Manager

I'm currently utilizing the Universal Analytics tag within Google Tag Manager to monitor user interactions. I'm looking to establish click listeners in GTM that will trigger when specific buttons on the page are clicked. These buttons are Angular ...

angulargoogle-analyticsangular-materialgoogle-tag-manager

communicating between client and server by sending http requests within the Heroku platform

My application utilizes Angular on the front end and Node.js on the backend. I am encountering some difficulties when it comes to configuring them properly for production deployment on Heroku. During development, my Node.js server runs on port 3000 and al ...

node.jsangularwebheroku

Navigating through nested JSON Objects for dropdown functionality in Angular 6 - a step-by-step guide

Currently, I am facing a challenge in Angular 6.0 where I am trying to use HttpClient to iterate through JSON data retrieved from a local file within my assets folder. Below is the sample JSON Data: [{ "configKey": [{ "user1": [{ ...

jsonangulartypescriptnested

Update header component dynamically upon successful login with Angular 11

I am currently using Angular 11 and facing an issue with displaying the username in the header component. The header loads before the login component, which results in the user data being stored in local storage only after the login component is loaded. As ...

javascriptangular

Is this Firebase regulation accurate and suitable for PUT and GET requests in an Angular and Firebase environment?

Creating a system where users can only see their own posts and no one else can access them is my main goal. Authentication along with posting functionality is already in place and working, but I want to implement this without using Firebase restrictions. ...

angulartypescriptfirebase

Issue with dynamic imports and lazy-loading module loadChildren in Jhipster on Angular 8, not functioning as expected

When utilizing dynamic import, it is necessary to modify the tsconfig.json file in order to specify the target module as esnext. ./src/main/webapp/app/app-routing.module.ts 14:40 Module parse failed: Unexpected token (14:40) File was processed with these ...

angulartypescriptjhipsterangular8

Is it possible to include a conditional type in TypeScript using inlining?

Apologies if this question seems basic to those well-versed in typesystems. I'm puzzled by the difference in outcomes when inlining a conditional statement in TypeScript. For instance, using the Extract conditional leads to different results dependin ...

typescript

Error: BrowserModule has already been loaded

After updating my application to RC6, I encountered a persistent error message: zone.js:484 Unhandled Promise rejection: BrowserModule has already been loaded. If you need access to common directives like NgIf and NgFor from a lazily loaded module.. ...

angulartypescript

formBuilder does not exist as a function

Description: Using the Form Builder library for react based on provided documentation, I successfully implemented a custom fields feature in a previous project. This project utilized simple JavaScript with a .js extension and achieved the desired result. ...

javascriptreactjstypescriptformsformbuilder

Guide on creating rsa key pair on the client side with angular2

Is there a way to generate an 'rsa' key-pair on the client-side using angular2? I am looking to create a private/public key pair and store the private key in a database while using the public key on the client side. How can this be achieved? I c ...

javascriptangularclientrsakey-generator

Tips for adjusting the size of the selectBox options dropdown based on content in devExtreme Angular

Is there a way for a devExtreme selectBox dropdown window to dynamically adjust its size based on the length of the longest option text without specifying a static width in the dropDownOptions attribute? For example: https://i.sstatic.net/2xzX2.png I att ...

angulardevextreme-angular

Dispatch not invoking Thunk Action - utilizing Typescript

I am currently using React, Redux, Redux-Thunk, and Typescript as a beginner. I have encountered an issue where when I call an action with a thunk, the action is being called (confirmed with a console.log) but the dispatch is not happening. I have connecte ...

reactjstypescriptreduxredux-thunk

Is there a way to sort through an array based on a nested value?

Within an array of objects, I have a structure like this: "times": [{ "id" : "id", "name" : "place", "location" : "place", "hours" : [ {"day": " ...

javascriptarraystypescript

Is there a way to verify that my transition from angular 2 to angular 4 in my app was successful?

Previously, my .NET WebAPI application utilized angular 2, but I made the decision to transition to angular 4. To upgrade, I executed the following commands in the cmd within my project directory (in addition to addressing any missing dependencies): npm ...

.netangularasp.net-web-apinpm