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

6
votes

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.

2
angularjschart.jsangular-chart
Please post the you have tried so far. I think I know the solution to your question. I can point you in right direction - Umair Farooq
@Umair Farooq: I tried with sample code at the link in my question. I dont see any line chart's config to remove the curve. Could you share your idea for that. Thanks. - tana

2 Answers

10
votes

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
votes

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>