Toggle Series programatically in lighning chart - lightningchart

Question

I have UI element and I am attaching series to it
box = legendBox.addElement(UIElementBuilders.CheckBox);
series.attach(box)
Now I click the series in legendbox it toggles my line series.Is there anyway we can click the checkbox programatically ?

Answer 1

UICheckBox can be programmatically toggled on and off with the use of UICheckBox.setOn(isOn) method.
The following code would toggle lineSeries on and off with 1 second interval.
const ui = chart.addUIElement(UILayoutBuilders.Column)
const box = ui.addElement(UIElementBuilders.CheckBox)
lineSeries.attach(box)
setInterval(() => {
box.setOn(!box.getOn())
}, 1000)
See below for full working example where the "Diesel" series is toggled on and off programmatically through the UICheckBox.
// Extract required parts from LightningChartJS.
const {
lightningChart,
SolidLine,
SolidFill,
ColorRGBA,
AxisTickStrategies,
UIOrigins,
DataPatterns,
Themes,
UILayoutBuilders,
UIElementBuilders,
} = lcjs
// Decide on an origin for DateTime axis.
const dateOrigin = new Date(2018, 8, 1)
// ----- Cache used styles -----
const customStrokeStyle = new SolidLine({
fillStyle: new SolidFill({
color: ColorRGBA(200, 50, 50)
}),
thickness: 2
})
// Create a XY Chart.
const chart = lightningChart().ChartXY({
// theme: Themes.dark
})
// Modify the default X Axis to use DateTime TickStrategy, and set the origin for the DateTime Axis.
chart.getDefaultAxisX().setTickStrategy(AxisTickStrategies.DateTime, (tickStrategy) => tickStrategy.setDateOrigin(dateOrigin))
chart.setPadding({
right: 50
})
.setTitle('Diesel and Gasoline Price Comparison')
const diesel = [{
x: 0,
y: 1.52
},
{
x: 1,
y: 1.52
},
{
x: 2,
y: 1.52
},
{
x: 3,
y: 1.58
},
{
x: 4,
y: 2.00
},
{
x: 5,
y: 2.00
},
{
x: 6,
y: 2.00
},
{
x: 7,
y: 2.00
},
{
x: 8,
y: 2.26
},
{
x: 9,
y: 1.90
},
{
x: 10,
y: 1.90
},
{
x: 11,
y: 1.90
},
{
x: 12,
y: 1.90
},
{
x: 13,
y: 1.60
},
{
x: 14,
y: 1.60
},
{
x: 15,
y: 1.60
},
{
x: 16,
y: 1.00
},
{
x: 17,
y: 1.00
},
{
x: 18,
y: 1.00
},
{
x: 19,
y: 1.74
},
{
x: 20,
y: 1.47
},
{
x: 21,
y: 1.47
},
{
x: 22,
y: 1.47
},
{
x: 23,
y: 1.74
},
{
x: 24,
y: 1.74
},
{
x: 25,
y: 1.74
},
{
x: 27,
y: 1.5
},
{
x: 28,
y: 1.5
},
{
x: 29,
y: 1.5
}
]
const gasoline = [{
x: 0,
y: 1.35
},
{
x: 1,
y: 1.35
},
{
x: 2,
y: 1.35
},
{
x: 3,
y: 1.35
},
{
x: 4,
y: 1.90
},
{
x: 5,
y: 1.90
},
{
x: 6,
y: 1.90
},
{
x: 7,
y: 1.92
},
{
x: 8,
y: 1.50
},
{
x: 9,
y: 1.50
},
{
x: 10,
y: 1.3
},
{
x: 11,
y: 1.3
},
{
x: 12,
y: 1.3
},
{
x: 13,
y: 1.3
},
{
x: 14,
y: 1.3
},
{
x: 15,
y: 1.32
},
{
x: 16,
y: 1.40
},
{
x: 17,
y: 1.44
},
{
x: 18,
y: 1.02
},
{
x: 19,
y: 1.02
},
{
x: 20,
y: 1.02
},
{
x: 21,
y: 1.02
},
{
x: 22,
y: 1.02
},
{
x: 23,
y: 1.02
},
{
x: 24,
y: 1.02
},
{
x: 25,
y: 1.02
},
{
x: 27,
y: 1.30
},
{
x: 28,
y: 1.30
},
{
x: 29,
y: 1.30
}
]
// Add two line series.
const lineSeries = chart.addLineSeries()
.setName('Diesel')
const lineSeries2 = chart.addLineSeries()
.setName('Gasoline')
.setStrokeStyle(customStrokeStyle)
// Set the correct value to use for the data frequency.
// 1000ms * 60s * 60min * 24h
const dataFrequency = 1000 * 60 * 60 * 24
// Add the points to each Series - the X values are multiplied by dataFrequency to set the values properly on the X Axis.
lineSeries2.add(diesel.map((point) => ({
x: point.x * dataFrequency,
y: point.y
})))
lineSeries.add(gasoline.map((point) => ({
x: point.x * dataFrequency,
y: point.y
})))
// Setup view nicely.
chart.getDefaultAxisY()
.setTitle('$/litre')
.setInterval(0, 3, false, true)
// Enable AutoCursor auto-fill.
chart.setAutoCursor(cursor => cursor
.setResultTableAutoTextStyle(true)
.disposeTickMarkerX()
.setTickMarkerYAutoTextStyle(true)
)
const legend = chart.addLegendBox()
// Add Chart to LegendBox.
legend.add(chart)
const ui = chart.addUIElement(UILayoutBuilders.Column)
const box = ui.addElement(UIElementBuilders.CheckBox)
lineSeries.attach(box)
setInterval(() => {
box.setOn(!box.getOn())
}, 1000)
<script src="https://unpkg.com/#arction/lcjs#3.0.0/dist/lcjs.iife.js"></script>