Posted in Uncategorized

Make straight line using line chart

   February 24, 2021  1 Comment on 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.