tana tana - 8 months ago 93
AngularJS Question

Angular-chart.js - Make line chart does not curve

I'm using line chart directive from Angular-Chart.js (at https://jtblin.github.io/angular-chart.js/#line-chart).

As you can see at above link, a line chart is curve.
I don't want curve, I'd like straight line.
How can I config line chart to make it does not curve.
Thank you very much.


you can use chart-options to make your line straight instead of curved.

your canvas would look something like this:

<canvas class="chart chart-line" chart-data="lineData" chart-labels="lineLabels" chart-series="lineSeries" chart-options="lineOptions" chart-click="onClick"></canvas>

Add lineOptions in your controller like this:

$scope.lineOptions ={ elements : { line : { tension : 0 } } };
//define other variables required for `line` as per your requirement.
//lineData , lineLabels , lineSeries, OnClick 

This will make the tension of your line :0. Thus, your line will become straight.

If you still are not able to make your line straight using above methd, you can try installing the latest package(beta) by the below command:

bower install --save angular-chart.js#1.0.0

I hope this will solve your issue.