Chartjs-Passing Global Options to line Chart in 2.1.6/Chart.js

by

1👍

✅

It is because you misunderstood how the chart is built :

You supposed that fill and tension attributes were both directly in the root of the options, but they are actually in options.element.line.

For more information, check the Chart.js doc about element configuration (Scroll until Line Configuration in your case).

But be careful !! Don’t mix up :

  • Editing one element (as you managed to do in the second part of your question) by editing the dataset you pass to the chart data :

    datasets: [
{
    label: "My First dataset",
    fill: false,
    lineTension: 0.1,
    // ...
}]

  • Editing all the elements of the same type (here, the line chart) by editing the chart options :

    var options = { elements: { line: { /*options */ } } };

    As stated in the documentation I gave above :

    Options can be configured for four different types of elements; arc, lines, points, and rectangles. When set, these options apply to all objects of that type unless specifically overridden by the configuration attached to a dataset.

So make sure you actually want to edit all the line charts before editing these attributes directly in the options.

Now if you still want to edit in the options, you will have to build your options var like this :

var options = { elements: { line: { fill: false, tension: 0.1 } } };
var chart_testChart = new Chart.Line(ctx, 
{ 
    data: data, 
    options: options 
});

Here is a working fiddle if you want to see the result.

Leave a comment