CODEWITHSUNDEEP
javascriptcharts
user2608266
user2608266

Reputation: 141

Chart.js - Where to put global chart configuration?

I am trying to set up a Chart.js line graph with the following code. Where in this do I place the Chart.defaults.global = {} or Chart.defaults.global.responsive = true; code?

Chart.js docs can be found here: http://www.chartjs.org/docs/

<!-- Chart.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js"></script>
<script>
    var ctx = document.getElementById("myChart").getContext("2d");
    var data = {
       labels: ["Week 1", "Week 2", "Week 3", "Week 4", "Week 5", "Week 6", "Week 7"],
       datasets: [
           {
               label: "My Second dataset",
               fillColor: "rgba(151,187,205,0.2)",
               strokeColor: "rgba(151,187,205,1)",
               pointColor: "rgba(151,187,205,1)",
               pointStrokeColor: "#fff",
               pointHighlightFill: "#fff",
               pointHighlightStroke: "rgba(151,187,205,1)",
               data: [86, 74, 68, 49, 42]
           }
       ]
   };

   var options = {
       ...
   };

   var myLineChart = new Chart(ctx).Line(data, options);
</script>

Upvotes: 8

Views: 17610

Answers (3)

DaveL17
DaveL17

Reputation: 2015

In Chartjs v4.4 (I don't recall the exact version where it changed), global defaults are now under a different namespace. For example, Chart.defaults.elements.line.borderWidth = 3; (note the lack of global in the namespace.)

Another Implementation Method

There are myriad ways to implement global defaults, but one way that has worked well for me is to put them in a separate chart defaults file. I typically call mine chartDefaults.js. For example,

import Chart from "chart.js/auto"

// bar
Chart.defaults.elements.bar.borderWidth = 3;
Chart.defaults.elements.bar.borderRadius = 3;

// line
Chart.defaults.elements.line.borderWidth = 3;
Chart.defaults.elements.line.content = 'normal';

// point
Chart.defaults.elements.point.pointStyle = 'circle';
Chart.defaults.elements.point.radius = 0;
Chart.defaults.elements.point.hoverRadius = 0;

Then in each chart you instantiate, you import the defaults file (the exact implementation depends on the project structure):

import '../assets/chartDefaults'

You can still override these defaults for an individual Chart object if you need to.

Upvotes: 0

Miguel P&#233;res
Miguel P&#233;res

Reputation: 640

You could set the options of your chart, but you can also set the global (as you asked) to avoid setting this specific property for each chart you want to instantiate.

You just have to set

Chart.defaults.global.elements.responsive = true;

before instantiating the chart, in your case, before

var myLineChart = new Chart(ctx).Line(data, options);

(P.S.: Chartjs V2)

Upvotes: 4

hex494D49
hex494D49

Reputation: 9235

There are two ways to accomplish what you're looking for. This way

var myLineChart = new Chart(ctx).Line(data, options);
var options = Chart.defaults.global = {
    responsive: true,
    maintainAspectRatio: true  
};

or, this way

var myLineChart = new Chart(ctx).Line(data, {
    responsive: true,
    maintainAspectRatio: true
});

However, to make it responsive you'll have to add some extra CSS

canvas{
    width: 100% !important;
    height: auto !important;
}

so there's no need for inline CSS

Working demo

In accordance with the comment of @JustinXL below and the latest version of Chart.js there's no need for extra CSS, so check out the updated version.

Updated demo

Upvotes: 9

Related Questions