How to edit "highcharts-label-icon" in highcharts-gantt

Question

Highchart gantt : https://www.highcharts.com/docs/gantt/getting-started-gantt

I want to change this dropdown btn icon to right of text label. How to edit it?

Jsfiddle : https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/gantt/demo/project-management

Answer 1

This is not possible from the API but you can achieve that by wrapping the renderLabel function.

(function(H) {
  const {
    addEvent,
    isNumber,
    isObject,
    pick
  } = H,
  onTickHoverExit = function(label, options) {
      var css = isObject(options.style) ? options.style : {};
      label.removeClass('highcharts-treegrid-node-active');
      if (!label.renderer.styledMode) {
        label.css({
          textDecoration: css.textDecoration
        });
      }
    },
    onTickHover = function(label) {
      label.addClass('highcharts-treegrid-node-active');
      if (!label.renderer.styledMode) {
        label.css({
          textDecoration: 'underline'
        });
      }
    },
    renderLabelIcon = function(tick, params) {
      var treeGrid = tick.treeGrid,
        isNew = !treeGrid.labelIcon,
        renderer = params.renderer,
        labelBox = params.xy,
        options = params.options,
        width = options.width || 0,
        height = options.height || 0,
        iconCenter = {
          x: labelBox.x + tick.label.getBBox().width + width,
          y: labelBox.y - (height / 2)
        },
        rotation = params.collapsed ? 90 : 180,
        shouldRender = params.show && isNumber(iconCenter.y);
      var icon = treeGrid.labelIcon;
      if (!icon) {
        treeGrid.labelIcon = icon = renderer
          .path(renderer.symbols['circle'](options.x || 0, options.y || 0, width, height))
          .addClass('highcharts-label-icon')
          .add(params.group);
      }
      // Set the new position, and show or hide
      icon[shouldRender ? 'show' : 'hide'](); // #14904, #1338
      // Presentational attributes
      if (!renderer.styledMode) {
        icon
          .attr({
            cursor: 'pointer',
            'fill': pick(params.color, "#666666" /* Palette.neutralColor60 */ ),
            'stroke-width': 1,
            stroke: options.lineColor,
            strokeWidth: options.lineWidth || 0
          });
      }
      // Update the icon positions
      icon[isNew ? 'attr' : 'animate']({
        translateX: iconCenter.x,
        translateY: iconCenter.y,
        rotation: rotation
      });
    };

  H.wrap(H.Tick.prototype, 'renderLabel', function(proceed) {
    var tick = this,
      pos = tick.pos,
      axis = tick.axis,
      label = tick.label,
      mapOfPosToGridNode = axis.treeGrid.mapOfPosToGridNode,
      options = axis.options,
      labelOptions = pick(tick.options && tick.options.labels, options && options.labels),
      symbolOptions = (labelOptions && isObject(labelOptions.symbol, true) ?
        labelOptions.symbol : {}),
      node = mapOfPosToGridNode && mapOfPosToGridNode[pos],
      level = node && node.depth,
      isTreeGrid = options.type === 'treegrid',
      shouldRender = axis.tickPositions.indexOf(pos) > -1,
      prefixClassName = 'highcharts-treegrid-node-',
      styledMode = axis.chart.styledMode;
    var collapsed,
      addClassName,
      removeClassName;
    if (isTreeGrid && node) {
      // Add class name for hierarchical styling.
      if (label &&
        label.element) {
        label.addClass(prefixClassName + 'level-' + level);
      }
    }
    proceed.apply(tick, Array.prototype.slice.call(arguments, 1));
    if (isTreeGrid &&
      label &&
      label.element &&
      node &&
      node.descendants &&
      node.descendants > 0) {
      collapsed = axis.treeGrid.isCollapsed(node);
      renderLabelIcon(tick, {
        color: (!styledMode &&
          label.styles &&
          label.styles.color ||
          ''),
        collapsed: collapsed,
        group: label.parentGroup,
        options: symbolOptions,
        renderer: label.renderer,
        show: shouldRender,
        xy: label.xy
      });
      // Add class name for the node.
      addClassName = prefixClassName +
        (collapsed ? 'collapsed' : 'expanded');
      removeClassName = prefixClassName +
        (collapsed ? 'expanded' : 'collapsed');
      label
        .addClass(addClassName)
        .removeClass(removeClassName);
      if (!styledMode) {
        label.css({
          cursor: 'pointer'
        });
      }
      // Add events to both label text and icon
      [label, tick.treeGrid.labelIcon].forEach(function(object) {
        if (object && !object.attachedTreeGridEvents) {
          // On hover
          addEvent(object.element, 'mouseover', function() {
            onTickHover(label);
          });
          // On hover out
          addEvent(object.element, 'mouseout', function() {
            onTickHoverExit(label, labelOptions);
          });
          addEvent(object.element, 'click', function() {
            tick.treeGrid.toggleCollapse();
          });
          object.attachedTreeGridEvents = true;
        }
      });
    }
  });

}(Highcharts))

Demo: https://jsfiddle.net/BlackLabel/k2rb6zgy/

Extending Highcharts: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts