Chartjs-Line formatting in Chart.js for vertical steps

by

0👍

✅

I figured it out, what you’re seeing when you look at the graph is actually mostly just the individual points. Due to the large number of point data, it wasn’t apparent at first, but the lines were thinner than the points width.

The vertical lines being so much thinner are actually because those are formatted with the line settings. By setting the transparency of the points color and border to 0, and by reformatting the line settings, I got was able to format it the way I intended. Sample below for reference should anyone else have a similar issue in the future.

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
  <!-- 
      NOT USED FOR THIS EXAMPLE
      <script src="data.js"></script> 
      -->
  <script src="https://codepen.io/EtherealBug/pen/wjOdoa.js"></script>
</head>


<body>
  <canvas id="myChart"></canvas>
</body>
<style>
  canvas {
    width: 100% !important;
    max-width: 2000px;
    height: auto !important;
  }
</style>
<script>
  var labels = jsonfile.jsonarray.map(function(e) {
    return e.Time;
  });
  var data = jsonfile.jsonarray.map(function(e) {
    return e.Speed;
  });

  var ctx = myChart.getContext('2d');
  var config = {
    options: {
      legend: {
        position: 'bottom',
      },
      scales: {
        xAxes: [{
          scaleLabel: {
            fontSize: 12,
            fontStyle: 'bold',
            display: true,
            labelString: 'Y(1)'
          },
          ticks: {
            autoSkip: true,
            maxTicksLimit: 30,
          },

        }],
      },
    },
    type: 'line',
    data: {
      labels: labels,
      datasets: [{
        lineTension: 0.4, //defaul val = 0.4
        pointBackgroundColor: 'rgba(0,0,0,0)',
        pointBorderColor: 'rgba(0,0,0,0)',
        borderColor: 'black',
        borderWidth: 4,
        fill: false,
        label: 'Graph Line',
        data: data,
      }]
    }
  };
  var chart = new Chart(ctx, config);
</script>

</html>

Note: I’ll accept this answer when it allows me in 2 days since it’s my own.

Leave a comment