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

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

Problem :

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.

Comments

Comment posted by Joel

Pass in

Comment posted by Abhishek Satyavolu

@Joel Thank you that worked! Also, 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?

Comment posted by Joel

Not sure what you mean. Try:

Comment posted by Abhishek Satyavolu

[datasets]=”{fill:false}” worked, thanks a lot! 😀

Comment posted by Richard Rodjues

The solution did not contain the ‘>’ bracket after the canvas tag and will not work in angular component html. I cant seem to edit your solution as it contains less than 6 characters altogether

By