Высокие диаграммы выделяют столбец динамически

Question

У меня есть карта стран. Я не знаю, в каком положении окажется моя целевая страна на графике - это зависит от данных. Как динамически выделить его, например, изменить цвет столбца и цвет имени? Например, если моей целевой страной является Португалия, как отобразить это другим цветом, чем другие.

https://jsfiddle.net/2vsd7knr/1/

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Monthly Average Rainfall'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: [
            'Sweden',
            'South_Korea',
            'Israel',
            'Russia',
            'Canada',
            'Portugal',
            'Turkey',
            'Iran',
            'France',
            'China',
            'Belgium',
            'Brazil'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Rainfall (mm)'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Tokyo',
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

    }]
});

Answer 1

Ниже приведено руководство, как найти текущие точки и изменить их цвет.

Демо: https://jsfiddle.net/BlackLabel/bd8xL6m2/

  chart: {
    type: 'column',
    events: {
      render() {
        let chart = this,
          x;

        chart.series[0].points.forEach(p => {
          if (p.category === targetCountry) {
            x = p.x;
            p.graphic.element.style.fill = 'red'
          }
        })

        chart.xAxis[0].ticks[x].label.element.style.fill = 'red'
      }
    }
  },

API: https://api.highcharts.com/highcharts/chart.events.render