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

Utilizing TypeORM to selectively choose data in OneToMany relationships

I am looking to create a TypeORM query that pulls data from the database. Specifically, I want to retrieve all clients who have made a purchase but have not initiated a return. Here is the structure of the database: Clients: Id (Int, primary column) Purc ...

javascriptsqlsql-servertypescripttypeorm

Implementing a back button in an RTL layout with Ionic 2

Just starting an Ionic 2 app in Arabic language requires a RTL layout. I decided to go with the side menu template. Adding the following line for configuring the app to RTL perfectly changed everything's direction, except for the back button which st ...

angulartypescriptionic-frameworkionic2ionic3

Unlocking Not Exported Type Definitions in TypeScript

Take a look at this TypeScript code snippet: lib.ts interface Person { name: string; age: number; } export default class PersonFactory { getPerson(): Person { return { name: "Alice", age: 30, } } } ...

typescripttypescript-typings

Parsing values from deeply nested objects and arrays

I've come across this issue before, but I'm having difficulty navigating through a nested structure. I can't seem to find any guidance in the right direction. Here is the object I'm attempting to parse: const nestedArray = { id ...

javascripttypescriptnested

The Dev Tool is perfectly displaying the JSON response, yet it remains hidden from view on browsers, Postman, Python requests

https://i.stack.imgur.com/xTWnj.png Should this question be labeled as silly? Because I'm feeling a bit foolish ...

jsonangularxmlhttprequestcloudflarefirefox-developer-tools

Deriving values in Typescript based on a subset of a union for conditional typing

Can someone provide assistance with type inference in TypeScript to narrow a union based on a conditional type? Our API validates a set of parameters by normalizing all values for easier processing. One parameter can be either an array of strings or an ar ...

typescripttype-inference

Create a custom hook that encapsulates the useQuery function from tRPC and provides accurate TypeScript typings

I have integrated tRPC into a project that already has API calls, and I am looking to create a separate wrapper for the useQuery function. However, I am facing challenges in getting the TypeScript types right for this customization. My Objective This is w ...

javascriptreactjstypescriptnext.jstrpc.io

Checking for valid positive numbers and detecting invalid dates with Angular form techniques

How do I validate an input to ensure it is a positive number and a date no earlier than the current date using Angular's FormControl, FormBuilder, and FormGroup? Here is my code: HTML: <p>Enter price:</p> <input type="number" formCont ...

htmlangularformsvalidationangular-reactive-forms

Three.js and Angular - the requested function cannot be found

In my latest project, I created a basic application using Angular 4 and three.js to display a cube. The main part of the code resides in an Angular component called ViewerComponent, where the cube is rendered. I've simplified the relevant part of the ...

angularthree.jsfrontendangular-components

Is there a way for me to display my custom text status before toggling the button on mat-slide-toggle?

Upon loading my page, the toggle button is visible but lacks any text until toggled. Upon clicking the toggle button, it displays "on", but subsequently fails to switch back when clicked again, staying stuck on "on" until clicked once more to correctly di ...

angularangular-material

Running into issues with TypeScript in conjunction with Redux-Form and React-Redux connect

My excitement for TypeScript grew until I encountered some frustrating incompatibilities between Redux-Form and React-Redux. I am aiming to wrap a component decorated with reduxForm using the connect decorator from react-redux—this method has always bee ...

reactjstypescriptreduxreact-reduxredux-form

Modify the selection in one dropdown menu based on the selection in another dropdown menu using Angular 8

When I have two dropdowns, I aim to update the second dropdown with a matching JSON object based on the value selected in the first dropdown. JSON this.dropdownValues = { "mysql 8": { "flavor": [ "medium", ...

angulartypescriptdropdown

What is the best way to retrieve a cookie sent from the server on a subdomain's domain within the client request headers using getServerSideProps

Currently, I have an express application using express-session running on my server hosted at api.example.com, along with a NextJS application hosted at example.com. While everything functions smoothly locally with the server setting a cookie that can be r ...

typescriptexpresscookiesnext.jssession-cookies

What is the best way to host a single page application within a sub-directory using nginx?

Trying to set up nginx to host an Angular application from a unique child path. Adjusted the app to use a base href of fish, able to serve root page and assets correctly. However, encountering a 404 error when attempting to reload the page on a child rout ...

angularnginx

Managing Multiple Operations in Angular Firestore

For the past few weeks, I've been grappling with the theory behind this issue. Despite scouring the internet for solutions, I haven't found anything truly helpful. So, I'm turning to the SO community for the first time. In my Firestore data ...

javascriptangularfirebase

The error encountered states that in the Angular typescript method, the term "x" is not recognized as a

In my codebase, I have an entity named Epic which contains a method called pendingTasks() within a class. import { Solution } from '../solutions.model'; import { PortfolioKanban } from '../kanban/portfolio-kanban.model'; import { Kanban ...

angulartypescriptngrx

Tips for injecting Angular service for login in Cypress tests

Recently, I decided to incorporate Cypress into my testing process for my Angular application. Following Cypress's recommendation, I aimed to streamline testing by skipping the login screen and directly accessing my Angular LoginService. To guide me ...

angulartestingdependency-injectionservicecypress

Looking for a way to notify users about page expiry with an Angular 5 service?

I have multiple pages each containing numerous forms. I am looking to develop a monitoring service for these forms. These forms are connected to data model objects with a high number of properties. I attempted to use the watchjs library to track changes in ...

angularangular-services

Interface constructor concept

Trying to figure out how to dynamically add different types of components to a game object in TypeScript. After consulting the TypeScript documentation on interfaces, I discovered a unique approach for dealing with constructors in interfaces, which led me ...

typescript

How to process response in React using Typescript and Axios?

What is the proper way to set the result of a function in a State variable? const [car, setCars] = useState<ICars[]>([]); useEffect(() =>{ const data = fetchCars(params.cartyp); //The return type of this function is: Promise<AxiosRespo ...

reactjstypescriptaxios