Skip to main content

Area

The Area component is used to display area charts. You can specify the type of data that the area is being trended over (linear data, time data or point data) with the scaleType prop. It's also possible to define tooltips and on-click popovers for the area using the ChartTooltip and ChartPopover components respectively as children.

There are two different types of area charts available, standard area and stacked area. When using metric alone, areas will automatically be stacked. When using metricStart and metricEnd, stacking is not supported.

Defining the shape of an area plot

The shape of an area plot can be defined using two different methods. Both of these methods are mutually exclusive. The table below describes the two methods. If metricStart and metricEnd are defined, metric will be ignored and the "start and end" method will be used.

methodpropsdetails
metricmetricStart fixed to the baseline (0) or the end of the previous area (stacked), end is start + metric value
start and endmetricStart, metricEndStart and end values are provided. Cannot be used with stacking.

Value only (Stackable)

If only the metric prop is used to set the shape of the area, then the start of the area will be the baseline (0) or the end of the previous area (stacked). The end of the area will be the start + metric value. This is similar to how a traditional bar or a stacked bar would be defined.

Start and End (Non-stackable)

When using metricStart and metricEnd, each area's shape is defined by explicit start and end values. This method cannot be used with stacking, and the order property will be ignored if these are defined.

Examples

Value only (one series)

<Chart data={data}>
<Axis baseline labelFormat="time" position="bottom" ticks />
<Axis grid position="left" ticks />
<Area dimension="date" metric="count" />
</Chart>

Area chart Area chart

Value only (multiple series)

<Chart data={data}>
<Axis baseline labelFormat="time" position="bottom" ticks />
<Axis grid position="left" ticks />
<Area dimension="date" metric="count" color="event" />
<Legend />
</Chart>

Stacked area chart Stacked area chart

Start and End (floating)

<Chart data={data}>
<Axis baseline labelFormat="time" position="bottom" />
<Axis grid position="left" title="Temperature (F)" />
<Area metricEnd="maxTemperature" metricStart="minTemperature" opacity={0.6} />
</Chart>

Floating area chart Floating area chart

Interactivity

The Area component supports rich interactions through tooltips and popovers. When hovering over an area:

  • The opacity of non-hovered areas will be reduced automatically
  • If tooltips are defined, they will be displayed
  • If popovers are defined, clicking the area will show the popover

To add these interactions, use the ChartTooltip and ChartPopover components as children of the Area component.

Props

nametypedefaultdescription
childrenChartTooltip | ChartPopoverOptional elements that can be rendered within the chart. Used to define tooltips and popovers for interactivity.
colorstring'series'The key in the data that defines what color that area will be. This is not a color value itself but rather the key in the data that will map to the color's scale.
For example: A stacked area chart that has a different color for each operating system, color would be set to the name of the key in the data that defines which operating system it is (color="operatingSystem").
dimensionstring'datetime'The key in the data that the metric is trended against. This is the x-axis for a standard area chart.
metricstring'value'The key in the data that is used for the value of the data point. When used alone, enables stacking behavior. Incompatible with metricEnd and metricStart.
metricEndstringThe key in the data that is used for the end of the area. Must be used together with metricStart. Incompatible with metric and stacking behavior.
metricStartstringThe key in the data that is used for the start of the area. Must be used together with metricEnd. Incompatible with metric and stacking behavior.
namestringArea name. Useful for if you need to traverse the chart object to find this area. If not provided, will be auto-generated based on the index of the area in the chart.
opacitynumber0.8Opacity of the area. The area will automatically handle opacity changes during interactions like hovering and selection.
orderstringThe key in the data that defines the stack order. The higher the order, the higher in the stack the series will be. Only applies when using metric for stacked areas. Incompatible with "metricStart" and "metricEnd" (order will be ignored if these are defined).
paddingnumberSets the chart area padding. This is a ratio from 0 to 1 for categorical scales (point) and a pixel value for continuous scales (time, linear)
scaleType'linear' | 'time' | 'point''time'Type of data that the area is trended over. If using 'time', the dimension data must be in valid time format like a date string or timestamp number.
If you are plotting this area along with other marks that are ordinal (ex. bar), then you must use a 'point' scale for the two to align correctly.