---

public activateCursor = (cursorType: CursorType): void => {
  this.removePendingDrawings(false);
  this.activeCursor$.next(cursorType);
  this.activateCurrentCursor();
  this.DOM.refreshEntities();
};

public getActiveCursor(): Observable<CursorType> {
  return this.activeCursor$.asObservable();
}

private activateCurrentCursor(): void {
  const cursorType = this.activeCursor$.value;

  this.applyCursor(cursorType);
  this.activeTool$.next(cursorType);
}

private applyCursor(cursorType: CursorType): void {
  const config = cursorConfigByType[cursorType];

  this.lwcChart.applyOptions({
    crosshair: {
      mode: config.crosshairMode,
    },
  });

  this.lwcChart.chartElement().style.cursor = config.cursor;
}



export const cursorTools = (): MenuOption<CursorType>[] => [
  {
    value: CursorType.crosshair,
    icon: <CrossIcon />,
    label: t('Crosshair'),
  },
  {
    value: CursorType.arrow,
    icon: <ArrowCursorIcon />,
    label: t('Arrow'),
  },
];


{implemented.cursor && (
  <SplitDropdown
    anchorRef={toolbarRef}
    mainContent={ensureDefined(selectedCursorOption?.icon)}
    mainTooltip={ensureDefined(selectedCursorOption).label}
    onMainClick={() => activateCursor(activeCursor)}
    menuTooltip={t('Cursor')}
    mainButtonClassName={getButtonClassName(activeCursor)}
    tooltipClassName={getTooltipClassName()}
  >
    <MenuList
      mode="single"
      value={activeCursor}
      options={cursorTools()}
      onClick={activateCursor}
    />
  </SplitDropdown>
)}