google Pie Chart

$5,668

Sales

Pie Chart

A pie chart that is rendered within the browser using SVG or VML. Displays tooltips when hovering over slices.

Pie Exploded

You can separate pie slices from the rest of the chart with the offset property of the slices option:

Pie Rotated

By default, pie charts begin with the left edge of the first slice pointing straight up. You can change that with the pieStartAngle option:

3D Pie Chart

If you set the is3D option to true, your pie chart will be drawn as though it has three dimensions:

3d Pie Exploded

You can separate 3d pie slices from the rest of the chart with the offset property of the slices option:

Donut Chart

A donut chart is a pie chart with a hole in the center. You can create donut charts with the pieHole option.

The pieHole option should be set to a number between 0 and 1, corresponding to the ratio of radii between the hole and the chart. Numbers between 0.4 and 0.6 will look best on most charts. Values equal to or greater than 1 will be ignored, and a value of 0 will completely shut your piehole.

Donut Rotated Chart

By default, donut charts begin with the left edge of the first slice pointing straight up. You can change that with the pieStartAngle option.

The pieHole option should be set to a number between 0 and 1, corresponding to the ratio of radii between the hole and the chart. Numbers between 0.4 and 0.6 will look best on most charts. Values equal to or greater than 1 will be ignored, and a value of 0 will completely shut your piehole.

Donut Exploded Chart

You can separate donut slices from the rest of the chart with the offset property of the slices option.

The pieHole option should be set to a number between 0 and 1, corresponding to the ratio of radii between the hole and the chart. Numbers between 0.4 and 0.6 will look best on most charts. Values equal to or greater than 1 will be ignored, and a value of 0 will completely shut your piehole.

Pie Diff Radius Chart

The diff pie chart nestles older data inside newer data. Consider the change in popularity of the top five U.S. college majors between 2000 and 2010 (mouse over the wedges to see the values; data from the National Center for Education Statistics). Here's the 2000 data, the 2010 data, and the diff between them.

You can control the relative size of the circles with diff.innerCircle.radiusFactor

Pie Diff Border Chart

The diff pie chart nestles older data inside newer data. Consider the change in popularity of the top five U.S. college majors between 2000 and 2010 (mouse over the wedges to see the values; data from the National Center for Education Statistics). Here's the 2000 data, the 2010 data, and the diff between them.

You can control the border between the two with diff.innerCircle.borderFactor

Pie Diff Opacity Chart

The diff pie chart nestles older data inside newer data. Consider the change in popularity of the top five U.S. college majors between 2000 and 2010 (mouse over the wedges to see the values; data from the National Center for Education Statistics). Here's the 2000 data, the 2010 data, and the diff between them.

You can control the transparency of each with diff.oldData.opacity and diff.newData.opacity

Pie Diff Invert Chart

The diff pie chart nestles older data inside newer data. Consider the change in popularity of the top five U.S. college majors between 2000 and 2010 (mouse over the wedges to see the values; data from the National Center for Education Statistics). Here's the 2000 data, the 2010 data, and the diff between them.

You can you can invert the behavior so that the oldest data surrounds the newest data with diff.oldData.inCenter

Theme Customizer


Customize & Preview in Real Time

Menu Color Options

Layout Options

Navigation Color Options
Solid
Gradient

Solid

Gradient

Buy Now