Charts Guidelines
The Chart Component can display charts with axes and values to help users comprehend data by visualizing it. The charts are interactive, so users can learn more about data points by interacting with the chart elements.
Best Practices
You can read about general data visualization best practices in our Data Visualization Manual.
Features
- Tooltips: tooltips can display data over the x-axis, e.g. numbers of clicks and opens on a given day.
- Combined charts with separate y-axes: multiple charts can be displayed over each other, e.g. a line chart over a column chart. A combined chart can have separate y-axes for each chart.
- Loading state: a loading state can be displayed with
<ec-chart-loader>while the chart is not yet available. - Colors: the Design System includes a series of chart colors to make it easier to find the right colors for charts. You can find them in our Colors page.
- Markers: markers can be displayed over line charts to mark data points over the x-axis.
- Currency: numbers can be displayed as a currency by using a currency code, e.g. USD.
Available Chart Types
- Line chart
- Smooth or angular
- Area chart
- Stacked area chart
- Column chart
- Stacked column chart
- Grouped column chart
Creating Custom Charts
If the Design System doesn't have the exact chart for your needs, you can build your own using Design System building blocks:
- Colors: use our color variables (e.g.
var(--color-chart-01)orvar(--color-blue-500)) - Typography: use our text classes (e.g.
.text-size-body) - Margins and paddings: use our CSS utility classes (e.g.
.e-margin-m)
By using these building blocks, the chart will look consistent with the UI, and it'll be read to receive Design System updates, e.g. color or typography changes.