CODEWITHSUNDEEP
javascriptjquerychartshighcharts
Max Powers
Max Powers

Reputation: 1179

highcharts group series click event to get all data in catagory

I have the following chart that on click will return the category plus the series data you clicked on. If you see in the chart I have three columns in my bar chart I wanted to get all three series data on the click. is there anyway to do this?

Here is my existing JS Fiddle js-fiddle-link

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>


Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar']
    },

        tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },

    plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function () {
                        alert('Category: ' + this.category + ', value: ' + this.y);
                    }
                }
            }
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4]
    },
    {
        data: [50, 71.5, 106.4]
    },
    {
        data: [21, 71.5, 106.4]
    }]
});

Upvotes: 1

Views: 1757

Answers (1)

Alimo
Alimo

Reputation: 541

I don't know if there is an easier way to access the series data but this snippet does what you want.

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar']
    },

        tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },

    plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function () {
                        const series = this.series.chart.options.series;
                        const values = series.map(serie => serie.data[this.index]);
                        console.log(values);
                    }
                }
            }
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4]
    },
    {
        data: [50, 71.5, 106.4]
    },
    {
        data: [21, 71.5, 106.4]
    }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

Upvotes: 1

Related Questions