The ng2-chart library displays date in the form of a Unix timestamp

I have a date object imported from my database, but it is showing up as a Unix timestamp (-62101391858000). I know I can format the date using pipes like {{myDate | date:medium}}, however, I am using ng2-charts so I need to find a different solution. My chart is currently displayed as follows:

<base-chart class="chart" 
    [datasets]="lineData" 
    [labels]="lineLabels" 
    [options]="lineChartOptions" 
    [colors]="lineChartColours"
    [legend]="lineChartLegend" 
    [chartType]="lineChartType">
</base-chart>

I have searched for <base-chart> but it seems to be hidden within ng2-charts.

Does anyone have any suggestions on how to resolve this issue?

typescriptangularng2-charts

Answer №1

After some trial and error, I found a solution. Rather than attempting to funnel the data in the user interface, I decided to perform a simple conversion:

this.updatedItems.push(new Date(data[i]["startTime"]).toLocaleDateString());

as opposed to:

this.updatedItems.push(data[i]["startTime"]);

Answer №2

To specify that the time is in UNIX time (using Moments.js - tag 'X'), all you have to do is mention it.

  scales: {
  xAxes: [{

              type: 'time',
              time: {
                    format: 'X',
                    displayFormats: {minute: 'HH:mm'},
                                         // round: 'day'
                                  tooltipFormat: 'll HH:mm'
                  },

The key element here is the 'format: 'X'

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

Custom Email Template for Inviting Msgraph Users

I'm currently exploring the possibility of creating an email template for the MS Graph API. I am inviting users to join my Azure platform, but the default email they receive is not very visually appealing. public async sendUserInvite(body: {email: < ...

javascripttypescriptnext.jsmicrosoft-graph-api

Having trouble with loading JavaScript during ng build --prod process

The JavaScript file I'm using for multiple emails (multiple_emails.js plugin) works well with ng serve. Here is my code: (function( $ ){ $.fn.multiple_emails = function(options) { // Default options var defaults = { ...

javascripttypescript

Adding a class to a child component layout from a parent component in Angular 12 and Typescript can be achieved by using the ViewChild decorator

Incorporating the child component into the parent component is an important step in the structure of my project. The dashboard component serves as the child element, while the preview component acts as the parent. Within the parent (preview) component.htm ...

jquerycssangulartypescript

JavaScript Library function in Angular Component throwing Type Error: Function is Not Recognized

I created a custom Javascript library to group together essential functions that many Angular Components require. The library called calcs.js includes functions like this: function calculateCosts(object) { do some stuff..... return answer; } To use t ...

javascriptangular

Error in Typescript: The type 'Element' does not have a property named 'contains'

Hey there, I'm currently listening for a focus event on an HTML dialog and attempting to validate if the currently focused element is part of my "dialog" class. Check out the code snippet below: $(document).ready(() => { document.addEventListe ...

javascriptjqueryhtmltypescript

The FullCalendar does not appear as expected on Angular version 16

https://i.stack.imgur.com/DTAKr.pngI followed the steps to install FullCalendar in my Ionic 6 Angular 16 app as outlined on https://fullcalendar.io/docs/angular. However, nothing is showing up in the browser (chrome). The Inspector tool shows that the Ful ...

angularfullcalendarionic6angular16

The method this.$el.querySelector does not exist

The data retrieved from the database is inserted into the input fields and submitted as a form. This data is an object that passes the value to the database. However, when I trigger this form, an error occurs. See example of the error <input id=" ...

javascripttypescriptvue.js

invoke a specified function at runtime

I recently came across a useful library called https://github.com/ivanhofer/typesafe-i18n This library has the capability to generate strongly typed translation data and functions, as illustrated below. (the examples provided are simplified for clarity) e ...

typescripttypescript-generics

Determining the presence of generic K within generic M in Typescript Generics and Redux

Hello there I am currently working on minimizing repetitive code in my react application by utilizing Redux state. After choosing the Redux structure to use (refer to Context), I now aim to make it more concise. To achieve this, I have developed a generic ...

typescriptgenericsreduxtypescript-generics

Tips for sending FormData and request body with angular's httpclient

I need help updating my Angular application package from @angular/http to @angular/common/http. During the process, my code is breaking for a specific reason. Previously, I was able to send both form data and request body in the following manner: this.ht ...

angularhttpclient

Can TypeScript modules be designed to function in this way?

Seeking to create a versatile function / module / class that can be called in various ways: const myvar = MyModule('a parameter').methodA().methodB().methodC(); //and also this option should work const myvar = MyModule('a parameter') ...

javascriptnode.jstypescriptcallback

Angular: the page continues to display outdated information after using router.navigate

My web app allows users to select products to purchase. They can pause the configuration process and resume it later. Currently, I am using localStorage to store information about the products and their prices. There is a page in my app that displays a ta ...

javascriptangular

Error encountered: The build failed due to the presence of two distinct types sharing the same name, however, they

Encountering an error during the build of my JHipster Angular project [ERROR] Error at /Users/Dan/work/gba/node_modules/ng-jhipster/src/interceptor/interceptable-http.d.ts:4:22: Class 'InterceptableHttp' incorrectly extends base class 'Http ...

angularrxjsyarnpkg

Angular4 nested components within a Bootstrap table offer a dynamic and visually appealing way

As a beginner with Angular 4, I am working on creating a bootstrap table with nested components. The child component is supposed to display in a single row, but the table is not rendering correctly. Please refer to the image below for a snapshot: snapshot ...

angular

Refresh the webpage following removal of an item on IONIC4

Hey there, I need some help from the experts here. I'm currently working on developing an e-commerce mobile app using Ionic 4. I'm facing a challenge with updating the item-total summary when an item is removed from the cart page. Below is my ca ...

angularionic4reload

Unveiling RxJs: The secret to extracting the notifier value using the takeuntil operator

I have a straightforward Rxjs timer set up that runs until a notifier emits a signal, it's pretty basic so far. enum TimerResult = { COMPLETE, ABORTED, SKIPPED }; _notifier: Subject<TimerResult> = new Subject(); notifier$: Observab ...

angulartypescriptrxjstakeuntil

Tips for customizing the event target appearance in Angular 2?

After following the steps outlined in this particular blog post (section 3, event binding), I successfully added an event listener to my component class. I can confirm that it responds when the mouse enters and exits. <p class="title" (mouseenter)="unf ...

javascriptcssangularevents

How come the information I receive when I subscribe always seems to mysteriously disappear afterwards?

I've been working on a web project using Angular, and I've run into an issue with my code that's been causing problems for a while now. The problem lies in fetching data from a server that contains translations: getTranslations(): Observab ...

angulartypescript

I'm interested in knowing how to switch between two functions using Angular

I have developed a grocery list application where each row contains the name of a food item. The layout includes a left column for items that are not needed and a right column for items that are needed. Currently, I am able to change the state by clicking ...

javascriptangular

The name 'console' could not be located

I am currently working with Angular2-Meteor and TypeScript within the Meteor framework version 1.3.2.4. When I utilize console.log('test'); on the server side, it functions as expected. However, I encountered a warning in my terminal: Cannot ...

meteortypescriptangularangular2-meteor