CODEWITHSUNDEEP
javascriptangulartypescripthighcharts
knightsky
knightsky

Reputation: 67

How 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.
graph 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:

enter image description here

Upvotes: 0

Views: 366

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

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

Upvotes: 1

Related Questions