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

Question

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.

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, Aug 18 '16 at 08:13
@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, Aug 18 '16 at 08:17

Ravi Shankar Bharti · Accepted Answer · 2016-08-18T08:39:55.740

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.

edited Aug 18 '16 at 08:39

answered Aug 18 '16 at 08:32

Ravi Shankar Bharti

8,922
5
28
52

Thanks Ravi, It works like charm. I have one more question, where can I refer the document for `option`, I thought It have to be explained at some where, right? I want to understand the `option` completely. – tana Aug 18 '16 at 08:53
1

you can see all the options avialable in chartjs documentation. http://www.chartjs.org/docs/ .I would suggest you to properly read and understand the `chart configuration` for using `options`. It might take some time, but its worth reading. – Ravi Shankar Bharti Aug 18 '16 at 09:08
To me `tension: 0` produces odd behaviour. I got straight lines working with `tension: 0.1`. It's worth trying if you encounter something strange. – Perttu Haliseva Aug 31 '16 at 06:53

score 1 · Answer 2 · answered Aug 18 '16 at 08:22

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>

Thanks for your idea. But maybe you miss understood my mean. I want the line chart line this (https://bouil.github.io/angular-google-chart/#/generic/LineChart). Do you have any idea? — tana, Aug 18 '16 at 08:25
Please try to explain then what you are wanting. I can edit the question if needed — Umair Farooq, Aug 18 '16 at 08:26
Sorry Umair Farooq. Let me explain: Line chart of angular-chart draw a curve to connect the points. But, I dont want the curve, I want straight line to connect points line google like chart at https://bouil.github.io/angular-google-chart/#/generic/LineChart — tana, Aug 18 '16 at 08:34

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

2 Answers2