Geek Answers Handbook

Pie symbol symbol -or- custom legend symbols

I have a pie chart with white slice/segment and grey border . Unfortunately, the border does not apply to the legend icon! I wonder if the legend symbol needs to be individually styled. I did not find any property in the API description.

There are two ideas on how to make this work. Which one will work?

  • create your own SVG image for the element (great for flexibility)
  • enable legend symbol outline

Here is an example: http://jsfiddle.net/c2XVz/

 var chart; $(document).ready(function() { chart = new Highcharts.Chart({ colors: [ 'blue' , 'red' , 'silver' , 'orange' , 'green' , 'grey' , 'gold' , 'rgba(80, 183, 123, 1)' , 'rgba(128, 0, 102, 1)' , 'rgba(150, 124, 100, 1)' , 'rgba(193, 10, 0, 1)' , 'rgba(91, 214, 235, 1)' , 'rgba(90, 111, 137, 1)' , 'rgba(212, 173, 156, 1)' , 'rgba(145, 145, 145, 1)' , 'rgba(146, 184, 214, 1)' ], chart: { renderTo: 'container', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: { text: 'Lorem ipsum 2013' }, legend: { align: 'right', verticalAlign: 'top', x: -60, y: 72, layout: 'vertical' }, tooltip: { formatter: function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; } }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: false }, showInLegend: true, slicedOffset: 20 } }, series: [{ type: 'pie', name: 'Expenses', data: [ ['Legend item', 20.0], ['Legend item', 20.0], ['Legend item', 20.0], ['Legend item', 20.0], ['Legend item', 20.0], ['Legend item', 20.0], ['Legend item', 20.0], ['Legend item', 20.0], ['Legend item', 20.0], ['Legend item', 20.0], ['Legend item', 20.0], ['Legend item', 20.0], { name: 'Not categorized', y: 10.0, color: '#ffffff', borderColor: '#646464', borderWidth: 0.5, sliced: true, selected: true } ] }] }); });

Thanks for any hint ...

+4
source share
2 answers

I do not see any API parameters for this level of customization when drawing a legend symbol. This is pretty easy to crack after displaying the graph:

 $(chart.series[0].data).each(function(i,slice){ $(slice.legendSymbol.element).attr('stroke-width','1'); $(slice.legendSymbol.element).attr('stroke','gray'); });

enter image description here

See the script here .

+6
source

Marking the answer does not work for types line/bar/column . Below is the code:

 $(chart.series).each(function(i,slice){ $(slice.legendSymbol.element).attr('stroke-width','1'); $(slice.legendSymbol.element).attr('stroke','black'); });

Feed here

+2
source

More articles:


All Articles