1

I would like highlight the weekend in a timeseries chart. Until now and reading the documentation I think it is two ways of achieving this: plot bands or zones. I just managed to highlight the saturdays and sunday on the x axis(see code below). I would like to plot a band instead.(see 1).

xAxis: {
   type: 'datetime',
      crosshair: {
         width: 2,
         color: '#F66',
         dashStyle: 'shortdot'
      },
      labels: {
         formatter: function () {
            var day = Highcharts.dateFormat('%a', this.value);
            if (day == "Sat" || day == "Sun") {
               return `<b>${Highcharts.dateFormat('%a %e %b', this.value)}</b>`;
            } else {
               return Highcharts.dateFormat('%a %e %b', this.value);
            }  
         }
      }
   }
}

1 Answer 1

2

Here is my idea how to add plotBands dynamically based on the used data. I think that everything is clear in the code - if not, feel free to ask.

Demo: https://jsfiddle.net/BlackLabel/6n4ab7jm/

events: {
  load() {
    let chart = this,
      plotBandAr = [],
      plotBand = {
        color: '#FCFFC5',
      };


    chart.series[0].points.forEach(p => {
      // start from the saturday
      if (new Date(p.x).getDay() === 6) {
        plotBand.from = p.x
      }
      // end on the sunday
      if (new Date(p.x).getDay() === 0) {
        plotBand.to = p.x
      }
      // add plotBand on monday and reset the plotBand object
      if (new Date(p.x).getDay() === 1) {
        plotBandAr.push(plotBand)
        plotBand = {
          color: '#FCFFC5',
        };
      }
    });

    chart.xAxis[0].update({
      plotBands: plotBandAr
    })
  }
}

API: https://api.highcharts.com/highcharts/chart.events.load

API: https://api.highcharts.com/class-reference/Highcharts.Axis#update

1
  • Thanks a lot, everything is clear and works really well! Kudos for the quick response! Aug 28, 2020 at 10:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.