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

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