[Chartjs]-How to make lines in line charts from ng2-charts straight lines?

by

7👍

✅

Pass in bezierCurve: false into the options like this:

<canvas baseChart width="400" height="400"
            [datasets]="lineChartData"
            [labels]="lineChartLabels"
            [options]="{bezierCurve: false}">
</canvas>

Or if you use the newer version lineTension: 0:

<canvas baseChart width="400" height="400"
            [datasets]="lineChartData"
            [labels]="lineChartLabels"
            [options]="{lineTension: 0}">
</canvas>

Or if you want to affect a certain dataset:

<canvas baseChart width="400" height="400"
            [datasets]="{data: data, lineTension: 0}"
            [labels]="lineChartLabels"
            [options]="lineChartOptions">
</canvas>

Unrelated question from OP:

I noticed that by default the area under the line graph has a color, I tried background-color:'none'; but that didn’t work and it just put a grey color under it. Is there any way to not have any color under the line?

<canvas baseChart width="400" height="400"
            [datasets]="{data: data, lineTension: 0, fill: false}"
            [labels]="lineChartLabels"
            [options]="lineChartOptions">
</canvas>

[datasets]="{fill: false}"

2👍

New version of ng2-chart are in this way:

Javascript Code:

 public lineChartOptions: ChartConfiguration['options'] = {
    elements: {
      line: {
        tension: 0
      }
    }
}

HTML Code:

 <canvas baseChart 
                  [data]="lineChartData"
                  [options]="lineChartOptions">
 </canvas>

Leave a comment