How do i color the highcharts legend square symbol when my chart has multiple color entries

Question

I am creating an application where i need bar highcharts and i have used multiple colors for the bars in the chart . But for the legend i want to speicify one specific color and on click of the legend it show change to gray color which is the default behaviour of high chart

i had added multiple colors in the series so i cant add same color over there

this.chartConfigWeekly = {
      chart: {
        zoomType: 'none'
      },
      title: {
        text: 'Weekly Utilization'
      },
      credits: {
        enabled: false
      },
      colors: this.colorArrWeekly,
      legend: {
        symbolRadius:0
      },
      xAxis: [
        {
          categories: this.weeklyUtilizationCategories,
          crosshair: true,
          gridLineWidth: 1,
          tickmarkPlacement: 'on',
          // tickInterval: 4
          tickPositions: this.tickPosition,
        }
      ],
      yAxis: [
        {
          // Primary yAxis
          labels: {
            format: '{value} %',
            style: {
              color: 'gray'
            }
          },
          max: 100,
          min: 0,
          alignTicks: false,
          tickAmount: 6,
          tickInterval: 20,
          title: {
            text: 'Utilization',
            style: {
              color: 'black'
            }
          },
          opposite: true
        },
        {
          // Secondary yAxis
          // gridLineWidth: 0,
          allowDecimals: false,
          title: {
            text: 'Number of Samples',
            style: {
              color: 'black'
            }
          },
          tickAmount: 6,
          labels: {
            format: '{value} ',
            style: {
              color: 'gray'
            }
          }
        }
      ],
      tooltip: {
        shared: true,
        useHTML: true,
        headerFormat: '<small>{point.point.display}</small><table><br>',
        crosshairs: true,
        positioner: function(labelWidth, labelHeight, point) {
          var x;
          if (point.plotX - labelWidth / 2 > 0) {
            x = point.plotX - labelWidth / 2;
          } else {
            x = 0
          }
          return {
            x: x,
            y: point.plotY
          }
        },
        shape: 'square'

      },
      series: [
        {
          name: 'total number of samples injected',
          type: 'column',
          yAxis: 1,
          data: this.weeklyUtilizationData,
          tooltip: {
            valueSuffix: ''
          },
          colorByPoint: true
        },
        {
          name: '% of usage per total hours 24/7',
          type: 'spline',
          data: this.weeklyUtilizationUsage,
          tooltip: {
            valueSuffix: ''
          },
          color: 'blue'
        }
      ]
    };

Answer 1

You can wrap the colorizeItem method and provide custom legendColor property:

(function(H) {
    H.wrap(H.Legend.prototype, 'colorizeItem', function(proceed, item, visible) {
        var color = item.color;

        item.color = item.options.legendColor;
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
        item.color = color;
    });
}(Highcharts));

Series options:

series: [{
        ...,
        legendColor: 'red',
        colorByPoint: true
    }, ...
]

Live demo: http://jsfiddle.net/BlackLabel/7qfcextj/

Docs: https://www.highcharts.com/docs/extending-highcharts