Note that there are some explanatory texts on larger screens.

plurals
  1. POHighcharts - where to place style and changing style for one wedge in a pie chart
    primarykey
    data
    text
    <p>I have a Highcharts pie chart here: <a href="http://jsfiddle.net/6PbbR/52/" rel="nofollow">http://jsfiddle.net/6PbbR/52/</a></p> <pre><code>$(function () { var chart; $(document).ready(function() { // Radialize the colors Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) { return { radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 }, stops: [ [0, color] ] }; }); // Build the chart chart = new Highcharts.Chart({ chart: { renderTo: 'container', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, shadow: true, }, tooltip: { enabled: false }, title: { text: "" }, plotOptions: { pie: { allowPointSelect: true, size:'68%', cursor: 'pointer', shadow: true, dataLabels: { enabled: true, distance: -40, style: { width: '100px' }, color: '#fff', connectorColor: '#000000', formatter: function() { return '&lt;b style="font-family:arial;font-size:10px;font-weight:bold"&gt;'+ this.point.name +'&lt;/b&gt; '; } } } }, series: [{ type: 'pie', name: 'Income Investments', data: [ ['FLOATING RATE FUNDS', 16.667], { name: 'Corporate Capital Trust', y: 16.667, sliced: true, selected: true }, ['BONDS', 16.667], ['ANNUITIES', 16.667], ['REITs', 16.667], ['CDs', 16.667] ] }], colors: [ '#83a3c6', '#98012e', '#19699b', '#ae9e8e', '#5283b0', '#958370' ], }); }); }); </code></pre> <p>Two questions:</p> <p>1) I'm not happy with how I inserted inline style in plotOptions{pie{formatter. Where is a better place to do this using the API, instead of brute-forcing inline style?</p> <p>2) I would like to change the font-family for the red wedge (and possibly tweak fix its positioning/margins). What's the best way of doing this?</p> <p>Edit: Ideally, I can accomplish my needs without needing to go outside the above function. Is it possible to attach style to just one data point using the API?</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload