Vue Charts: Pie and Doughnut Series

This section shows how to create pie charts.

Pie series are used for showing how parts relate to the whole, for example if you want to show the market share of each competitor.

Basic Configuration

To plot a basic pie all we need is an array of values that will determine the angle of each pie slice. The total of all values will correspond to the full pie.

A basic pie series configuration is shown below:

series: [{
    type: 'pie',
    angleKey: 'value'
}]

This results in the chart shown below. Note that tooltips show the absolute value of each pie slice.

// Loading...

Slice Labels

In the example above there's no legend or labels next to pie slices. To show those, the label information must be in the data. Additionally, we'll have to provide the labelKey:

series: [{
    type: 'pie',
    angleKey: 'value',
+   labelKey: 'label'
}]

Now we get labels, a legend, and the tooltips will also show labels along with the values:

// Loading...

Each individual slice can be toggled on and off via the legend.

You might notice that not all of the slices in the chart above have a label. The reason for this is that certain slices can be small, and if there's a cluster of small slices their labels will overlap, resulting in a messy chart. To prevent this from happening the series will only show labels for slices with an angle greater than a certain value, which by default is set to be 20 degrees. This value is adjustable via the label.minAngle config:

label: {
    minAngle: 20
}

The label's callout can be configured to have a different length, color and strokeWidth, for example:

callout: {
    colors: 'red',
    length: 20,
    strokeWidth: 3
}

Please check the API reference below to learn more about label and callout, as well as other series configuration.

Variable Slice Radius

Let's say you have the data for both the market share of mobile operating systems and the level of user satisfaction with each OS. We could represent the satisfaction level as the radius of a slice using the radiusKey config like so:

series: [{
    type: 'pie',
    labelKey: 'os',
    angleKey: 'share',
    radiusKey: 'satisfaction'
}]

A pie chart where slices can have different radii is also known as a rose chart.

// Loading...

Doughnuts

Pie series can be used to create a doughnut chart by using the innerRadiusOffset config.

series: [{
    type: 'pie',
    labelKey: 'os',
    angleKey: 'share',
    innerRadiusOffset: -70
}]

The config specifies the offset value from the maximum pie radius which all pie slices use by default (the maximum pie series radius is determined automatically by the chart depending on the chart's dimensions). -70 in the snippet above means the inner radius of the series should be 70 pixels smaller than the maximum radius.

// Loading...

Multiple Doughnuts

As well as the innerRadiusOffset we can also configure the outerRadiusOffset. This gives us the ability to render multiple pie series in a single chart without overlapping.

series: [
    {
        type: 'pie',
        outerRadiusOffset: 0, // default
        innerRadiusOffset: -40,
        ...
    },
    {
        type: 'pie',
        outerRadiusOffset: -100,
        innerRadiusOffset: -140,
        ...
    }
]

In the snippet above we configure the outerRadiusOffset of the second (inner) series to be smaller than the innerRadiusOffset of the first (outer) series. The difference of 60 between these offsets will determine the size of the gap between the outer and inner series. The difference between outerRadiusOffset and innerRadiusOffset for each series will determine the thickness of the rings, which will be 40 for both series in this case.

The example below uses one pie series to plot the market share of each operating system and another pie series to plot user satisfaction level with each OS:

// Loading...

API Reference

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

renderer = (params: RendererParams) => string;

interface RendererParams {
  datum: any;
  title?: string;
  color?: string;
  angleKey: string;
  angleValue: any;
  angleName?: string;
  radiusKey?: string;
  radiusValue?: any;
  radiusName?: string;
  labelKey?: string;
  labelName?: string;
}

pie: {
  ...
  title: {
    enabled?: boolean; // default: true
    text?: string;
    color?: string; // default: '#000000'
    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: 10
    fontFamily?: string; // default: 'Verdana, sans-serif'
  }
}

pie: {
  ...
  highlightStyle: {
    fill?: string; // default: 'yellow'
    stroke?: string;
  }
}

pie: {
  ...
  label: {
    enabled?: boolean; // default: true
    color?: string; // default: '#000000'
    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'
    offset?: number; // default: 3
    minAngle?: number; // default: 20
    formatter?: Function;
  }
}

formatter = (params: FormatterParams) => string;

interface FormatterParams {
  value: string;
}

pie: {
  ...
  callout: {
    colors?: string[]; // default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f']
    strokeWidth?: number; // default: 1
    length?: number; // default: 10
  }
}

pie: {
  ...
  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
  }
}

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

nodeClick = (params: NodeClickParams) => any;

interface NodeClickParams {
  type: 'nodeClick';
  series: PieSeries;
  datum: any;
  angleKey: string;
  radiusKey?: string;
}

Next Up

Continue to the next section to learn about layout.