Liferay.Design / Lexicon
Get StartedResources
Part of Liferay, IncCode/Content Licenses

Donut Chart

Sign In
View in FigmaView in ClayDocumentation

A Donut Chart is a variation of the Pie chart that lets you divide data by numerical proportions of a total value.

Donut Chart with 4 different elements

We recommend that you use the Donut Chart instead of the Pie chart due to the following reasons:

  • When you first see the Pie Chart, your eyes tend to be attracted to the center of the pie, then to the outside circle, and only after that, the different parts of the chart.
  • When you first see the Donut Chart, there’s no center to be attracted to, and the your eyes can read the different parts of the chart easily.

Color use

The Doughnut Chart must follow the standard color order for charts: the first chart element is displayed in the top-right position.


Chart item interaction

Intertaction on the blue pie piece of the chart, corresponding to Facebook

Something to improve? Report an issue!