user2608266 user2608266 - 5 months ago 30
Javascript Question

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>

Answer

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

Comments