Make straight line using line chart


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:
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:
screenshot from 2016-06-27 14-43-39

Author: Fantashit

1 thought on “Make straight line using line chart

  1. I simplified original example:

    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: { return; }),      
          datasets: [
              title: 'test',
              fill: false,
              lineTension: 0,
              //borderWidth: 2,
              pointBorderWidth: 0,
              pointRadius: 0,
              pointHitRadius: 0,
              pointBackgroundColor: 'transparent',
              pointBorderColor: 'transparent',
              data: { return x.value; }),
      window.onload = function() {
        var ctx = document.getElementById("chart-area").getContext("2d");
        window.myPie = new Chart(ctx, config);

Comments are closed.