How to add multiple background color in line charts

Question

In my requirement i want to display point without lines in line graphs with static background colors. I achieved almost but i am unable to set specific axes background color in chart. I used chart.js (line graphs). Please see my below code, i tried so much please see the attached image, i want to develop like that graph (o-10 axes 1 color like that, background color are fixed with that axes).

 new Chart(document.getElementById("line-chart"), { type: 'line', data: { labels: [0,10, 20, 30, 40, 50, 60, 70, 80, 90], datasets: [{ data: [0,350, 400, 150, 98, 220, 410], label: "Man Engines", // borderColor: "#3e95cd", backgroundColor: 'rgba(244, 81, 30, 0.8)', borderColor: 'rgba(244, 81, 30, 0.8)', pointBackgroundColor: 'rgba(244, 81, 30, 0.5)', pointBorderColor: 'rgba(244, 81, 30, 0.8)', fill: false, pointRadius: 5, showLine: false } ] }, options: { // title: { // display: true, // text: 'World population per region (in millions)' // }, scales: { xAxes: [{ gridLines: { drawOnChartArea: false }, // ticks: { // min: 1 // } }], yAxes: [{ gridLines: { drawOnChartArea: false } }] } // legend: { display: false }, // fillColor: 'rgba(255, 128, 0, 0.8)', } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script> <canvas id="line-chart"></canvas>

Like this output

Current Achieved Output

Answer 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>