How can i get the Chart JS Bar Graph Bar Label and Value on click?

Question

My Purpose is i want to pass the bar label and value to another page on click, Here is my Chart JS code and how can i fulfill my purpose ?

var barCtx = document.getElementById("CHRTID");
                var myBarChart = new Chart(barCtx, {
                    type: 'bar',
                    data: {
                        labels: [ JAN,FEB,MAR ],
                        datasets: [{
                            label: 'Order Entry by Date',
                            data: [10,25,95],
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 0.2)'
                            ],
                            borderWidth: .25
                        }]
                    },
                    options: {
                        onClick: function(event) {
                           var activePoints = this.getBarsAtEvent(event);
                           var Values = activePoints[0].label + ' = ' + activePoints[0].value;
                          alert(Values);                       
                        },
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero:true
                                }
                            }]
                        }
                    }
                });

Thanks in Advance.

score 0 · Accepted Answer · answered Apr 17 '18 at 07:43

You can use window.location.replace() to redirect to another page, and pass the parameters in a query string, like so:

onClick: function(c,chart_instances){
    try{
        ev = chart_instances[0];
        window.location.replace("./yourNextPage?label=" + this.data.labels[ev._index] + "&value=" + this.data.datasets.data[ev._index]);

    } catch (e){
        //ignore misclicks
    }
}

Refer to this question on instructions to retrieve the data from a query string in your next page.

How can i get the Chart JS Bar Graph Bar Label and Value on click?

1 Answers1