Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

charts.js straight lines - i cant find a solution

So im using charts.js http://www.chartjs.org/ and im trying to make the lines between 2 dots be straight and not curvy for no apperent reason.

it right now looks like that http://imgur.com/RrdRgAR,N31ajM7#1

and i want it to look like basic algebric graphs should look like the other picture in the above link

current datasets:

                label: "Shop Sales",
                fillColor : "rgba(255, 89, 114, 0.6)",
                strokeColor : "rgba(51, 51, 51, 1)",
                pointColor : "rgba(255, 89, 114, 1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(151,187,205,1)",
                maintainAspectRatio: false,

and

window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");

    window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true, scaleFontColor: "#FF5972" }

)};

thank you, im searching for this on the web everywhere

like image 369
downrep_nation Avatar asked Feb 17 '15 18:02

downrep_nation


2 Answers

Set the option bezierCurve to false.

window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");

    window.myLine = new Chart(ctx).Line(lineChartData, {
      responsive: true, 
      scaleFontColor: "#FF5972",
      bezierCurve: false
    });

});

It's right there in the Line Chart option list.. You can also have them be curved but "stiffer" by leaving the option set and then varying the bezierCurveTension property.

like image 125
Pointy Avatar answered Nov 18 '22 05:11

Pointy


It looks like it's been changed with v2.0. It is now tension:0. As of this writing the docs state it's lineTension:0, but that seems incorrect.

like image 20
scojomodena Avatar answered Nov 18 '22 04:11

scojomodena