downrep_nation downrep_nation - 2 years ago 83
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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download