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

Question

Here is my jsfiddle explaining the issue I am facing. I want to basically pass the options object (to disable fill and bezier curves) like I could have done in the older versions...

https://jsfiddle.net/xjdvngwe/

Basically I want to achieve passing an options to the chart function at the time of chart creation

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

And in the latest version 2.1.6, I cannot get this to work

If I pass them like this, they work fine but I am looking for a way to pass them as options object

var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
    {
        label: "My First dataset",
        fill: false,
        lineTension: 0.1,

tektiv · Accepted Answer · 2016-07-14T15:27:08.843

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.

Thanks for the detailed explanation !!! I wasn't able to infer this easily by looking at the existing docs — Puneet Gupta, Jul 14 '16 at 15:37
@PuneetGupta There is a lot of information in the docs, but sometimes, it can be hard to find what you are looking for .. Glad it helped :) — tektiv, Jul 14 '16 at 15:41

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

1 Answers1