CODEWITHSUNDEEP
jquerychart.js
Mr Dansk
Mr Dansk

Reputation: 786

ChartJS Update callbacks

I am trying to update my code to be able to switch between numbers and percentages.

However I need to be able to update the callbacks for axis labels/ticks as well as callbacks for the data.

var ctx = document.getElementById("percents").getContext('2d');
var percents_chart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ["Category 1", "Category 2", "Category 3", "Category 4"],
        datasets: [{
            backgroundColor: ["red", "blue", "yellow", "green"],
            label: "Count",
            data: percents_array
        }]
    },
    options: {
        scales: {
            yAxes: [{
                gridLines: {
                    color: "rgba(0,0,0,0)"
                }
            }],
            xAxes: [{

                ticks: {
                    beginAtZero: true,
                    callback: function (value, index, values) {
                        return addCommas(value) + "%";
                    }
                }
            }]
        },
        plugins: {
            datalabels: {
                display: true,
                color: "#fff",
                formatter: function (value, context) {
                    return value + '%';
                }
            }
        },
        legend: {
            display: false
        },
        tooltips: {
            mode: 'index',
            intersect: false,
            callbacks: {
                label: function (tooltipItems, data) {
                    return addCommas(tooltipItems.xLabel) + "%";
                }
            }
        },
        hover: {
            mode: 'nearest',
            intersect: true
        },
        responsive: true,
        title: {
            fontSize: "16",
            display: true,
            text: 'Categories by percentage'
        }
    }
});

I have functions which - Change xAxes tick labels to add commas and percentages symbols. - Change dataLabels on the bars to add percentage symbols. - Change the tooltips to add commas and percentage symbols

Obviously when I toggle to numbers instead of percentages I need the comma's to stay but the percentage symbols to be updated. So I need to access the callback functions after a button has been clicked and update them one the click.

This is my current toggling code: (Not working)

$('.toggle-percents-numbers > button').click(function(){
    $('.toggle-percents-numbers > button').removeClass('active');
    $(this).addClass('active');
    var type = $(this).html().toLowerCase();
    percents_chart.options.title.text = "Categories by " + type;

    if(type == "percentages"){
        percents_chart.data.datasets[0].data = percents_array;
        percents_chart.options.scales.xAxes[0].ticks.callback.label = function (tooltipItems, data) {
                return addCommas(tooltipItems.xLabel) + "%";
        }

    } else if (type == "numbers"){
        percents_chart.data.datasets[0].data = percents_array_numbers;
        percents_chart.options.scales.xAxes[0].ticks.callback.label = function (tooltipItems, data) {
            return addCommas(tooltipItems.xLabel);
        }
    }
    percents_chart.update();
});

Upvotes: 4

Views: 14085

Answers (1)

beaver
beaver

Reputation: 17647

Instead of modifying your callbacks why not using a condition inside them, testing a global variable?

For example:

tooltips: {
  mode: 'index',
  intersect: false,
  callbacks: {
    label: function (tooltipItems, data) {
      if (percent)
        return addCommas(tooltipItems.xLabel) + "%";
      else
        return addCommas(tooltipItems.xLabel);
    }
  }
},

Here is a jsfiddle showing this approach: https://jsfiddle.net/beaver71/nk6rz1f3/

Upvotes: 4

Related Questions