Highcharts :: Pie :: Добавить значок для определенной серии

Question

Я использую Highcharts 5.0.7 круговые диаграммы.

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

Используя таргетинг на имя серии ( Выделение ), я могу вставить в него динамический код, используя опцию форматирования Highcharts, как показано ниже, которая не работает: (

formatter: function () {
  if (this.point.name == 'Highlight') {
    return '<div class="ptit-icon PieTimerIconTop">Top</div><div class="ptit-icon PieTimerIconBottom">Bottom</div>';                                    
  }
},

Как вставить значок (до и после) для выделенного фрагмента?

Что я хочу:

Что я получаю:

JsFiddle

Код

$(function () {
  var colors = ['#0d8aff', '#bc2f20', '#31ccfd', '#fd8f40'];
  pieData = [           
    { name: "", color: '#eaeaec', y: 50 },
    { name: "", color: '#97cc00', y: 12.5 },
    { name: "Highlight", color: '#5ba528', y: 12.5, className: "markerHighlight" },
    { name: "", color: '#b2d844', y: 12.5 },
    { name: "", color: '#97cc00', y: 12.5 }
  ];
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'chartContainer',
      type: 'pie',
      height: 250,
      width: 250,
      borderRadius: 0
    },
    credits: { enabled: false },
    title: false,
    tooltip: false,
    plotOptions: {
      pie: {
        borderWidth: 0,
        startAngle: -45,
        innerSize: '95%',
        size: '100%',
        shadow: false,
        dataLabels: false,
      },
      series: {
        dataLabels: {
          useHTML: true,
          formatter: function () {
            if (this.point.name == 'Highlight') {
              return '<div class="ptit-icon PieTimerIconTop">Top</div><div class="ptit-icon PieTimerIconBottom">Bottom</div>';                                  
            }
          },
        }
      }
    },
    series: [{
      data: pieData,
    }]
  });
});

Answer 1

Прежде всего, вы отключили dataLabels - вы должны включить их. Затем вы должны правильно расположить и установить стиль background-size для элементов со стрелкой.

.ptit-icon {
    position: absolute;
    width: 12px;
    height: 10px;
    background-size: cover;
}

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