chart.js

Chart.js : straight lines instead of curves


I'm using Chart.JS to plot a dataset,

However I got a smooth effect !

Here is the curve I've got :

enter image description here

Here is my code :

function plotChart(data, labels) {

    var lineChartData = {
        "datasets": [{
            "data": data,
            "pointStrokeColor": "#fff",
            "fillColor": "rgba(220,220,220,0.5)",
            "pointColor": "rgba(220,220,220,1)",
            "strokeColor": "rgba(220,220,220,1)"
        }],
        "labels": labels
    };

    var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);

}

How can I have straight lines instead of curves ?

Thank you


Solution

  • Solution for Version 1 (old charts version)

    According to documentation on chartjs.org

    you can set the 'bezierCurve' in options and pass it in when you create the chart.

    bezierCurve: false
    

    eg:

    var options = {
        //Boolean - Whether the line is curved between points
        bezierCurve : false
    };
    var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData, options);
    

    Update for version 2

    According to updated documentation for Line Configuration in global options

    Name        Type    Default Description
    tension     Number  0.4     Default bezier curve tension. Set to 0 for no bezier curves.
    

    eg:

    var options = {
        elements: {
            line: {
                tension: 0
            }
        }
    };
    

    And also directly in the Dataset Structure by setting lineTension to 0 (zero).

    Property        Type    Usage
    lineTension     Number  Bezier curve tension of the line. Set to 0 to draw straightlines. 
                            This option is ignored if monotone cubic interpolation is used. 
                            Note This was renamed from 'tension' but the old name still works.
    

    An example data object using these attributes is shown below.

    var lineChartData = {
        labels: labels,
        datasets: [
            {
                label: "My First dataset",
                lineTension: 0,           
                data: data,
            }
        ]
    };