Overview

Line charts are a type of chart consisting of a line that describe a dataset.

Best Practices

  • Line charts are used to a changing time series
  • Line charts are good for showing trends over time

Examples

Basic line chart

Line charts should include a title and be contained in an EzCard container. The card title can optionally have a description and icon.

To chart a dataset as a line chart, provide a dataset as a data array of objects with x and y values.

For example:

data = [{x: 'first', y: 1}, {x: 'second', y: 2}, {x: 'third', y: 3}];

Always provide title and a detailed description for assistive devices.

Typically, the independent axis will be the x-axis and the dependent axis will be the y-axis. To format the point labels on each axis, optionally pass a function to each dependentAxisLabelFormatter and/or independentAxisLabelFormatter. To customize which labels appear on each axis, optionally pass an array of values of the same type as the respective data values to each dependentAxisLabelValues and/or independentAxisLabelValues. Axis labels do not have to be passed as a static array, they can be dynamically generated as an array of values.

To customize the highest independent and dependent values displayed on the axes, pass numeric values to maxIndependentValue and maxDependentValue, respectively. Avoid explicitly defining independentAxisLabelValues and dependentAxisLabelValues simultaneously with maxIndependentValue or maxDependentValue.

Lines colors can be customized with theme colors. The default is primary.

If your dataset may sometimes be an empty array, work with design to render something other than a blank chart, perhaps an EzBlankState.

In some cases, like server-side rendering, a deterministic id may be needed. If needed, use prop idPrefix.

Code example
Playroom

Total active users

Last 12 months

3,588

Total active users over the last 12 months totals 3,588 users.A line chart for Total active users over the last 12 months totalling 3,588. Active users for each month is as follows: January active user count was 1000, February active user count was 1100, March active user count was 1500, April active user count was 1400, May active user count was 1500, June active user count was 1800, July active user count was 2000, August active user count was 4100, September active user count was 2500, October active user count was 2800, November active user count was 3000, December active user count was 3500.01,0002,0003,0004,0005,000JanFebMarAprMayJunJulAugSepOctNovDec

Line chart colors

EzLineChart supports theme palette properties (primary, secondary, error, warning, info, alert, neutral, and success) as well as all supported theme colors (ex. common.red100). Colors should have high enough contrast for accessibility.

The default lineColor is primary.

Accessibility

See WAI-ARIA accessibility guidelines for SVG charts.

All charts should have a title and description.

Props

NameTypeDefaultDescription
data*
Datum[]
Array of data with x and y values of type string, number, array of strings, or function.
description*
string
Detailed accessible description for the chart.
title*
string
Accessible title for the chart.
idPrefix
string
| number
Deterministic id for the chart.
dependentAxisLabelFormatter
func
The function to format the dependent axis points.
dependentAxisLabelValues
AxisLabelValue[]
Array of axis label values to customize the dependent axis labels.
independentAxisLabelFormatter
func
The function to format the independent axis points.
independentAxisLabelValues
AxisLabelValue[]
Array of axis label values to customize the independent axis labels.
lineColor
EzThemeColors
primary
Line chart line color.
*
 required

Current theme

Theme

Contents