Pie Charts

Code

• Overview
• Usage
• Options
• Events

Demos

Inline

Inline bar charts are small charts that can appear inline within the context of a block of text or other inline elements. Note Because inline charts are so small, they should generally only be used with a single data set and without many of the visual chart features enabled. Keep inline charts simple.

Demo

This is an inline bar chart: It can appear within a paragraph.

Show Code

<p>This is an inline pie chart: <span class="inlinePieChart" data-chartData="[
{x:[40,10]}
]"></span> It can appear within a paragraph.</p>

Default

This is the default pie chart, with no options enabled. It expands to the full height of its container and shows data only. The y-axis data is not necessary.

Demo

Show Code

<div class="pieChart" data-chartData="[
{x:[130,33,75]}
]"></div>

Aspect Ratio

The default aspect ratio for any chart is 16:9, but because pie charts aren't rectangular, you may want to adjust the aspect ratio using the aspectRatio option so that the chart takes up more of the available space. The demo has been adjusted to a 4:3 ratio.

Demo

Show Code

<div class="pieChart" data-chartData="[
	{x:[130,33,45,75]}														
]" data-chartOptions="{
	aspectRatio: [4,3]
}"></div>

Interactive Keys

Most pie charts won't be very useful without a key. To enable a key, use the showKey option. Key position and size can be controlled via the keyPosition and the keyWidthPercentage options.

Demo

Show Code

<div class="pieChart" data-chartData="[
	{x:[130,33,45,75]}														
]" data-chartOptions="{
	showKey: true, 
	keyPosition:'right', 
	keyWidthPercentage: 25
}"></div>

Custom Labels

The default labels for a key are Series 1, Series 2, etc. To insert custom labels, use the dataLabels option, giving it an array of strings as a value, one string for each data segment.

Demo

Show Code

<div class="pieChart" data-chartData="[
{x:[130,33,45,75]}
]" data-chartOptions="{
	showKey: true, 
	keyPosition:'right', 
	keyWidthPercentage: 25,  
	dataLabels: ['Like Jar Jar', 'Kill Jar Jar'],
	showTitle: true,
	title: 'Reactions'	
}"></div>

Chart Tips

Use the showTips option to enable tips. Custom tips can be entered using the tipText option, with a value of an array containing a single HTML string.

The following placeholders can be used for pie charts: {x} (the raw value of a segment), {piePercent} (the segment's percentage of the pie), and {label} (the name of the segment). The demo has the default tip text.

Demo

Show Code

<div class="pieChart" data-chartData="[
{x:[130,33,45,75]}
]" data-chartOptions="{
	showKey: true, 
	keyPosition:'right', 
	keyWidthPercentage: 25, 
	showTips: true
}"></div>

Animation

The chart can be animated by setting the animate option to true. The length of the animation can also be controlled with the animationDuration option, which defaults to a 1 second animation.

Note Animations do not currently work in Internet Explorer as it does not support declarative animations. The chart will simply ignore the animate option and display a static chart in Internet Explorer.

Animation has also been disabled in Safari until further testing can be performed and a fix can be found. A static chart will also be displayed for Safari.

Demo

Refresh Animation

Show Code

<div id="animatedPieChart" class="pieChart" data-chartData="[
	{x:[50,33,45,48]}
]" data-chartOptions="{
	showKey: true, 
	keyPosition:'right', 
	keyWidthPercentage: 25, 
	showTips: true, 
	animate:true
}"></div>

<p><a id="animateButton" class="infoButton" href="#">Refresh Animation</a></p>

<script type="text/javascript">
	window.addEvent('domready', function(){
		$('animateButton').addEvent('click', function(e){
			e.stop();
			$('animatedPieChart').fireEvent('updateChart');
		});
	});
</script>