navigation buttonOptions are place nicely at the top-left of the chart, but rangeSelector inputPosition & buttons not

[888ba8]

Code: Select all

navigation: {
        buttonOptions: {
          align: 'left',
            verticalAlign: 'top',
            y: 0,
            x: 0,

neatly aligns the navigation buttonOptions at the top left, regardless of the xAxis series data names (which could vary in length).

However, this is not the case for the rangeSelector inputPosition and buttonPosition. Rather, they are placed at the left most side of the inner chart. How to fix this such that they follow the same behavior as the navigation buttonOptions please?

[Fusher]

Hi again @888ba8

Alignments for `navigation.buttonOptions` and `rangeSelector` are different. `navigation.buttonOptions` aligns to the spacing box, while alignment for the `rangeSelector` additionally includes required space on the left side of the chart (e.g. yAxis labels, yAxis title, etc.).

I created a plugin, that removes that addition, take a look: https://jsfiddle.net/BlackLabel/y0jae8kw/

Plugin code:

Code: Select all

(function(H) {
  H.wrap(
    H.RangeSelector.prototype,
    'render',
    function(proceed) {
      proceed.apply(this, Array.prototype.slice.call(arguments, 1));

      const rangeSelector = this,
        rsOptions = rangeSelector.options,
        xOffset = Highcharts.pick(rsOptions.buttonOptions && rsOptions.buttonOptions.x, 0),
        spacing = Highcharts.pick(rsOptions.buttonSpacing, 5);

      let left = 0;

      if (rangeSelector) {
        if (rangeSelector.zoomText) {
          rangeSelector.zoomText.attr({
            x: xOffset
          });
          left += xOffset + rangeSelector.zoomText.getBBox().width + 5;
        }

        if (rangeSelector.buttons) {
          rangeSelector.buttonOptions.forEach(function(opt, i) {
            rangeSelector.buttons[i].attr({
              x: left
            });
            left += xOffset + rangeSelector.buttons[i].width + spacing;
          });
        }

        if (rangeSelector.inputGroup) {
          rangeSelector.inputGroup.attr({
            translateY: rangeSelector.inputGroup.alignAttr.translateY
          })
        }
      }
    }
  );
})(Highcharts);

[888ba8]

Thanks a lot Fusher. This plugin is really useful. It adjusted the x position of the buttonPosition of the rangeSelector nicely, following the same fushion of the export buttons. However, how to do the same with the inputPosition of the rangeSelector?

[888ba8]

Please note that the x variables of the inputPosition of the navigator should be able to exist, even if one wishes to move the buttonPosition of the navigator elsewhere.

Example: in my particular case, I might actually use buttonPosition: {x: -9000} to disable the buttons being outputted 'completely', while I do wish the navigator inputPosition to lign up nicely with the utmost left-side of the chart + leftMargin.

[sebastian.h]

Hi,

I modify the last if in wrap function to move the rangeSelector.inputGroup.
All you need to do is to find in our API data to start translateX from the beginning.

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

Best regards.