How to add custom CSS to gantt chart highcharts?

Question

How can i add border around the date range buttons in the Gantt chart? Something like below screen shot

It possible to add my custom css to the chart as shown in the screenshot?

Answer 1

You can add that kind of border using Highcharts.SVGRenderer:

Example:

  chart: {
    events: {
      render() {
        const chart = this;

        if (chart.rect) {
          chart.rect = chart.rect.destroy();
        }
        
        chart.rect = chart.renderer.rect(x, y, width, height)
          .attr({
            stroke: color,
          }).add();
      }
    }
  },

Demo: https://jsfiddle.net/BlackLabel/7qse2zf0/

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect