0
426
VistasHow to add background color on highchart based on flag?
I am trying to create highchart in which on x-axis I need to plot dates and on y-axis data will plot. I have another column in db, based on that i need to color background(i.e if value is 1 than background will be yellow otherwise white in case of 0) as shown in image.
.
const series = warData.map((m) => {
return {
name: m.Month,
data: [[m.Month.toString(), JSON.parse(m.Maintenance)]],
};
});
console.log(series);
// console.log(warData);
const options = {
chart: {
type: "column",
},
title: {
text: "",
},
legend: {
verticalAlign: "bottom",
enabled: false,
},
credits: false,
yAxis: {
title: {
text: "Maintenance Cost",
style: {},
},
},
xAxis: {
type: "category",
},
series: series,
//colors: ["#4690e6"],
// series: [
// {
// data: [
// ["cate", 7],
// ["gories", 2],
// ],
// },
// ],
};
i am not able to add this background color based on this flag. Please help. Any help would be highly appreciated. Thanks!
the data that i am using is:
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
You can use programmatically generated plot-bands. For example:
const plotBands = [];
const series = warData.map((m, index) => {
if (m.flag === 1) {
plotBands.push({
color: 'yellow',
from: index - 0.5,
to: index + 0.5
});
}
return {
name: m.Month,
data: [
[m.Month.toString(), JSON.parse(m.Maintenance)]
],
};
});
const options = {
xAxis: {
type: "category",
plotBands
},
...
};
Live demo: http://jsfiddle.net/BlackLabel/95gcsheo/
API Reference: https://api.highcharts.com/highcharts/xAxis.plotBands
·
Juan Pablo Isaza
Denunciar
Responde la pregunta