Navigation

In order to analyse a data individually, it helps if the chart can activate a given point on the plot. This is where isNavigable comes in handy, which makes the chart interactive with arrow keys and highlights the current active data point.

isNavigable: true // default: false

Try and traverse this chart with arrow-keys.

Each time a data point is activated, a new data-select event is triggered that contains all the label and value information specific to the point This can then be used to reflect in other parts of the webpage.

chart.parent.addEventListener('data-select', (e) => {
    update_moon_data(e.index); // e contains index and value of current datapoint
});