[Chartjs]-Angular-chart.js – Make line chart does not curve

by

10👍

✅

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.

1👍

Try putting the same value for each index in the dataset. That will give you a straight line horizontally on a selected point along y-axis.

angular.module("app", ["chart.js"]).controller("LineCtrl", function ($scope) {

  $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
  $scope.series = ['Series A', 'Series B'];
  $scope.data = [
    [65, 65, 65, 65, 65, 65, 65],
    [35, 35, 35, 35, 35, 35, 35]
  ];
  $scope.onClick = function (points, evt) {
    console.log(points, evt);
  };
  $scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
  $scope.options = {
    scales: {
      yAxes: [
        {
          id: 'y-axis-1',
          type: 'linear',
          display: true,
          position: 'left'
        },
        {
          id: 'y-axis-2',
          type: 'linear',
          display: true,
          position: 'right'
        }
      ]
    }
  };
});

Here is markup

<canvas id="line" class="chart chart-line" chart-data="data"
chart-labels="labels" chart-series="series" chart-options="options"
chart-dataset-override="datasetOverride" chart-click="onClick"
</canvas>

Leave a comment