Geek Answers Handbook

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

I am using the line chart directive from Angular -Chart.js (at https://jtblin.imtqy.com/angular-chart.js/#line-chart ).

As can be seen from the above link, the line diagram is a curve. I do not want curves, I would like to draw a straight line. How can I set up a configuration line chart to make it not curved. Thank you very much.

+6
source share
2 answers

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

your canvas will 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 to your controller as follows:

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

This will stress your line: 0. Thus, your line will become straight.

If you still cannot complete your line using the above method, you can try installing the last package (beta) with the following command:

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

I hope this solves your problem.

+9
source

Try entering the same value for each index in the dataset. This will give you a straight line horizontally at the selected point along the 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 the 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>
0
source

More articles:


All Articles