1

I am trying to show the percentage value on the solid gauge graph and its corresponding series names with respective colors in highcharts graphs. here is the example for the graph. In this graph, the series data label value is displayed under the exact colors. Think it's on grey color. Secondly, the legend showing is not displaying its series color. Instead, it takes grey color.

    legend: {
    enabled: true // disable the legend
  },
Athulya Ratheesh
  • 291
  • 4
  • 22

1 Answers1

1

Starting from the coloring the legend:

Due to legend is not an official part of solidgauge, you need to overwrite a prototype function to make it work as you requested. Code below:

Highcharts.Legend.prototype.colorizeItem = function(item, visible) {
  var _a = item.legendItem || {},
    group = _a.group,
    label = _a.label,
    line = _a.line,
    symbol = _a.symbol;
  if (group) {
    group[visible ? 'removeClass' : 'addClass']('highcharts-legend-item-hidden');
  }
  if (!this.chart.styledMode) {
    var legend = this,
      options = legend.options,
      hiddenColor = legend.itemHiddenStyle.color,
      textColor = visible ?
      options.itemStyle.color :
      hiddenColor,
      symbolColor = visible ?
      (item.color || hiddenColor) :
      hiddenColor,
      markerOptions = item.options && item.options.marker,
      symbolAttr = {
        fill: symbolColor
      };
    if (label) {
      label.css({
        fill: textColor,
        color: textColor // #1553, oldIE
      });
    }
    if (line) {
      line.attr({
        stroke: symbolColor
      });
    }
    if (symbol) {
      // Apply marker options
      if (markerOptions) { // #585
        symbolAttr = item.pointAttribs();
        if (!visible) {
          // #6769
          symbolAttr.stroke = symbolAttr.fill = hiddenColor;
        }
      }
      symbol.attr(symbolAttr);
    }
  }
  Highcharts.fireEvent(this, 'afterColorizeItem', {
    item: item,
    visible: visible
  });
}

It will be also necessary to set the markers colors at each series:

 marker: {
    fillColor: Highcharts.getOptions().colors[4]
  },

When it comes to the labels for the multiple series solid gauge, you will need to use a bit workaround here.

  tooltip: {
    borderWidth: 0,
    backgroundColor: 'none',
    shadow: false,
    style: {
      fontSize: '10px',
      textAlign: 'right'
    },
    pointFormat: '<span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
    positioner: function() {
      return {
        x: (this.chart.chartWidth - this.label.width) / 2,
        y: (this.chart.plotHeight / 2)
      };
    }
  },

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

Alternatively, you can render the labels, as in the following thread:

Is there a way to calculate custom label position on a Highcharts Activity Gauge?

magdalena
  • 2,657
  • 1
  • 7
  • 12
  • In the above example, It is mentioned as a tooltip. In my case, I need to show its value in the same circle itself, not in the center. So that all the series value will show at the same time over its corresponding series as a progress. – Athulya Ratheesh Apr 13 '23 at 09:15