downrep_nation downrep_nation - 7 months ago 28
Javascript Question

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

Answer

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.

Comments