888ba8
Posts: 44
Joined: Mon Dec 21, 2020 11:18 am

Minimal navigator ... once you click on a dropdown parent-child label, the style includes the labels again?

Please note the following minimal style top-placed navigator bar. It is intended not to mirror-show any of the coloured labels present in the actual chart.

https://jsfiddle.net/xoq31hg4/

However, as soon as you click any of the dropdown items. For example 'New offices', then the labels are suddenly present again in the navigator bar. How to avoid this please?

Also, to be more minimal: do you see a way for the navigator bar to be placed on top of the scrollbar, overlayed? This way all the functionality is inside one bar visually. Panning, arrows, and zooming.
888ba8
Posts: 44
Joined: Mon Dec 21, 2020 11:18 am

Re: Minimal navigator ... once you click on a dropdown parent-child label, the style includes the labels again?

I found one workaround, to prevent the labels from showing after clicking the dropdown labels, which is to use the following series:

Code: Select all

    series: {
      type: 'gantt',
      pointPlacement: -9000,
      pointPadding: -9000,
    },
But I wonder if there is a more elegant solution?
888ba8
Posts: 44
Joined: Mon Dec 21, 2020 11:18 am

Re: Minimal navigator ... once you click on a dropdown parent-child label, the style includes the labels again?

Correction. My best solution is the following:

Code: Select all

  series: {
  },
  yAxis: {
      min: -100,
      max: -100,
    },
However, how to make the navigator bar even more minimal, such that it is overlayed on to the scrolling bar?
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Minimal navigator ... once you click on a dropdown parent-child label, the style includes the labels again?

Hi,

You can try to change an option in the navigator, e.g. navigator.handles to adapt look that you want.

Code: Select all

 handles: {
  width: 2,
  height: 2,
  lineWidth: 2,
 },

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

API References:
https://api.highcharts.com/gantt/navigator.handles

Feel free to contact us if further help needed.
Regards.
Sebastian Hajdus
Highcharts Developer
888ba8
Posts: 44
Joined: Mon Dec 21, 2020 11:18 am

Re: Minimal navigator ... once you click on a dropdown parent-child label, the style includes the labels again?

Hi,

That's quite interesting! Just a bit difficult to pin down with your mouse, because the handles are so small now.

When I increase to

Code: Select all

handles: {
 width: 15,
 height: 15,
 lineWidth: 2,
},
it seems we need an additional y translation for the handles, and additional x translation for each of the handles to get it 'right'. But I don't know if this is easy to do on the handles?
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Minimal navigator ... once you click on a dropdown parent-child label, the style includes the labels again?

Hi,

There isn't an option to translate from navigator options.
Probably it's possible but you need to write custom code and wrap them to Highcharts core.

Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Gantt”