[Chartjs]-How to make Chart.js scatter x-axis chart begin and end exactly at minimum/maximum dataset value

by

1👍

You can specify a min and max on your scale options:

let data = [
          { x: 1677246631553, y: 31 },
          { x: 1677246631840, y: 17 },
          { x: 1677246632077, y: 31 },
          { x: 1677246632329, y: 42 },
          { x: 1677246632552, y: 38 },
          { x: 1677246632792, y: 7 },
          { x: 1677246633017, y: 13 },
          { x: 1677246633237, y: 17 },
          { x: 1677246633472, y: 35 },
          { x: 1677246633705, y: 4 }
        ] 
let ctx = document.getElementById("myChart");
let myChart = new Chart(ctx, {
  type: "scatter",
  data: {
    datasets: [
      {
        label: "ds1",
        data: data,
        backgroundColor: "#009900",
        borderColor: "#009900",
      }
    ]
  },
  options: {
    animation: false,
    scales: {
      x: {
        min: data[0].x,
        max: data[data.length - 1].x,
      }
    }
  }
});
<script src="https://npmcdn.com/chart.js@4.2.1/dist/chart.umd.js"></script>
<div class="myChartDiv">
  <canvas id="myChart" width="600" height="400"></canvas>
</div>

Leave a comment