CODEWITHSUNDEEP
jqueryhighcharts
Reddy
Reddy

Reputation: 1497

Highcharts :: Pie :: Add icon for specific series

I am using Highcharts 5.0.7 pie charts.

Need to highlight one of data item by inserting icons before and after that.

By targeting series name (Highlight) I am able insert some dynamic code to it by using Highcharts formater option like below which is not working :(

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

How can I insert icon (before & after) for highlight slice?

What I want:

enter image description here

What I am getting:

enter image description here

JsFiddle

Code

$(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,
    }]
  });
});

Upvotes: 0

Views: 578

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

First of all, you have disabled dataLabels - you have to enable them. Then, you should correctly position and set background-size style for elements with arrow.

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

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

Upvotes: 1

Related Questions