Page 1 of 1
How to show custom labels in lightningchart js
Posted: Wed May 27, 2020 5:06 pm
by adjmpw
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
How do I pass date to X axis and also how to how time label on hover ?
Re: How to show custom labels in lightningchart js
Posted: Fri May 29, 2020 8:20 am
by Arction_TerhoH
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))
})
Re: How to show custom labels in lightningchart js
Posted: Sun May 31, 2020 7:01 am
by corew2020
thanks, I'll try to do