How to make lines in line charts from ng2-charts straight lines? - html

Question

I'm using ng2-charts to make line charts in my Angular 8 application. But, the line charts are being displayed as curved lines and not straight lines. I'm taking the code from the following link https://valor-software.com/ng2-charts/#/LineChart as you can see, the lines are not straight. How to make them straight lines?
Thanks.

Answer 1

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}"

Answer 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>