Search code examples
echarts

ECharts - How to zoom in to programmatically selected data?

I use Apache Echarts that plots timeline chart like below. I have a table below the chart, each row of which has details about a particular datapoint in the graph. The default zoom level of the chart is 20%.

Whenenver I select a row in the table, I want to highlight the selected datapoint in the chart and also want to zoom to that datapoint. I use select and datazoom dispatch actions for this, but I am unable to find the start and end of datazoom using the selected dataIndex.

How to programmatically calculate the zoom start and index using the dataIndex?

https://echarts.apache.org/examples/en/editor.html?c=custom-profile

Solution

  • Just use the startValue and endValue properties of the dataZoom action.

    Example:

    const start = data[dataIndex].value[1];
const end = data[dataIndex].value[2];
myChart.dispatchAction({type: 'dataZoom', dataZoomIndex: 0, startValue: start, endValue: end});