Make straight line using line chart

Hello.

When creating a line chart with decimal numbers with small differences the resulting chart is not rendered as a straight line, this line slightly wiggles:

See here: https://output.jsbin.com/zerucizohi
screenshot from 2016-06-27 14-24-31

I have few questions:

  1. Is it possible to make this completely straight with current chart.js? If yes please let me know how to do that.
  2. If not could some kind of smoothness/fitting parameter be added to the chart.js configuration?

I’m asking because before I used google charts and same values were rendered as straight line: https://output.jsbin.com/vugizebuka
screenshot from 2016-06-27 14-43-39

Author: Fantashit

1 thought on “Make straight line using line chart

  1. I simplified original example: https://output.jsbin.com/kobekijuru/1

    screenshot from 2016-06-27 16-51-59

    (attaching the code just in case)

    <script type="text/javascript" async>
      var data = [];
      for(var i=0;i<100;i++) {
            data.push({date: new Date(), value: i});
          }
    
      var config = {
        type: 'line',
        options: {
          responsive: false,
          scales: {
            xAxes: [{
              gridLines: {display: false}
            }],
            yAxes: [{gridLines: {display: false}}]
          }
        },
        data: {
          labels: data.map(function(x) { return x.date; }),      
          datasets: [
            {
              title: 'test',
              fill: false,
              lineTension: 0,
              //borderWidth: 2,
              pointBorderWidth: 0,
              pointRadius: 0,
              pointHitRadius: 0,
              pointBackgroundColor: 'transparent',
              pointBorderColor: 'transparent',
              data: data.map(function(x) { return x.value; }),
            }
          ],
        }
      };
    
      window.onload = function() {
        var ctx = document.getElementById("chart-area").getContext("2d");
        window.myPie = new Chart(ctx, config);
      };
    </script>

Comments are closed.