Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

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.

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:

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.

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.

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:

API Reference

angleKey *
string
The key to use to retrieve angle values from the data.
angleName
string
A human-readable description of the angle values. If supplied, this will be passed to the tooltip renderer as one of the parameters.
labelKey *
string
The key to use to retrieve label values from the data.
labelName
string
A human-readable description of the label values. If supplied, this will be passed to the tooltip renderer as one of the parameters.
radiusKey
string
The key to use to retrieve radius values from the data.
radiusName
string
A human-readable description of the radius values. If supplied, this will be passed to the tooltip renderer as one of the parameters.
data *
object[]
The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
visible
boolean
Whether or not to display the series.
Default: true
showInLegend
boolean
Whether or not to include the series in the legend.
Default: true
cursor
string
The cursor to use for hovered pie slices. This config is identical to the CSS cursor property.
Default: 'default'
tooltip
Series-specific tooltip configuration.
See tooltip for more details.
lineDash
number[]
Defines how the pie sector strokes are rendered. Every number in the array specifies the length in pixels of alternating dashes and gaps. For example, [6, 3] means dashes with a length of 6 pixels with gaps between of 3 pixels.
Default: []
lineDashOffset
number
The initial offset of the dashed line in pixels.
Default: 0
rotation
number
The rotation of the pie series in degrees.
Default: 0
innerRadiusOffset
number
The offset in pixels of the inner radius of the series. Used to construct doughnut charts. If this is not given, or a value of zero is given, a pie chart will be rendered.
Default: 0
outerRadiusOffset
number
The offset in pixels of the outer radius of the series. Used to construct doughnut charts.
Default: 0
title
Configuration for the series title.
See title for more details.
fills
string[]
The colours to cycle through for the fills of the segments.
Default: ['#f3622d', '#fba71b', '#57b757', '#41a9c9', '#4258c9', '#9a42c8', '#c84164', '#888888']
fillOpacity
number
The opacity of the fill for the segments.
Default: 1
strokes
string[]
The colours to cycle through for the strokes of the segments.
Default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f']
strokeOpacity
number
The opacity of the stroke for the segments.
Default: 1
strokeWidth
number
The width in pixels of the stroke for the segments.
Default: 1
highlightStyle
Configuration for pie series sector highlighting when a pie sector or a corresponding legend item is hovered over.
See highlightStyle for more details.
label
Configuration for the labels used for the segments.
See label for more details.
callout
Configuration for the callouts used with the labels for the segments.
See callout for more details.
shadow
Configuration for the shadow used behind the chart series.
See shadow for more details.
listeners
A map of event names to event listeners.
See listeners for more details.

tooltip

pie > tooltip

Series-specific tooltip configuration.

pie: {
  ...
  tooltip: {
    enabled?: boolean; // default: true
    renderer?: Function;
  }
}
enabled
boolean
Whether or not to show tooltips when the series are hovered over.
Default: true
renderer
Function
Function used to create the content for tooltips.
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;
}

title

pie > title

Configuration for the series title.

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'
  }
}
enabled
boolean
Whether or not the title should be shown.
Default: true
text
string
The text to show in the title.
color
string
The colour to use for the title.
Default: '#000000'
fontStyle
string
The font style to use for the title.
Default: 'normal'
Options: 'normal', 'italic', 'oblique'
fontWeight
string
The font weight to use for the title.
Default: 'normal'
Options: 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'
fontSize
number
The font size in pixels to use for the title.
Default: 10
fontFamily
string
The font family to use for the title.
Default: 'Verdana, sans-serif'

highlightStyle

pie > highlightStyle

Configuration for pie series sector highlighting when a pie sector or a corresponding legend item is hovered over.

pie: {
  ...
  highlightStyle: {
    item?: Item;
    series?: Series;
  }
}
item
Highlight style used for an individual sectors when tapped or hovered over.
See item for more details.
series
Highlight style used for whole series when one of its sectors is tapped or hovered over.
See series for more details.

item

Highlight style used for an individual sectors when tapped or hovered over.

pie: {
  ...
  highlightStyle: {
    ...
    item: {
      fill?: string; // default: 'yellow'
      stroke?: string;
      strokeWidth?: number;
    }
  }
}
fill
string
The fill colour of a sector when tapped or hovered over. Use undefined for no highlight.
Default: 'yellow'
stroke
string
The stroke colour of a sector when tapped or hovered over. Use undefined for no highlight.
strokeWidth
number
The stroke width of a sector when tapped or hovered over. Use undefined for no highlight.

series

pie > highlightStyle > series

Highlight style used for whole series when one of its sectors is tapped or hovered over.

pie: {
  ...
  highlightStyle: {
    ...
    series: {
      strokeWidth?: number;
      dimOpacity?: number;
    }
  }
}
strokeWidth
number
The stroke width of the rest of the sectors when one of the sectors in this series is tapped or hovered over. Use undefined for no highlight.
dimOpacity
number
The opacity of the whole series (including labels, if any) when another chart series is highlighted by hovering a series item or a legend item. Use undefined or 1 for no dimming.

label

pie > label

Configuration for the labels used for the segments.

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;
  }
}
enabled
boolean
Whether or not the labels should be shown.
Default: true
color
string
The colour to use for the labels.
Default: '#000000'
fontStyle
string
The font style to use for the labels.
Default: 'normal'
Options: 'normal', 'italic', 'oblique'
fontWeight
string
The font weight to use for the labels.
Default: 'normal'
Options: 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '700', '800', '900'
fontSize
number
The font size in pixels to use for the labels.
Default: 12
fontFamily
string
The font family to use for the labels.
Default: 'Verdana, sans-serif'
offset
number
Distance in pixels between the callout line and the label text.
Default: 3
minAngle
number
Minimum angle in degrees required for a segment to show a label.
Default: 20
formatter
Function
Function used to turn 'labelKey' values into text to be displayed next to each pie sector. Be default the values are simply stringified.
formatter = (
    params: FormatterParams
) => string;

interface FormatterParams {
  value: string;
}

callout

pie > callout

Configuration for the callouts used with the labels for the segments.

pie: {
  ...
  callout: {
    colors?: string[]; // default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f']
    strokeWidth?: number; // default: 1
    length?: number; // default: 10
  }
}
colors
string[]
The colours to cycle through for the strokes of the callouts.
Default: ['#aa4520', '#b07513', '#3d803d', '#2d768d', '#2e3e8d', '#6c2e8c', '#8c2d46', '#5f5f5f']
strokeWidth
number
The width in pixels of the stroke for callout lines.
Default: 1
length
number
The length in pixels of the callout lines.
Default: 10

shadow

pie > shadow

Configuration for the shadow used behind the chart series.

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
  }
}
enabled
boolean
Whether or not the shadow is visible.
Default: true
color
string
The colour of the shadow.
Default: 'rgba(0, 0, 0, 0.5)'
xOffset
number
The horizontal offset in pixels for the shadow.
Default: 0
yOffset
number
The vertical offset in pixels for the shadow.
Default: 0
blur
number
The radius of the shadow's blur, given in pixels.
Default: 5

listeners

pie > listeners

A map of event names to event listeners.

pie: {
  ...
  listeners: {
    nodeClick?: Function;
  }
}
nodeClick
Function
The listener to call when a pie slice is clicked.
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 treemap.