Chartjs-Click on chart to expand more information – Chart.js

by

0👍

Displaying additional information below a chart is probably out of scope of Chart.js, so you will need take care of that yourself by e.g. placing a separate DIV below the chart which gets updated dynamically. So the question is, how to trigger the update?

I haven’t found a way to listen to hover events on a segment. However, Chart.js offers a range of callbacks for the tooltips, which are triggered whenever the user hovers a certain element, see: https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks

You could hook into one of these, like so:

const chartOptions = {
    tooltips: {
        callbacks: {
            label: function(tooltipItem, data) {
                const dataSet = data.datasets[tooltipItem.datasetIndex];
                const value = dataSet.data[tooltipItem.index];

                // Now trigger a data update / display of a separate DIV with your information.

                // Don't forget to return your desired label value.
                return value;
            }
        }
    }
}

Leave a comment