[Chartjs]-Add Link to X-Label Chart.js

by

5👍

✅

An alternative approach would be to determine the point where the user is actually clicked and based on that calculate which label was clicked. For that you will need some information about the chart created and have to do some calculations.

Below is a way of doing that, and here is a Fiddle with this code/approach. Hope it helps.

    $("#canvas").click( 
       function(evt){
            var ctx = document.getElementById("canvas").getContext("2d");
            // from the endPoint we get the end of the bars area
            var base = myBar.scale.endPoint;
            var height = myBar.chart.height;
            var width = myBar.chart.width;
            // only call if event is under the xAxis
            if(evt.pageY > base){
                // how many xLabels we have
                var count = myBar.scale.valuesCount;
                var padding_left = myBar.scale.xScalePaddingLeft;
                var padding_right = myBar.scale.xScalePaddingRight;
                // calculate width for each label
                var xwidth = (width-padding_left-padding_right)/count;
                // determine what label were clicked on AND PUT IT INTO bar_index 
                var bar_index = (evt.offsetX - padding_left) / xwidth;
                // don't call for padding areas
                if(bar_index > 0 & bar_index < count){
                    bar_index = parseInt(bar_index);
                    // either get label from barChartData
                    console.log("barChartData:" + barChartData.labels[bar_index]);
                    // or from current data
                    var ret = [];
                    for (var i = 0; i < myBar.datasets[0].bars.length; i++) {
                        ret.push(myBar.datasets[0].bars[i].label)
                    };
                    console.log("current data:" + ret[bar_index]);
                    // based on the label you can call any function
                }
            }
       }
);

3👍

I modified iecs’s answer to work with chartjs 2.7.1

var that = this;
this.chart = new Chart($("#chart"), {
    type: 'bar',
    data: {
        labels: labels,
        datasets: datasets
    },
    options: {
        events: ["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"],
        onClick: function(e, data) {
            var ctx = $("#chart")[0].getContext("2d");
            var base = that.chart.chartArea.bottom;
            var height = that.chart.chart.height;
            var width = that.chart.chart.scales['x-axis-0'].width;
            var offset = $('#chart').offset().top - $(window).scrollTop();
            if(e.pageY > base + offset){
                var count = that.chart.scales['x-axis-0'].ticks.length;
                var padding_left = that.chart.scales['x-axis-0'].paddingLeft;
                var padding_right = that.chart.scales['x-axis-0'].paddingRight;
                var xwidth = (width-padding_left-padding_right)/count;
                // don't call for padding areas
                var bar_index = (e.offsetX - padding_left - that.chart.scales['y-axis-0'].width) / xwidth;
                if(bar_index > 0 & bar_index < count){
                    bar_index = Math.floor(bar_index);
                    console.log(bar_index);
                }
            }
        }
    }
});

The main differences are:

  • The newer versions of chartjs use an chart.scales array instead of chart.scale with a bunch of values
  • I had to subtract chart.scales[‘y-axis-0’].width from the x offset to get the correct bar_index
  • I changed parseInt to Math.floor, just personal preference

And if you want the cursor to change when you hover over them, add “hover” to the events array and this to the options:

onHover: function(e) {
    var ctx = $("#chart")[0].getContext("2d");
    var base = that.chart.chartArea.bottom;
    var height = that.chart.chart.height;
    var width = that.chart.chart.scales['x-axis-0'].width;
    var yOffset = $('#chart').offset().top - $(window).scrollTop();
    var xOffset = $('#chart').offset().left - $(window).scrollLeft();

    var left = xOffset + that.chart.scales['x-axis-0'].paddingLeft + that.chart.scales['x-axis-0'].left;
    var right = xOffset + that.chart.scales['x-axis-0'].paddingRight  + that.chart.scales['x-axis-0'].left + width;

    if(e.pageY > base + yOffset && e.pageX > left && e.pageX < right){
            e.target.style.cursor = 'pointer';
    }
    else {
        e.target.style.cursor = 'default';
    }
}

Leave a comment