How to change bar chart colors when is weekend?

Question

I want to change de color of the bar columns on my chart when the xaxis value is a weekend day.

Here is a sample of my data:

[
  [
    1564034400000,
    291681
  ],
  [
    1564120800000,
    1533580
  ],
  [
    1564207200000,
    985398
  ],
  [
    1564293600000,
    451679
  ],
  [
    1564380000000,
    1051938459
  ],
  [
    1564466400000,
    1486601
  ],
  [
    1564552800000,
    1712150
  ],
  [
    1564639200000,
    1719820
  ],
  [
    1564725600000,
    2142532
  ],
  [
    1564812000000,
    1332015
  ]
]

i've tried this ():

data.forEach(x => {              
            ndata.push([x.date, x.eApar]);    
            if(x.date.getDay()==0 || x.date.getDay()==6){
              bcolor="orange"
            }
            else
            {
              bcolor="";
            }
        });

and then on the chart building i have this:

plotOptions: {
              series: {
                color: bcolor
              },
series: [{
          data: ndata,
          type: 'column',
        }],

But it change the color of all the columns.

I hope you can help me, thanks!

maybe those answers can be useful: https://stackoverflow.com/q/7737409/8732818 — Calvin Nunes, Sep 05 '19 at 21:15
Calvin Nunes: No. :/ 'Cause that answers are for when i'm building the chart using series.data.push, and i'm not using that. I just give the data like an array that i receive from a Json. And the others answers are sequence or give the data manueally. Hope you understand me. — David Ramírez, Sep 05 '19 at 21:36

David Jorquera · Accepted Answer · 2019-09-05T22:10:27.640

You could try setting your data on two different series (with missing values on the days according to weekdays or weekend days), then defining color for each serie like here:

series: [
{
    name: 'weekend',
    color: '#ffffff',
    data: [null, null, null, null, null, value, value]
}
];
 series: [
{
    name: 'weekdays',
    color: '#f20303',
    data: [value, value, value, value, value, null, null]
}
];

EDIT: There is a better yet solution in the answer to this very problem given by @eolsson here: How do you change the colour of each category within a highcharts column chart?. Give the different points a color attribute like this:

  data: [
  {y: 34.4, color: 'red'},     // this point is red
  21.8,                        // default blue
  {y: 20.1, color: '#aaff99'}, // this will be greenish
  20]

How to change bar chart colors when is weekend?

1 Answers1