Friday, May 17, 2024
 Popular · Latest · Hot · Upcoming
68
rated 0 times [  69] [ 1]  / answers: 1 / hits: 72648  / 12 Years ago, tue, july 31, 2012, 12:00:00

How can I make a pie chart fill 100% of the divit is contained in? The div has a width of 198px and it's height is 152px.



Additionally I would like to have a linear-gradient effect inside each pie slice, can you advise on how to do that?



enter


More From » highcharts

 Answers
274

You can achieve the full height of the pie chart by setting the size attribute in the plotOptions of pie and removing margins, spacing and titles from the chart.



Code



    chart: {           
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
plotOptions: {
pie: {
size:'100%',
dataLabels: {
enabled: false
}
}
}


Example (updated the fiddle to point to version 2.2.4)



Here is an example demonstrating this.



As to the linear gradients, I don't know if they have been implemented yet, but here is an example showing radial gradients.



Radial gradients are also part of Highcharts 3.0 now, here is an example



Update



Looks like as of Highcharts 3.0, this is not possible anymore due to the chart auto-scaling within the plot area, an excerpt from their documentation:




size: The diameter of the pie relative to the plot area. Can be a percentage or pixel value. Pixel values are given as integers. The default behaviour (as of 3.0) is to scale to the plot area and give room for data labels within the plot area. As a consequence, the size of the pie may vary when points are updated and data labels more around. In that case it is best to set a fixed value, for example 75%. Defaults to .




in my opinion this should not be the case since dataLabels are disabled. should probably be logged as a bug



Update (Aug 2014)



As per Torstein's comment, this is indeed still possible. slicedOffset needs to be set to 0 in addition to the margins begin set. (example)



$(function () {
$('#container').highcharts({
title: null,
chart: {
type: 'pie',
margin: 0
},

plotOptions: {
pie: {
slicedOffset: 0,
size: '100%',
dataLabels: {
enabled: false
}
}
},

series: [{
data: [
['Firefox', 44.2],
['IE7', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]
}]
});
});

#container {
outline: 1px solid red;
padding: 0;
}

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js></script>
<script src=https://code.highcharts.com/highcharts.js></script>
<div id=container style=height: 400px; width: 500></div>




[#83956] Monday, July 30, 2012, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
jackie

Total Points: 442
Total Questions: 107
Total Answers: 94

Location: Honduras
Member since Sun, Dec 26, 2021
2 Years ago
jackie questions
Sat, Sep 18, 21, 00:00, 3 Years ago
Wed, Jul 14, 21, 00:00, 3 Years ago
;