Lexicon
LexiconLexicon
v 2.0v 1.0
  • Get Started
  • Foundations
    • Animations
    • Color
    • Grid
    • Layout
      • Full Box
      • Cards Layout
      • Form Box
      • Sidebar + Box
    • Typography
    • Writing Style
  • Core Components
    • Actions Definition
    • Alerts
    • Badges
    • Buttons
    • Cards
    • Charts
      • Charts
      • Colors
      • Interaction
      • Bar Chart
      • Donut Chart
      • Heatmap Chart
      • Line Chart
      • Pie Chart
      • Predictive Forecast Chart
      • Stacked Bar Chart
    • Confirmation Message
    • Dataset Display
    • Drag and Drop
    • Dropdown Menu
    • Empty States
    • Forms
      • Forms
      • Forms Hierarchy
      • Forms Navigation
      • Forms Rules
      • Forms Validation
      • Checkbox, Radio, Toggle
      • Color Picker
      • Date & Time Pickers
      • Multi Step Form
      • Multi Step Form Simplified
      • Selectors
      • Slider
      • Text Input
      • Text Input Group
      • Text Input Localizable
      • Text Input Variations
    • Icons
    • Labels
    • Link
    • List
    • Loading Indicator
    • Modals
    • Navigation
      • Breadcrumb
      • Navbar
      • Vertical Navigation
    • Pagination
    • Popovers and Tooltips
    • Progress Bar
    • Sidebar
    • Stickers
    • Table
      • Table
      • Inline Edit Table
    • Tabs
    • Toolbars
      • Toolbar
      • Management Toolbar
      • Upper Toolbar
  • Satellite Components
    • File Upload
    • Image Selector
    • Miller Columns
    • Navigation
      • Navigation
      • Header
    • Sidebar
      • Info Panel
      • Product Menu
    • Sites
      • Sites
      • Asset Title Bar
      • Asset Toolbar
      • Buttons
      • Profile Info
      • Widget Title Bar
  • Templates
    • Dataset Template
    • Form Template
  • Examples
    • Asset Metrics Dashboard
    • Page Distribution
    • Partner Portal
  • News
    • News
    • Status
  • Resources

Donut Chart

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

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.

Donut Chart with 4 different elements

Color use

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

States

Chart item interaction

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

Except as otherwise noted, the content of this site is licensed under CC BY-SA 4.0 license.