Solidgauge labels and legends not reflectings series color

Question

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
  },

Answer 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?