Selectively displaying pie chart labels inside or outside slices

Type tutorial

This demo shows how we can use an adapter on pie chart’s labels to automatically determine how it is displayed: inside or outside the slice. Code Example Here’s a simple example: Another example, which aligns outside labels into a column:

Focusable pie slices with perfect outline

Type tutorial

This demo shows how we can hide default rectangular bracket for focused pie slice as well as apply custom state to highlight focused one. Code CSS The following CSS will hide the built-in rectangular focus highlighter. Example

Dynamically changing legend position

Type tutorial

This short tutorial will show the steps involved in dynamically changing position of the legend. Changing position The following steps are involved when changing the position of the legend, e.g. from bottom to left: For example, the below code will move the legend from bottom, to left: Demo

Grouping legend items

Type tutorial

This short tutorial will introduce two approaches that can be used to group legend items by inserting a label between its items. Approach #1 The easiest approach is to create a legend like we would do on any chart, set its data, then insert Label elements at predefined places in legend’s children list. The downside […]

Pie chart with a legend with dynamically-sized labels

Type tutorial

This demo shows how we can use events to dynamically set width for the Pie chart’s legend labels, so that the legend takes up all available space, left from the pie itself, as well as truncates the labels if there’s no space available.

Pre-hiding pie chart slices

Type tutorial

This short tutorial will show how to pre-hide individual slices of a pie chart, in this case ones that have zero value. Hiding a slice To a hide a slice on a pie series (or any other percent series for that matter), we need to call the hide() method of its data item. For example, […]