piechart

PieChart

Ultimate JavaScript PieChart package for multi-level category data visualization and exploration. With PieChart package you can create Donut, Pie and even Gauge chart types.

It's easy to set-up and customize

Almost every aspect of PieChart appearance and functionality can be customized to fit your needs.

Display Options

Various pre-set visual themes. Almost any visual aspect can be customized.

Drill-Down

Easy to use drill-down technology. Unlimited depth and an intuitive built-in level-up navigation.

Labels & Legend

Various interactive legend and label options. Various marker shapes and customize the marker size.

Features

User Interactions

Drill down

Drill down to the next sub-category of data. Drill down levels are not limited.

Drill up

Go back to the previous upper-level of the data.

Select slice

By default slice will be selected with a click if there is no more drill-down available. If there is drill-down available, clicking on slice will invoke drill-down.

Select multiple slices

Click on a slice holding down ctrl or shift key to select multiple facets.

Expand "others" slice

Expand others slice to see more data.

Expand "previous" slice

Expand others slice to go back to main results.

Give it a try!

This is an actual JavaScript chart demo. Hint shows you action to take. Follow the hints to interact with the chart.

Step 1:

Examples

Almost every aspect of PieChart appearance and functionality can be customized to fit your needs. Rich API enables endless integration options to satisfy most demanding requirements.

Agreggated Pie Charts on Geo Chart

JavaScript map chart that displays each location node as a pie chart. With 'aggregation' enabled, nearby nodes will be merged together and display aggregate values - zoom in to expand. Use the toggle to compare difference between on and off.

Pie chart with others grouping and drill-down

Multi-level pie chart that combines smaller slices into an expandable 'Others' slice. Click on a slice to drill down and reveal its subvalues.

Pie chart with others grouping

Simple pie chart with an 'Others' slice that combines smaller slices. Enabled by default, can be disabled or configured within 'others' object under 'interaction'.

Pie chart with drill down

Multi-level pie chart with three levels of hierarchy - click on a slice to drill down. If a value in 'data' has "subvalues", they will be displayed as another level of hierarchy.

Donut chart with drill-down and 'Others' grouping

JavaScript donut chart with multiple levels of hierarchy. Smaller slices have been grouped in a clickable 'Others' slice - this is default behavior but it can be disabled or configured within the 'others' object under 'interaction'. Donut chart was enabled using 'innerRadius' property, which controls the size of the "donut hole" - using 0 or omitting it entirely would create a regular pie chart.

Donut chart with drill-down

Donut chart with multi-level drill down. The 'others' slice has been disabled, which means that all slices within a hierarchy level will be forced to display. The size of the "donut hole" has been increased using 'innerRadius' property.

Pie chart with grouping, drill-down and legend

Simple JavaScript pie chart with clickable 'Others' slice and drill down. User can drill down to a category by clicking on a slice or its legend item. By default, the legend is disabled, but it can be enabled and configured using 'legend' object.

Donut chart with background image, grouping and drill-down

Donut chart with a custom image displayed in the middle. The image URL was provided as a value to the 'area'->'style'->'image' property. The size of the "donut hole" can be adjusted using 'innerRadius' property within 'pie' object.

Multiple level pie chart with others grouping

Donut chart with multiple levels - user can click on a slice to drill down. By default, 'others' slice is enabled, which will group together smaller slices and allow the user to expand them with a click.

Multiple level donut chart with 'Others' grouping

Thin donut chart with multi-level drill down. With 'innerRadius', you can adjust the size of the "donut hole" proportionally to the entire chart. For example, 0 would make it a regular pie chart with no hole, but here it is 0.7, which makes the inner radius 70% of the outer radius.

Single level gauge chart

Simple JavaScript gauge chart. By default, PieChart visual will render the chart as a full circle, but with 'startAngle' and 'endAngle' properties we created a half-circle to produce a gauge chart. Provide a radian value to determine start and end point placement (in this case, '-3,14159' = nine o'clock; '0' = three o'clock)

Multiple level gauge chart

Gauge chart with multi-level drill down - click on a slice to reveal subcategories. 'startAngle' and 'endAngle' properties were used to limit the chart to a half-circle - use radian values to place start and end points for the chart.

Gauge chart filled centre

This gauge chart was created by using 'startAngle' and 'endAngle' to limit the pie chart to a half-circle. Since 'innerRadius' value hasn't been changed from 0, the pie chart has no empty space in the middle.

World map with pie chart on each country

JavaScript world map where each coordinate displays a pie chart. Nearby nodes are clustered together with 'aggregation', showing aggregate data in the pie chart.

Pie chart on map

JavaScript map chart where nodes are displayed as pie charts. GeoChart can display other ZoomCharts visualizations as a layer on top of the base map using 'layers' array.

Donut chart on map

JavaScript map chart where nodes are displayed as pie charts. GeoChart can display other ZoomCharts visualizations as a layer on top of the base map using 'layers' array.

Donut chart with clickable legend

Donut chart where all visible categories are displayed as legend items. The legend is clickable, mirroring the same interactions as their corresponding slices - click to drill down, and Ctrl+click or hold click/tap to select one or multiple categories.

Themes: bevel, raised, flat, gradient

PieChart comes with some predefined and ready to use themes. Set them with one line of code. Also, you can further modify chart settings as you wish.

Pie chart with background image

Pie chart that displays a background image in the center.

Gauge with live data

JavaScript gauge chart with real-time data updates. This example showcases how the PieChart visualizes changes in data as they happen. The gauge chart was created by providing custom radian values to 'startAngle' and 'endAngle', but the 3D effect was applied using "theme: PieChart.themes.raised".

Slice selection

Pie chart example that shows how interactions like 'drill down', 'select', 'add to selection' and 'reset' can be called with event listeners to customize navigation experience. By default, single click = drill down, hold click = select or add to selection.

Left click behavior: expand, select, or toggle

In PieChart, you can choose the default right click action under 'navigation' -> 'mode': 'select' will make a new selection, 'toggle' will add or remove the clicked slice to the existing selection, and 'drilldown' will reveal the subvalues of the clicked slice.

Scrolling gesture on PieChart

Pie chart with 'scrolling' gesture enabled. When the user "scrolls" in a circular motion (like a rotary phone dial), the chart will slowly drill down and reveal the contents of the 'Others' slice. This and similar gestures can be configured in 'interaction' object.

Custom info in tooltip on hover

Instead of the default tooltip, 'info' calls a custom info popup as defined in a function.

PieChart events tester

PieChart and other ZoomCharts visualizations operate based on event listeners. In the 'events' object, you can override default behavior and execute your own functions on events like onClick, onHoverChange or others. To demonstrate how event listeners work, we have added a log that tracks events as they happen.

Legend placement: Top

You can configure the position of the legend block within 'panel' under the 'legend' object. In this example, the legend is placed on the top using 'side' property (other options include right, left, bottom); and it is centered using 'align' property.

Label style

Pie chart labels can be configured in 'style'. Here, we configured label background color, outline, shadow, text font and color, and other settings.

Pie chart label placement

Inside labels and outside labels are both supported by PieChart. Use the toggles to instantly switch between different label placement modes.

Dashed slices and labels

Pie chart with dashed outlines for slices and labels. In the 'lineDash' array, you can define your own dashing pattern. For example, lineDash: [6, 6, 3, 3], will translate to 6 units of line, 6 units of blank space, 3 units of line, 3 units of blank space, and repeat.

Color modes: list, gradient, proportional gradient

Pie chart with different 'colorDistribution' settings - 'list', which will apply color codes from a list, 'gradient', which will apply derived shades from a base color, and 'gradientProportional', which derives shades based on slice size. Switch between modes to see the difference.

Pie Chart - pie, one level, raised theme

3D pie chart with raised edges and drop shadow effect, enabled using 'theme: PieChart.themes.raised'. Note how the NBA player salaries in the labels are displayed as 'units' due to a custom styleFunction - you can configure label content and add your own value affixes, for example, "USD".

Pie chart - donut, bevel theme, hierarchical structure

This pie chart was turned into donut chart by increasing the 'innerRadius' property. Custom functions were used to add a suffix ("visits") to the tooltips and display percentages in slices. Bevelled edges were applied using 'theme: PieChart.themes.bevel' string.

Preloaded data for PieChart

JavaScript pie chart with preloaded data. For simple datasets, preloading data will improve performance and limit data requests during navigation.

PieChart with data URL

JavaScript pie chart that loads data from a URL - in this example, a JSON file. PieChart also easily integrates with MongoDB, MySQL, and other data sources - read more in the 'Integrations' section of our website.

Incremental data-loading

Pie chart that requests data on-demand to load it incrementally. For complex data sets, this can be used as a way to reduce requests and save resources. This example has an event log that displays each request, showcasing incremental loading in action.

PieChart with data function

By default, PieChart will load all available data. You can configure data loading behavior with a custom function in 'dataFunction' under 'data'. In this example, the pie chart loads data incrementally and requests data only when the user performs a drill down.

Pie chart - flat theme, custom labels

Pie chart example with label customization settings applied: 'fillColor' and 'lineColor'. Flat theme enabled using 'theme: PieChart.themes.flat'

Pie Chart - donut, 3d (raised) theme, hierarchical

Pie chart with a 3D effect, which was enabled using 'theme: PieChart.themes.raised'.

Pie Chart - donut, one level

Simple 3D donut chart with one level. The 3D effect was enabled using 'theme: PieChart.themes.raised", the slices show percentages as inside labels by using a custom 'styleFunction', and the size of the "donut hole" was adjusted using 'innerRadius' property.

Pie chart - continental data + breadcrumb feature

Pie chart where data is categorized per continent, and drill down reveals values per each country, and then years. 'Breadcrumbs' display the current filter state - each 'onChartUpdate' event activates 'getActiveSlices', which is then displayed as HTML text above the chart.

Pie Chart - pie, one level, 3d theme, no labels, info popup

JavaScript pie chart example using a 3D theme with labels hidden for a cleaner look. Detailed information is shown in a custom info popup on hover, keeping the chart minimalistic yet informative.

User interaction: swipe slices to input data

Pie chart where user can swipe each slice to adjust values - try it out by dragging a slice outwards. Enabled using 'partialSwipe'.

Pie Chart category order for drill down

Drill down hierarchy in PieChart is determined by the category order. Try different category orders to see how the pie chart changes!

Social network chart with pie and time charts on click

Explore social networks in a beautiful and interactive JavaScript chart. Click on a node to reveal a pie chart.

Network chart with pie charts on click

JavaScript network chart where clicking on a node will reveal a pie chart, referencing ZoomCharts PieChart package. The pie chart is called using event listeners.

Pie charts as network chart nodes

Network chart where each node displays a pie chart.

Global sales data dashboard with cross-filtering

Impressive example on how to use almost all of the ZoomCharts chart packages to create an amazing fully interactive dashboard. In this case it is sales data, but just imagine your own data here!

Crime analysis dashboard example: World map

A dashboard that shows crime analytics using multiple ZoomChart's chart packages.

Customer demographics dashboard example

Dashboard example that visualizes customer demographics data on a world map.

Travel planner with GeoChart and NetChart

Interactive JavaScript travel planner that consists of a map chart with a network chart as an additional layer on top of the world map. Click on a node to pick a starting point, and then hover over your destination to see the best travel routes.

Pie Chart on Geo Chart

Map chart of the US, where each state displays a pie chart. With 'layers', you can display different chart types from ZoomCharts library on top of your map chart.

PieChart with dark theme

Latvian car market composition as of 1st of January, 2013. Source: csdd.lv

Pie chart - donut chart, flat theme, hierarchical structure

Latvian car market composition as of 1st of January, 2013. Source: csdd.lv

Pie chart legend customization

Pie chart with legends enabled - click on each item to drill down. You can enable and configure the legend appearance using 'legend' object - here, we changed the font family, size and style, limited display to two columns, configured line spacing, padding, and margin.

Get started with ZoomCharts

Start free to explore the possibilities of the Zoomcharts JavaScript charts library.

Get started

Purchase

Integrate all of our charts in your website, SaaS, OEM or any other product.

Purchase