Chart.js: How can I set paddings and draw a background box in a line chart?

by

1👍

✅

For the padding the easyest thing you can do is to just add 2 null values, 1 in front of the labels array and one as final element to create space. For the box annotation as I mentioned in a comment your scale ID’s are wrong

Example:

var options = {
  type: 'line',
  data: {
    labels: [null, 2019, 2020, 2021, 2022, null],
    datasets: [{
      label: '# of Votes',
      data: [{
        x: 2019,
        y: 100
      }, {
        x: 2021,
        y: 400
      }, {
        x: 2022,
        y: 100
      }],
      borderColor: 'pink',
      backgroundColor: 'red',
      radius: 5
    }]
  },
  options: {
    scales: {
      x: {
        grid: {
          display: false
        }
      }
    },
    plugins: {
      annotation: {
        annotations: [{
          drawTime: "beforeDatasetsDraw",
          type: "box",
          xScaleID: "x",
          yScaleID: "y",
          xMin: 0,
          xMax: 100,
          yMin: 0,
          yMax: 200,
          backgroundColor: "rgba(0, 128, 0, 0.8)",
          borderWidth: 0
        }]
      },
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.0.2/chartjs-plugin-annotation.js"></script>
</body>

Leave a comment