[Chartjs]-How to add multiple background color in line charts

by

1👍

✅

Instead of using type: line, you should use type: scatter.

You can then use chartjs-plugin-annotation.js to draw individual boxes and text on your chart.

new Chart(document.getElementById("line-chart"), {
      type: 'scatter',
      data: {
        datasets: [{
          data: [{x: 3, y: 398}, {x: 5, y: 350}, {x: 12, y: 396}, {x: 20, y: 160}, {x: 25, y: 100}, {x: 30, y: 195} ],
          label: "Man Engines",
          borderColor: 'rgba(244, 81, 30, 0.8)',
          pointBackgroundColor: 'rgba(0, 0, 0, 1)',
          pointBorderColor: 'rgba(244, 81, 30, 0.8)',
          pointRadius: 5
        }
        ]
      },
      options: {
        legend: {
          display: false
        },
        scales: {
          xAxes: [{
            scaleLabel: {
              display: true,
              labelString: 'BN [mgKOH/g]',
              fontStyle: 'bold'
            },
            gridLines: {
              drawOnChartArea: false
            },
            ticks: {
              min: 0,
              max: 70,
              stepSize: 10
            }
          }],
          yAxes: [{
            scaleLabel: {
              display: true,
              labelString: 'Iron (Fe) total [mg/kg]',
              fontStyle: 'bold'
            },
            gridLines: {
              drawOnChartArea: false
            },
            ticks: {
              min: 0,
              max: 500,
              stepSize: 100
            }
          }]
        },
        annotation: {
          events: ["click"],
          annotations: [       
            {
              drawTime: "beforeDatasetsDraw",
              type: "box",
              xScaleID: "x-axis-1",
              yScaleID: "y-axis-1",
              xMin: 0,
              xMax: 100,
              yMin: 0,
              yMax: 500,
              backgroundColor: "rgba(212, 0, 0, 0.8)",
              borderWidth: 0
            },
            {
              drawTime: "beforeDatasetsDraw",
              type: "box",
              xScaleID: "x-axis-1",
              yScaleID: "y-axis-1",
              xMin: 10,
              xMax: 100,
              yMin: -10,
              yMax: 300,
              backgroundColor: "rgba(255, 255, 0, 0.8)",
              borderColor: "rgba(255, 128, 0, 0.5)",
              borderWidth: 6
            },
            {
              drawTime: "beforeDatasetsDraw",
              type: "box",
              xScaleID: "x-axis-1",
              yScaleID: "y-axis-1",
              xMin: 15,
              xMax: 45,
              yMin: -10,
              yMax: 200,
              backgroundColor: "rgba(0, 128, 0, 0.8)",
              borderColor: "rgba(128, 255, 0, 0.5)",
              borderWidth: 6
            },
            {
            drawTime: "afterDatasetsDraw",
            type: 'line',
              mode: 'horizontal',
              scaleID: 'y-axis-1',
              value: 400,
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0,
              label: {
                fontStyle: 'normal',
                fontSize: 18,
                fontColor: 'white',
                backgroundColor: 'rgba(0, 0, 0, 0)',
                content: "Danger - Do not operate in this area",
                enabled: true
              }
            },
            {
            drawTime: "afterDatasetsDraw",
            type: 'line',
              mode: 'horizontal',
              scaleID: 'y-axis-1',
              value: 250,
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0,
              label: {
                xAdjust: 40,
                fontStyle: 'normal',
                fontSize: 18,
                fontColor: 'black',
                backgroundColor: 'rgba(0, 0, 0, 0)',
                content: "Alert area - Adjustment of feed rate may be needed",
                enabled: true
              }
            },
            {
            drawTime: "afterDatasetsDraw",
            type: 'line',
              mode: 'horizontal',
              scaleID: 'y-axis-1',
              value: 150,
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0,
              label: {
                xAdjust: -50,
                fontStyle: 'normal',
                fontSize: 18,
                fontColor: 'white',
                backgroundColor: 'rgba(0, 0, 0, 0)',
                content: "Save area",
                enabled: true
              }
            }
          ]
        }
      }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script>
<canvas id="line-chart"></canvas>

Leave a comment