CODEWITHSUNDEEP
javascriptchartschart.js
Sheel Ranjan
Sheel Ranjan

Reputation: 167

Unable to change default values in chart.js

I am using following code

window.onload = function(){
    Chart.defaults.global.tooltipFillColor = "rgba(255,0,0,0.8)";
    Chart.defaults.global = { 
    tooltipFillColor: "rgba(255,0,0,0.8)",
    tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
    tooltipFontSize: 24,
    tooltipFontStyle: "bold",
    tooltipFontColor: "green",
    }
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, {
        responsive : true
    });
}

I am unable to change many values at once. When I write the code above the chart disappears altogether.

Upvotes: 1

Views: 947

Answers (1)

Steven Wexler
Steven Wexler

Reputation: 17279

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";

Upvotes: 4

Related Questions