So im using charts.js / 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 .png

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

So im using charts.js http://www.chartjs/ 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 https://i.sstatic/rK8df.png

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

• javascript
• chart.js

2 Answers 2

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.

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.