Chart States

Many charts share empty, error and loading states. A chart should never be rendered empty and a descriptive message about why no data is loaded should be used to inform the user.

Usage Guidelines


Empty

When there is no data available, a chart should display an empty state message. This may include direction on how to make data appear. Never render an empty chart.

Empty chart
Empty pie chart
Empty donut chart
Empty gauge chart
Empty heatmap

Error

There may be times when an error occurs while fetching data. When an error occurs, a chart should display an error state message. Whenever possible, give users an actionable explanation of what happened and how to fix it. Never render an empty chart.

Error chart
Error pie chart
Error donut chart
Error gauge chart
Error heatmap

Loading

Charts often require time to load. When a chart is in the process of fetching data to display, display a loading state message.

Loading chart
Loading pie chart
Loading donut chart
Loading gauge chart
Loading heatmap