Hide / show charts in Lightning chart dashboard - lightningchart

Question

I create 3 row chart like below
var charts = [];
const db = lightningChart().Dashboard({
numberOfRows: 3,
numberOfColumns: 1
})
charts[0] = db.createChartXY({
columnIndex: 0,
rowIndex: 0,
columnSpan: 1,
rowSpan: 1,
})
similiarly for charts[1] and charts[2]
Is there anyway we can hide charts[0] and show 1 and 2 ,, or show 2 and hide charts[0] and charts[1] programatically, like legends toggle ?

Answer 1

Currently only way to achieve this is to dispose the chart in the cell and then create a new chart on the same cell. This means that you would need to be able to create the charts from scratch every time you want to change which chart is visible.
To remove the existing chart you can call dispose() on the chart.
chart.dispose()
Then you can create the chart you want to show. You most likely want to make a function to create the chart for you.
const createChart1 = () => {
const chart = dashboard.createChartXY({
columnIndex: 0,
rowIndex: 0
})
chart.setTitle('Chart 1')
return chart
}
const {
lightningChart,
} = lcjs
const lc = lightningChart()
const dashboard = lc.Dashboard({
numberOfColumns: 1,
numberOfRows: 2
})
const createChart1 = () => {
const chart = dashboard.createChartXY({
columnIndex: 0,
rowIndex: 0
})
chart.setTitle('Chart 1')
return chart
}
const createChart2 = () => {
const chart = dashboard.createChartXY({
columnIndex: 0,
rowIndex: 0
})
chart.setTitle('Chart 2')
return chart
}
const createChart3 = () => {
const chart = dashboard.createChartXY({
columnIndex: 0,
rowIndex: 1
})
chart.setTitle('Chart 3')
return chart
}
// Initially have charts 1 and 3 on the dashboard
let c1 = createChart1()
const c3 = createChart3()
// After a timeout change the chart on the first row to chart 2
setTimeout(() => {
// Dispose to remove the chart 1
c1.dispose()
// Create the chart 2 on the place of chart 1
c1 = createChart2()
}, 1000)
<script src="https://unpkg.com/#arction/lcjs#2.2.1/dist/lcjs.iife.js"></script>