Question

56

Click event on stacked bar chart - ChartJs

rated 0 times [ 60] [ 4] / answers: 1 / hits: 25979 / 7 Years ago, fri, june 16, 2017, 12:00:00

I am trying to implement click event on Stacked Bar chart.

The data looks like below:

var chartData = {

    type: 'horizontalBar',

    data: {

        labels: ['A0224', 'A3681', 'A3984', 'A4101', 'A4150', 'B0682', 'Others'],

        datasets: [

            {

                label: P1,

                backgroundColor: '#cc3399',

                data: [6, 7, 6, 8, 6, 10, 3]

            },

            {

                label: P2,

                backgroundColor: '#0099ff',

                data: [8, 9, 5, 8, 6, 10, 3]

            },

            {

                label: P3,

                backgroundColor: '#0022ff',

                data: [6, 7, 6, 8, 6, 10, 3]

            }

        ]

    },

    options: {

        legend: { display: false },

        scales: {

            yAxes: [{

                stacked: true

            }],

            xAxes: [{

                stacked: true

            }]

        },



    }

}

The method for click event and chart creation looks like below:

var myChart = new

    Chart(document.getElementById(createCurrYearHccGapChart),

    chartData);

var canvas = document.getElementById('createCurrYearHccGapChart');

canvas.onclick = function (evt) {

    var activePoints = myChart.getElementsAtEvent(evt);

    var cdata = activePoints[0]['_chart'].config.data;

    var idx = activePoints[0]['_index'];

    var label = cdata.datasets[idx].label;

    var value = cdata.datasets[0].data[idx];

};

And the chart looks like below :

Below are the values i am getting wherever i click on single bar:

Bar 1 - label = P1, value = 6

Bar 2 - label = P2, value = 7

Bar 3 - label = P3, value = 6 and etc...

Problem:

So wherever i click on the 1st bar the label is P1 its because i am getting the index value as 0 for the entire bar and 1 for bar 2 and so on.

Question:

Is there any way to identify the x coordinate value? so that i can identify the click is from which stack.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bryonk

Add To Favorites

Follow

Total Points: 161

Total Questions: 116

Total Answers: 107

Location: Albania

Member since Sun, Nov 22, 2020

4 Years ago

bryonk questions

1 What is the react query queryKey typescript type

Sat, Aug 13, 22, 00:00, 2 Years ago

1 Cannot read properties of null (reading 'addEventListener') in a Javascript file (not script tag)

Sat, Jan 15, 22, 00:00, 2 Years ago

1 Pagination in React/Typescript

Sun, May 9, 21, 00:00, 3 Years ago

1 Redirect to another page with TOKEN header through Server

Tue, Mar 16, 21, 00:00, 3 Years ago

1 What JavaScript engine does Apple's Safari browser use?

Tue, Sep 29, 20, 00:00, 4 Years ago

View All

answered 7 Years ago rohan · Accepted Answer

You could accomplish this using the following on-click event handler for your chart ...

canvas.onclick = function(evt) {

   var activePoint = myChart.getElementAtEvent(evt)[0];

   var data = activePoint._chart.data;

   var datasetIndex = activePoint._datasetIndex;

   var label = data.datasets[datasetIndex].label;

   var value = data.datasets[datasetIndex].data[activePoint._index];

};

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

var chartData = {

   type: 'horizontalBar',

   data: {

      labels: ['A0224', 'A3681', 'A3984', 'A4101', 'A4150', 'B0682', 'Others'],

      datasets: [{

         label: P1,

         backgroundColor: '#cc3399',

         data: [6, 7, 6, 8, 6, 10, 3]

      }, {

         label: P2,

         backgroundColor: '#0099ff',

         data: [8, 9, 5, 8, 6, 10, 3]

      }, {

         label: P3,

         backgroundColor: '#0022ff',

         data: [6, 7, 6, 8, 6, 10, 3]

      }]

   },

   options: {

      responsive: false,

      legend: {

         display: false

      },

      scales: {

         yAxes: [{

            stacked: true

         }],

         xAxes: [{

            stacked: true

         }]

      },



   }

}



var canvas = document.getElementById('createCurrYearHccGapChart');

var myChart = new Chart(canvas, chartData);



canvas.onclick = function(evt) {

   var activePoint = myChart.getElementAtEvent(evt)[0];

   var data = activePoint._chart.data;

   var datasetIndex = activePoint._datasetIndex;

   var label = data.datasets[datasetIndex].label;

   var value = data.datasets[datasetIndex].data[activePoint._index];

   console.log(label, value);

};

<script src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js></script>

<canvas id=createCurrYearHccGapChart height=170></canvas>