Highchart Gantt remove Y Axis label

Question

I am looking to hide Y Axis label for Highchart Gantt.

In my fiddle that I attempted you will note that I am looking to completely remove Y Axis lable but my attempt creates empty column.

  yAxis: [{
        labels: {
        enabled: false
    },
  }]

Wasn't able to location anything in Highcharts Documentation as well

score 1 · Accepted Answer · answered Oct 27 '20 at 07:50

1

Use the visible property:

    yAxis: [{
        visible: false
    }]

Live demo: http://jsfiddle.net/BlackLabel/L1gt67zp/

API Reference: https://api.highcharts.com/gantt/yAxis.visible

answered Oct 27 '20 at 07:50

ppotaczek

36,341
2
14
24

Unfortunately that removes the grid lines in Y axis altogether , I would like to keep the gridlines as well at least for the area that shows graph. I am looking to retain gridlines https://monosnap.com/file/KC22RrkJOVnhq8fS0uLXEZmhPjy6YZ – June Oct 27 '20 at 08:19
1

Hi @June, Ok, please check this example: http://jsfiddle.net/BlackLabel/yt2zhgd6/ – ppotaczek Oct 27 '20 at 08:58
Thank you. If it's not too much to ask I would also like to know how can I move xAxis label to bottom and have the labels center aligned . In my original question you will see my question in the screenshot as well https://monosnap.com/file/EguHemC1nXzRA35y960VsEKqNzshk6 – June Oct 27 '20 at 09:20
1

You need to use the `opposite` option, but also do something with a chart height because x-axis at the bottom is hidden by default. Example: http://jsfiddle.net/BlackLabel/afd7qbun/ – ppotaczek Oct 27 '20 at 09:46
Thank you, Here is what I am trying to achieve https://monosnap.com/file/DVBWjvmVmOCSMnpf3HgNWR8uShTlmh , Not sure how much of this is possible :D i.e. rounded corners for each axis and background color(i.e. white). I am figuring out how to add margin between two X axis rows , so each axis is apart from each other , I tried margin property but that didn't worked out – June Oct 27 '20 at 12:57
1

Please check this example: https://jsfiddle.net/BlackLabel/xczvjr23/ You can add another series to imitate the background. – ppotaczek Oct 28 '20 at 13:59
Would you know how to get values of any hovered bar , this.series.data have data for all the points where as I am only looking to retrieve start and end of the hovered graph only ``` tooltip: { formatter: function() { console.log(this.series.data); } }, ``` So let say there are 8 rows , User hovered on row-1 column - 2 (out of have 3 bar graphs / lines) row-1 have and I am only looking to get data of column 2 only https://jsfiddle.net/yp6qx0hb/ – June Nov 10 '20 at 11:59
1

Hi @June, Could you explain the problem more precisely? To get only the hovered point use: `this.point` – ppotaczek Nov 10 '20 at 12:25
Can we use addSeries and have background in Line Chart as well http://jsfiddle.net/1epdowh3/29/ ? The example you shared is of Gantt Chart – June Nov 17 '20 at 12:27
What is the exact result you want to get? – ppotaczek Nov 17 '20 at 12:47
Background to the line chart http://jsfiddle.net/1epdowh3/29/ like https://monosnap.com/file/DVBWjvmVmOCSMnpf3HgNWR8uShTlmh – June Nov 17 '20 at 13:01
Requirement is almost the same for what you suggested earlier for the gantt chart – June Nov 18 '20 at 08:46
1

Hi, yes you just need to use x-range series, example: http://jsfiddle.net/BlackLabel/rL4v0ho3/ – ppotaczek Nov 18 '20 at 09:43
Thanks, Is it possible to add padding above and below x-range series? https://monosnap.com/file/M1w5ubuuWQznzA2C1vpTfzfO2NGF0r – June Nov 18 '20 at 12:14
Sure, use `groupPadding`, example: http://jsfiddle.net/BlackLabel/6k8jgv9f/ – ppotaczek Nov 18 '20 at 14:09

Highchart Gantt remove Y Axis label

1 Answers1