React Charts: Area Series

Area series are line series with the area under the line filled, placing more emphasis on the magnitude of the change. Area series additionally support stacking to show the total value and the way individual values relate to the whole.

Single Area Series

To create a simple area chart we need to use series type 'area'. We also have to provide the xKey and at least one yKey.

A minimal 'area' series config would therefore look like this:

series: [{
    type: 'area',
    xKey: 'year',
    yKeys: ['ie']
}]

In the snippet above we are using 'ie' as the only yKey, to show market share of just this internet browser. Using this simple series config produces the following chart:

// Loading...

To enable area markers, all we need to do is add this to the series config:

marker: {
    enabled: true
}

When markers are enabled, the tooltips will be shown on hover. In this case the values shown are percentage values, however there is no % suffix because the series don't know about the nature of the data (as it is designed to work with all kinds of data). So for the purposes of this example we additionally provide a tooltipRenderer to add the % suffix. After this change, the tooltips will change like so:

Before

-->

After

The final result can be seen in the example below.

// Loading...

Showing labels on top of data points is also an option with the label config. Labels can be enabled independently of series markers. For example, to show bold labels on top of each data point (and in this case a marker) we would use the following config:

series: [{
    ...
    label: {
        enabled: true,
        fontWeight: 'bold'
    }
}]

The above config is used in the example below. Feel free to open it in Pluker and experiment with other label options.

// Loading...

Multiple Area Series

It is possible to use more than one 'area' series in a single chart. For example, if we want one series to show the magnitude of change in market share of Internet Explorer and the other series the change in market share of Chrome, we could use the following series config:

series: [
    {
        type: 'area',
        xKey: 'year',
        yKeys: ['ie']
    },
    {
        type: 'area',
        xKey: 'year',
        yKeys: ['chrome']
    }
]

Note that in the example below we also:

• Use yNames to control the text that the legend displays
• Enable markers
• Define custom fills and strokes
• Make the fill translucent using the fillOpacity config

// Loading...

Stacked Area Series

If we want the areas to be stacked on top of each other, instead of creating a new 'area' series per stack level, we simply have to use multiple yKeys. For example, to have a stacked area chart that shows changes in market share for the most popular internet browsers we could use a config like this:

series: [{
    type: 'area',
    xKey: 'year',
    yKeys: ['ie', 'firefox', 'safari', 'chrome']
}]

This produces the following chart:

// Loading...

Normalized Area Series

Going back to our stacked area series example, if we wanted to normalize the totals so that for any given year stack levels always added up to a certain value, for example 100%, we could add the following to our series config:

normalizedTo: 100

// Loading...

API Reference

area: {
  ...
  tooltip: {
    enabled?: boolean; // default: true
    renderer?: Function;
  }
}

renderer = (params: RendererParams) => string;

interface RendererParams {
  datum: any;
  title?: string;
  color?: string;
  xKey: string;
  xValue: any;
  xName?: string;
  yKey: string;
  yValue: any;
  yName?: string;
}

area: {
  ...
  marker: {
    enabled?: boolean; // default: false
    shape?: string | Marker; // default: 'circle'
    size?: number; // default: 8
    maxSize?: number; // default: 30
    fill?: string;
    stroke?: string;
    strokeWidth?: number;
    formatter?: Function;
  }
}

formatter = (
    params: FormatterParams
) => Formatter;

interface FormatterParams {
  datum: any;
  fill: string;
  stroke: string;
  strokeWidth: number;
  size: number;
  highlighted: boolean;
  xKey: string;
  yKey: string;
}

interface Formatter {
  fill: string;
  stroke: string;
  strokeWidth: number;
  size: number;
}

area: {
  ...
  label: {
    enabled?: boolean; // default: true
    color?: string; // default: 'rgba(70, 70, 70, 1)'
    fontStyle?: 'normal' | 'italic' | 'oblique'; // default: 'normal'
    fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'; // default: 'normal'
    fontSize?: number; // default: 12
    fontFamily?: string; // default: 'Verdana, sans-serif'
    formatter?: Function;
  }
}

formatter = (
    params: FormatterParams
) => string;

interface FormatterParams {
  value: any;
}

area: {
  ...
  highlightStyle: {
    item?: Item;
    series?: Series;
  }
}

area: {
  ...
  highlightStyle: {
    ...
    item: {
      fill?: string; // default: 'yellow'
      stroke?: string;
      strokeWidth?: number;
    }
  }
}

area: {
  ...
  highlightStyle: {
    ...
    series: {
      strokeWidth?: number;
      dimOpacity?: number;
    }
  }
}

area: {
  ...
  shadow: {
    enabled?: boolean; // default: true
    color?: string; // default: 'rgba(0, 0, 0, 0.5)'
    xOffset?: number; // default: 0
    yOffset?: number; // default: 0
    blur?: number; // default: 5
  }
}

area: {
  ...
  listeners: {
    nodeClick?: Function;
  }
}

nodeClick = (
    params: NodeClickParams
) => any;

interface NodeClickParams {
  type: 'nodeClick';
  series: AreaSeries;
  datum: any;
  xKey: string;
  yKey: string;
}

Next Up

Continue to the next section to learn about scatter and bubble series.