Chartjs-How can I shade a portion of a ChartJS line grph=

by

1👍

✅

Use chartjs-plugin-annotation. Specifically, a box annotation.

Here’s an example:

const ctx = document.getElementById('myChart').getContext('2d');

new Chart(ctx, {
  type: 'line',
  data: {
    labels: [1, 2, 3, 4, 5],
    datasets: [{
      label: 'Rainfall',
      data: [200, 90, 120, 400, 500],
      fill: false,
      borderColor: 'green',
      backgroundColor: 'green',
    }]
  },
  options: {
    annotation: {
      annotations: [{
        type: 'box',
        xScaleID: 'x-axis-0',
        yScaleID: 'y-axis-0',
        xMin: 1,
        xMax: 3,
        backgroundColor: 'rgba(200, 200, 200, 0.7)',
        borderColor: '#eee',
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js" integrity="sha512-QEiC894KVkN9Tsoi6+mKf8HaCLJvyA6QIRzY5KrfINXYuP9NxdIkRQhGq3BZi0J4I7V5SidGM3XUQ5wFiMDuWg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script>

<body>
  <canvas id="myChart" width="600" height="400"></canvas>
</body>

Leave a comment