Here is a jsFiddle for an issue i have been trying to solve:
When the donut chart loads, the slices are not visible, but the legends are. When you hover over, they appear.
Has anyone else encountered this?
code
$(function () {
var chart;
$(document).ready(function() {
var colors = Highcharts.getOptions().colors,
categories = ['Security', 'Interfaces', 'SNMP', 'Management', 'General'],
name = 'Rule Categories',
data = [{"y":23.53,"drilldown":{"name":"Security","categories":["Pass","Fail"],"data":[11.77,11.77]}},{"y":23.53,"drilldown":{"name":"Interfaces","categories":["Pass","Fail"],"data":[23.53,0]}},{"y":23.53,"drilldown":{"name":"SNMP","categories":["Pass","Fail"],"data":[11.77,11.77]}},{"y":5.88,"drilldown":{"name":"Management","categories":["Pass","Fail"],"data":[5.88,0]}},{"y":23.53,"drilldown":{"name":"General","categories":["Pass","Fail"],"data":[23.53,0]}}];
// Build the data arrays
var browserData = [];
var versionsData = [];
for (var i = 0; i < data.length; i++) {
// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
// add version data
for (var j = 0; j < data[i].drilldown.data.length; j++) {
var brightness = 0.2 - (j / data[i].drilldown.data.length) / 5 ;
versionsData.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
color: Highcharts.Color(data[i].color).brighten(brightness).get()
});
}
}
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
title: {
text: 'Browser market share, April, 2011'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: false
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: 'Browsers',
data: browserData,
size: '60%',
dataLabels: {
formatter: function() {
return this.y > 5 ? this.point.name : null;
},
color: 'white',
distance: -30
}
}, {
name: 'Versions',
data: versionsData,
innerSize: '60%',
dataLabels: {
formatter: function() {
// display only if larger than 1
return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%' : null;
}
}
}]
});
});
});