Нужно изменить цвет заголовка пончика

Question

Это моя функция, которая отображает большую диаграмму в моем HTML.Я могу поместить динамический цвет в маркер / значок легенды.Но теперь мне нужно добавить динамический цвет в заголовок легенды.Я мог бы понять это.

Как я могу это сделать?Пожалуйста, помогите !!!

    const chart = new Highcharts.Chart(
      {
        chart: {
          color: '#000',
          backgroundColor: '#336196',
          renderTo: 'container',
          type: 'pie'
        },
        title: {
          text: "What's using data",
          style: {
            color: '#000'
          }
        },
        yAxis: {
          title: {
            text: 'Total percent market share'
          }
        },
        plotOptions: {
          pie: {
            shadow: false,
            borderColor: null
          }
        },
        tooltip: {
          formatter: function() {
            return '<b>' + this.point.name + '</b>: ' + this.y + ' %'
          }
        },
        legend: {
          align: 'right',
          layout: 'vertical',
          verticalAlign: 'middle',
          symbolRadius: 0,
          symbolPadding: 10,
          itemMarginTop: 15,
          itemStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: 'Browsers',
            data: data,
            size: '120%',
            innerSize: '60%',
            showInLegend: true,
            dataLabels: {
              enabled: false
            },
            marker: {
              symbol: 'square',
              radius: 12
            }
          }
        ]
      },
      function(chart) {
        var textX = chart.plotLeft + chart.plotWidth * 0.5
        var textY = chart.plotTop + chart.plotHeight * 0.52

        var span =
          '<div id="pieChartInfoText" style="position:absolute; text-align:center;">'
        span +=
          '<div style="color:#fff;font-size: 20px;width:50pxmargin-top:36px;margin-left:18px;"></div><br>'
        span += '</div>'

        $('#addText').append(span)
        span = $('#pieChartInfoText')
        span.css('left', textX + span.width() * -0.5)
        span.css('top', textY + span.height() * -0.5)
      }
    )

Любая помощь будет принята с благодарностью.Спасибо !!!

Answer 1

Чтобы изменить заголовок цвета легенды, просто установите:

    legend: {
        title: {
            text: 'legend title',
            style: {
                color: 'red'
            }
        }
    }

Но, если вы хотите изменить текст отдельного элемента легенды, вам необходимо использовать:

function(chart) {
    var legendItems = $(".highcharts-legend-item");
    $(legendItems[0].children[0]).css('fill', 'red');
}

Демонстрация в реальном времени: http://jsfiddle.net/BlackLabel/avhtLm3w/