CODEWITHSUNDEEP
highcharts
Reddy
Reddy

Reputation: 1497

Highcharts { pie } - style for only for sliced out slice

I am using Highcharts - pie

How can I create a style for sliced out slice... for ex: 3d border or something ?

What I want

enter image description here

Normal Slice

enter image description here

jsFiddle

PS: As I am new to these highcharts, your help would be much appreciated.

Code

$(function() {    
  $(document).ready(function() {    
    // Build the chart
    $('#container').highcharts({
      chart: {
        type: 'pie',
      },
      title: {
        text: 'Test'
      },
      tooltip: {
        pointFormat: ''
      },
      plotOptions: {
        pie: {
          cursor: 'pointer',
          slicedOffset:30,
        }
      },
      series: [{
        borderWidth: 0,
        name: 'Brands',
        data: [{
          name: 'IE',
          y: 56.33
        }, {
          name: 'Chrome',
          y: 24.03,          
          sliced:true
        }, {
          name: 'Firefox',
          y: 10.38
        }]
      }]
    });
  });
});

Upvotes: 0

Views: 369

Answers (1)

morganfree
morganfree

Reputation: 12472

You can use selected property and then set css for highcharts-point-select class.

point config

{ 
  name: 'Chrome',
  y: 24.03,          
  sliced:true,
  selected: true
}

css

.highcharts-point-select {
  stroke: red;
  stroke-width: 3
}

example: http://jsfiddle.net/xe8zqv3n/

Upvotes: 1

Related Questions