[Chartjs]-Unable to change default values in chart.js

by

4👍

You need to set your default before creating the chart.

window.onload = function(){
    Chart.defaults.global.tooltipFillColor = "rgba(255,0,0,0.8)";
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, {
        responsive : true
    });
};

If you want to change multiple options at once you must follow the same pattern that you do for one. The following code redefines Chart.defaults.global. (i.e. Chart.defaults.global will only have the tooltipFillColor property. All other properties will be destroyed).

Chart.defaults.global = {
  tooltipFillColor: "rgba(255,0,0,0.8)"
};

Instead, you want to redefine each individual property:

Chart.defaults.global.tooltipFillColor ="rgba(255,0,0,0.8)";
Chart.defaults.globaltooltipFontFamily ="'Helvetica Neue', 'Helvetica', 'Arial', sans-serif";
Chart.defaults.globaltooltipFontSize =24;
Chart.defaults.globaltooltipFontStyle ="bold";
Chart.defaults.globaltooltipFontColor = "green";

Leave a comment