Пользовательские стили на легендах Highcharts

РЕДАКТИРОВАТЬ:

Я сделал jsfiddle для переключения CSS ваших предметов легенды.

Вы можете установить класс в свою легенду, щелкнув вот так,

events: {
  legendItemClick: function(event) {
                     //console.log(event);
                     if(this.visible)
                       event.target.legendItem.element.firstChild.className = 'span-legend-item-inactive';
                     else
                       event.target.legendItem.element.firstChild.className = 'span-legend-active';
                   }
  }

Здесь this.visible является логической переменной, заданной Hightcharts, для обозначения видимости легенды или нет. Проверьте jsfiddle ссылки с сайта Highcharts.

Если он отображается во время onclick, вы можете назначить свой .span-legend-item-inactive класс, чтобы он был отключен. Аналогично, если он не отображается во время onclick, вы можете назначить .span-legend-active чтобы он выглядел включенным. Вы можете предоставить имена разделенных пространствами, если вы хотите назначить несколько классов или использовать event.target.legendItem.element.firstChild.classList

Кроме того, Highcharts передает event объекта к этим функциям событий. Вы можете отключить его и проверить методы или переменные, которые вы можете использовать для своей цели.

Кроме того, this.color даст текущий цвет строки строки. Таким образом, вы можете использовать это, чтобы установить цвет легенды или цвет границы в labelFormatter с чем-то вроде этого,

return '<span class="span-legend-active" style="border-color:${this.color}">${this.name}</span>'

Ссылка на jsfiddle.

Старый ответ:

Функция labelFormatter() не предоставляет никаких аргументов для функции, поэтому clickCounter undefined.

Поэтому не давайте clickCounter вашей функции labelFormatter, она будет взята из глобальной области.

   legend: {
        useHTML: true,
        labelFormatter: function () {}
    }