How to show custom labels in lightningchart js

Not familiar with licensing? Need help in installing LightningChart Ultimate SDK? User's manual is missing? Post general questions here.

Moderator: Arction_LasseP

Posts: 1
Joined: Wed May 27, 2020 5:02 pm

How to show custom labels in lightningchart js

Post by adjmpw » Wed May 27, 2020 5:06 pm

I have X-axis and Y-Axis like below

Code: Select all

["2020-05-22 14:20:22", "173.9"]
["2020-05-22 14:20:40", "175.3"]
["2020-05-22 14:20:58", "172.4"]
But seems like I cannot add date directly

Code: Select all

    series.add({ x: timer, y: yVal})
How do I pass date to X axis and also how to how time label on hover ?

Posts: 2
Joined: Thu May 28, 2020 6:36 am

Re: How to show custom labels in lightningchart js

Post by Arction_TerhoH » Fri May 29, 2020 8:20 am

Hi! We now have a section specific for LightningChart JS questions, please post your questions about LightningChart JS in there in the future :)

The DateTime axis for LightningChart JS expects to receive the data as millisecond values. It doesn't support Date objects directly. So if you have times as Date objects then you would need to call getTime() method to get the time as milliseconds. This data can then be displayed in the chart as time when using a AxisTickStrategies.DateTime on the axis that has the time values. If you want to have the DateTime axis tick strategy by default when adding a series to chart you can use defaultAxisXTickStrategy or defaultAxisYTickStrategy if the time is on the Y axis.

Code: Select all

const dateOrigin = new Date()
const chart = lightningChart().ChartXY({
    defaultAxisXTickStrategy: AxisTickStrategies.DateTime(dateOrigin)

const series = chart.addLineSeries()
const xTime = new Date(new Date().getTime() + 100000000)
const yVal = 1
series.add({ x: xTime.getTime() - dateOrigin.getTime(), y: yVal})
The ResultTable will automatically show the value related to the point you hover on. The value is formatted based on the type of Axis TickStrategy used (i.e. for DateTime Axis, the Axis value is shown as a DateTime string).

The ResultTable formatting can be changed by using the setResultTableFormatter API

Hope this helps.

Code: Select all

const series = chart.addLineSeries()
// Change how marker displays its information.
series.setResultTableFormatter((builder, series, x, y) => {
    // Find cached entry for the figure.
    // Parse result table content from values of 'entry'.
    return builder
        .addRow('Series name:', series.getName())
        .addRow('X value:', x.toFixed(1))
        .addRow('Y value: ', y.toFixed(1))

Posts: 1
Joined: Fri May 29, 2020 2:07 pm

Re: How to show custom labels in lightningchart js

Post by corew2020 » Sun May 31, 2020 7:01 am

thanks, I'll try to do