Hide navigator's top outline outside of selection

[aris182]

Hello, I am facing the same problem as described in this question: https://stackoverflow.com/questions/714 ... -selection
I am using Angular 16 and struggling to implement the following wrap method:

Code: Select all

 import * as Highcharts from 'highcharts/highstock';
 
  fixNavigator(H: typeof Highcharts) {
    H.wrap(
      H.navigator.prototype,
      'drawOutline',
      (
        procced: boolean,
        zoomedMin: number,
        zoomedMax: number,
        inverted: boolean,
        verb: any
      ) => {
        var navigator = this,
          maskInside = navigator.navigatorOptions.maskInside,
          outlineWidth = navigator.outline.strokeWidth(),
          halfOutline = outlineWidth / 2,
          outlineCorrection = (outlineWidth % 2) / 2, // #5800
          outlineHeight = navigator.outlineHeight,
          scrollbarHeight = navigator.scrollbarHeight,
          navigatorSize = navigator.size,
          left = navigator.left - scrollbarHeight,
          navigatorTop = navigator.top,
          verticalMin,
          path;

        if (inverted) {
          left -= halfOutline;
          verticalMin = navigatorTop + zoomedMax + outlineCorrection;
          zoomedMax = navigatorTop + zoomedMin + outlineCorrection;

          path = [
            'M',
            left + outlineHeight,
            navigatorTop - scrollbarHeight - outlineCorrection, // top edge
            'L',
            left + outlineHeight,
            verticalMin, // top right of zoomed range
            'L',
            left,
            verticalMin, // top left of z.r.
            'L',
            left,
            zoomedMax, // bottom left of z.r.
            'L',
            left + outlineHeight,
            zoomedMax, // bottom right of z.r.
            'L',
            left + outlineHeight,
            navigatorTop + navigatorSize + scrollbarHeight, // bottom edge
          ].concat(
            maskInside
              ? [
                  'M',
                  left + outlineHeight,
                  verticalMin - halfOutline, // upper left of zoomed range
                  'L',
                  left + outlineHeight,
                  zoomedMax + halfOutline, // upper right of z.r.
                ]
              : []
          );
        } else {
          zoomedMin += left + scrollbarHeight - outlineCorrection;
          zoomedMax += left + scrollbarHeight - outlineCorrection;
          navigatorTop += halfOutline;

          path = [
            'M',
            zoomedMin,
            navigatorTop, // upper left of zoomed range
            'L',
            zoomedMin,
            navigatorTop + outlineHeight, // lower left of z.r.
            'L',
            zoomedMax,
            navigatorTop + outlineHeight, // lower right of z.r.
            'L',
            zoomedMax,
            navigatorTop, // upper right of z.r.
          ].concat(
            maskInside
              ? [
                  'M',
                  zoomedMin - halfOutline,
                  navigatorTop, // upper left of zoomed range
                  'L',
                  zoomedMax + halfOutline,
                  navigatorTop, // upper right of z.r.
                ]
              : []
          );
        }
        navigator.outline[verb]({
          d: path,
        });
      }
    );
  };

The problem seems to be that no 'Navigator' class is found on typeof Highcharts. [Error: Property 'navigator' does not exist on type 'typeof import(".../node_modules/highcharts/highcharts")'.ts(2339)].

Thanks in advance!
Paulina

[jedrzej.r]

Hi!

Thanks for reaching out to us with your question!

First of all, I've noticed that you've been trying to access H.navigator, when in fact it should be starting with capital letter H.Navigator, like in the stackOverflow example. After changing this line, it seems to work just fine.

Demo: https://stackblitz.com/edit/highcharts- ... mponent.ts

Let me know if that was what you were looking for.
Best regards!