1

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

Nayana Chandran
  • 1,416
  • 1
  • 16
  • 30
Krishna_Dhaker
  • 11
  • 1

1 Answers1

0

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/

Sebastian Hajdus
  • 1,422
  • 1
  • 5
  • 14
  • Thanks for answer. I wanted to show background in header ( xAxis) but that can be achieved by this way. Would you pls guide to give styles to x and y axis values ( categories ) ? For example - on x Axis i have numbers from 1to 20 and i want to highlight 2 or 10 only. – Krishna_Dhaker Nov 12 '21 at 15:40
  • I need to see your demo, it's not clear to me what do you want to achieve. – Sebastian Hajdus Nov 12 '21 at 16:05
  • Please refer this demo link https://jsfiddle.net/krishnaDhaker/gcwzan12/1/ . Here i have few numbers on the x axis ( 3 to 25)and i want to highlight couple of them only ( example - 9 and 15 number only.) Here highlight means change the forecolor of 9/15 and change the background of them. It would be great if i can show only limited numbers upfront (3 to 15) and then if user wish to see more numbers, he can scroll to left or right. Thank you.. – Krishna_Dhaker Nov 15 '21 at 08:16
  • You have to do it as I wrote before, using SVG Renderer for xaxis. https://jsfiddle.net/BlackLabel/ovn9mjuk/ For showing only part of xaxis, you have a possibility to add scroll, you can read more about it in another thread. https://stackoverflow.com/a/60075282/12171673 – Sebastian Hajdus Nov 15 '21 at 09:35