Search code examples
angularjschart.jsangular-chart

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.

Solution

  • 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.