How to provide styles on X axis gantt high chart

user_2906664 0
Viewed 98

I want some customization in the Gantt chart as follows:

  1. display some text/html on the top left section (interaction of x and y-axis)
  2. show x Axis (header) with black color in the background and some other customization in styles but got nothing in documentation.

Please refer attached image. https://i.stack.imgur.com/Ir1gN.png

highcharts-gantt highcharts
1 Answers

You can render text via SVG renderer, set position from the plot area. What interaction section do you mean, could you show screenshot?

https://api.highcharts.com/class-reference/Highcharts.SVGRenderer

Gantt chart is draw by line, and draw automatically, you can't find background options for axis in our documentation. Possibility to make this is draw rectangle by SVG renderer and set them under draw line.

  chart: {
    events: {
      render: function() {
        var chart = this,
          series = chart.series,
          plotLeft = chart.plotLeft,
          plotTop = chart.plotTop,
          plotWidth = chart.plotWidth;

        if (chart.myBackground) {
          chart.myBackground.destroy();
        }

        chart.myBackground = chart.renderer.rect(plotLeft, plotTop, plotWidth, 50, 0)
          .attr({
            'stroke-width': 2,
            stroke: 'red',
            fill: 'yellow',
            opacity: 0.5,
            zIndex: -1
          })
          .add();
      }
    }
  },

Live demo: https://jsfiddle.net/BlackLabel/xmg31aez/

user_121716730
Related