Donut Chart

Overview

The Donut chart is a modified pie chart that can display several rings of series data at once.

Creating the Donut Chart

The Donut class extends the Ardisia ChartBase class so it can be added to containers that implement IVisualElementContainer.

Using the Donut Chart

The Donut chart works by assigning a "seriesField" and a vector of "categories". A series is a collection of related data to display. For example, in the demo, the series data is the motor vehicle production for various nations.

The categories define what particular data within a series is displayed in each ring of the donut. In the demo, each category is a specific year of motor vehicle production by nation. Categories are defined by "DonutCategory" objects.

Item Renderers

All renderers are DonutRenderer objects.

DataTip(s)

If the "showDataTip" property is true, a dataTip will display when the user hovers over series data.

When using a custom "dataTipFormatFunction", the "hoveredCategoryIndex" property is useful because it indicates which category of a series is currently being hovered by the user. Also, tooltips can be passed TextFlow objects for a highly customized appearance.

The dataTip will persist for a time set by the "dataTipHideDelay" after users mouse out of data nodes.

Animations & Effects

Use the "HighlightAlpha" and "HighlightDuration" properties to control how renderers other than the hovered renderer are faded.

Legend

To automatically apply a legend, add an Ardisia Legend to the display and send the legend a reference to the chart.

<ardisia:Legend chart="{donutChart}">

In the example above, assuming that a chart with the ID "donutChart" has been created, a legend would be displayed that would automatically display the series for the chart.

See the ASDocs for the Legend for additonal properties and options.

Labels

Display series labels via the "showSeriesLabels" property. The series label is retrieved from the "seriesLabelField" property on the data.

Display the weight percentage of each wedge via the "showPercentages" property.

Layout

The Donut chart will automatically size itself to fill the allotted space.

If labels are displayed for the series data because "showSeriesLabels" is true, then the layout will automatically resize the chart for the labels to fit.

Change the appearance of the chart via properties such as: "angleOffset", "innerRadius", "ringSeperation", and "wedgeSeperation".

Coloring

Series renderers are colorized by default.

Alternatively, you can supply a callback "colorFormatFunction" to supply custom colors to the series item renderers.

Default Property

The dataProvider is the default property.

Selected Custom Styles

See the ASDocs for the Donut class. The number of styles is very numerous.

Themes & Skinning

A skin is provided for the Spark theme.

Example

See the Donut chart demo application for example code.

Back To Top