Nested Pie Charts

Nested Pie Chart Types

You can create a nested pie chart (aka multi-level pie chart), nested donut chart, or nested pie small multiples.

Nested Pie Chart

Specify the chart type by adding a type attribute to the chart object and setting the value to nestedpie. Without further modification, here is how a default nested pie chart appears:

{
  type: "nestedpie",
}

Nested Donut Chart

You can create a nested donut chart by adding a slice-start attribute to the plot object. Specify your desired ring size as a percentage or pixel value.

{
  type: "nestedpie",
  plot: {
    'slice-start': "35%"
  },
}

Small Multiples

You can create nested pie small multiples, aka a trellis chart, by using a layout attribute (to organize the columns and rows) and the graphset array (to contain the charts).

{
  layout: "1x3",
  graphset: [
    {
      type: "nestedpie",
      series: [
        { values: [59,55,30]},
        { values: [60,50,35]},
        { values: [50,40,30]}
      ]
    },
    {
      type: "nestedpie",
      title: {
        text: "Multiple<br>Nested Pies"
      },
      series: [
        { values: [59,55,30]},
        { values: [60,50,35]},
        { values: [50,40,30]}
      ]
    },
    {
      type: "nestedpie",
      series: [
        { values: [59,55,30]},
        { values: [60,50,35]},
        { values: [50,40,30]}
      ]
    }
  ]
}

Data

Provide your nested pie data in the series array. Each values object corresponds to a slice in the pie. As a nested pie chart, each slice can have two or more layers. Assign your values in the following format:

series: [
  { values: [slice1-layer1, slice1-layer2, ..., slice1-layerN]},
  { values: [slice2-layer1, slice2-layer2, ..., slice2-layerN]},
  { values: [slice3-layer1, slice3-layer2, ..., slice3-layerN]},
  ...,
  { values: [sliceN-layer1, sliceN-layer2, ..., sliceN-layerN]}
]

Chart-Specific Properties

You can create a donut hole (ring) and/or insert bands (separations) into your nested pie chart.

Donut Ring Size

Use the slice-start attribute in the plot object to create a hole or ring in your nested pie chart. Provide a percentage or pixel value.

{
  type: "nestedpie",
  plot: {
    'slice-start': "65%"
  },
}

Band Space

Use the band-space attribute in the plot object to insert bands (or separations) between your pie layers. Provide a pixel value.

{
  type: "nestedpie",
  plot: {
    'band-space':15
  },

Band Widths

Use the band-widths attribute in the plot object to set the bands widths. Provide a pixel value.

{
  type: "nestedpie",
  plot: {
    bandWidths: [30, 10, 20, 10, 20]
  },

Further Customization

Once you have your basic chart, you can customize and style it to fit your data visualization needs.

Plot/Series Styling

You can style the backgrounds and borders on your nested pie chart using the background-color, border-width, border-color, line-style, alpha, and other styling attributes.

{
  type: "nestedpie",
  plot: {
    alpha:0.8,
    shadow: false,
    'border-width': 1,
    'border-color': "white",
    'slice-start': "30%",
  }
}

Tokens

Tokens (or string interpolation) are highly useful when customizing nested pie tooltips and value boxes. Commonly used nested pie chart tokens include:

Tooltips

To enable and style tooltips, add a tooltip object in the plot object. Customize the tooltip's text with a text attribute.

{
  plot: {
    tooltip: {
      text: "Ages %t: %v",
      'font-color': "black",
      'font-family': "Georgia",
      'font-size':12,
      'background-color': "white",
      'border-width': 1,
      'border-color': "gray",
      'border-radius': "3px",
      'line-style': "dashdot",
      padding: "10%",
      'text-alpha': 1,
      alpha:0.7
    },
    alpha:0.8,
    shadow: false,
    'border-width': 1,
    'border-color': "white",
    'slice-start': "30%",
  }
}

Value Boxes

To enable and style value boxes, add a value-box object in the plot object. Customize the value box's text with a text attribute.

You can also use rules to create conditions when value boxes appear.

{
  type: "nestedpie",
  plot: {
    'value-box': {
      text: "%data-year",
      'font-color': "white",
      'font-family': "Georgia",
      'font-size':12,
      'font-weight': "normal",
      rules: [
        {
          rule: "%p != 0",
          visible: false
        }
      ]
    },
}

Legend

Include a legend object to enable and style an interactive legend.

{
  type: "nestedpie",
  legend: {
    'border-width': 1,
    'border-color': "gray",
    'border-radius': "5px",
    'line-style': "dashdot",
    header: {
      text: "Ages",
      'font-family': "Georgia",
      'font-size':12,
      'font-color': "purple",
      'font-weight': "normal"
    }
  }
}

Interactive Charts

You can create interactive nested pie charts by utilizing features such as animation.

Animation

Add the animation object to your plot object to create an animated nested pie chart.

{
  "plot": {
    "animation": {
      "on-legend-toggle": true, //set to true to show animation and false to turn off
      "effect": 5,
      "method": 1,
      "sequence": 1,
      "speed": 1
    },
}