Nested Pie Charts

Overview

A nested pie chart or multi-level pie chart allows you to incorporate multiple levels or layers into your pie. Nested pies are a module variation on our standard pie chart type.

Nested Pie Chart Types

You can create a nested 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.

https://app.zingsoft.com/demos/embed/KRJK4JLB
https://app.zingsoft.com/demos/embed/KRJK4JLB
{
  type: "nestedpie",
  title: {
    text: "Nested Pie Chart"
  },
  series: [
    { values: [59,55,30]},
    { values: [60,50,35]},
    { values: [50,40,30]}
  ]
}

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.

https://app.zingsoft.com/demos/embed/12UCV6FS
https://app.zingsoft.com/demos/embed/12UCV6FS
{
  type: "nestedpie",
  title: {
    text: "Nested Donut Chart"
  },
  plot: {
    'slice-start': "35%"
  },
  series: [
    { values: [59,55,30]},
    { values: [60,50,35]},
    { values: [50,40,30]}
  ]
}

Small Multiples

You can create nested pie small multiples, or what is known as a trellis chart, by using a layout attribute (to organize the columns and rows) and the graphset array (to contain the charts). Refer to the Adding Additional Charts Tutorial for more information.

https://app.zingsoft.com/demos/embed/J2BD3IZL
https://app.zingsoft.com/demos/embed/J2BD3IZL
{
  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]}
      ]
    }
  ]
}

Series Data

Provide your nested pie data in the series array. Each values object corresponds to a slice in the pie. But as a nested pie chart, that 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]}
]

Note that you can use zero or null values to represent unavailable data. The difference is that zero values appear with tooltips and null values do not.

Basic Elements

Once you've provided your nested pie type and data, you can further customize the chart.

Chart-Specific

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.

https://app.zingsoft.com/demos/embed/ZE0SPQ29
https://app.zingsoft.com/demos/embed/ZE0SPQ29
{
  type: "nestedpie",
  title: {
    text: "'slice-start' attribute"
  },
  plot: {
    'slice-start': "65%"
  },
  series: [
    { values: [59,55,30,29,25]},
    { values: [60,50,35,31,21]},
    { values: [50,40,30,25,19]},
    { values: [61,59,35,31,16]},
    { values: [65,55,45,35,25]}
  ]
}

Band Space

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

https://app.zingsoft.com/demos/embed/7FS2DI7I
https://app.zingsoft.com/demos/embed/7FS2DI7I
{
  type: "nestedpie",
  title: {
    text: "'band-space' attribute"
  },
  plot: {
    'band-space':15
  },
  series: [
    { values: [59,55,30,29,25]},
    { values: [60,50,35,31,21]},
    { values: [50,40,30,25,19]},
    { values: [61,59,35,31,16]},
    { values: [65,55,45,35,25]}
  ]
}

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. Refer to the Plot/Series Styling Tutorial and the Plot/Series JSON page for further information and a full attribute list.

https://app.zingsoft.com/demos/embed/RX1II14G
https://app.zingsoft.com/demos/embed/RX1II14G
{
  type: "nestedpie",
  title: {
    text: "Nested Pie Chart Styling"
  },
  plot: {
    alpha:0.8,
    shadow: false,
    'border-width': 1,
    'border-color': "white",
    'slice-start': "30%",
  },
  series: [
    {
      values: [59,55,30],
      'background-color': "orange red",
    },
    {
      values: [60,50,35],
      'background-color': "yellow orange"
    },
    {
      values: [50,40,30],
      'background-color': "green blue"
    },
    {
      values: [61,59,35],
      'background-color': "blue purple"
    },
    {
      values: [65,55,45],
      'background-color': "purple red"
    }
  ]
}

Tokens

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

TokenDescription
%data-_____Format for custom tokens. The custom token is defined in the plot or series object as an attribute or array using the "data" prefix, e.g., data-year. It is then recalled in the tooltips or value boxes, e.g., %data-year.
%node-percent-value %npvThe percentage value of the pie slice (node) relative to the entire pie (sum of all nodes).
%node-value %vThe pie slice (node) value.
%plot-descriptionThe description of the current plot, pulled from the description attribute in the plot/series object.
%plot-text %tThe text of the current plot, pulled from the text attribute in the plot/series object.

Refer to the Tokens Tutorial for a full list of available tokens.

Tooltips

Tooltips appear when you hover over the nodes (or pie slices). Create a tooltip object in the plot object to customize the text and styling. Refer to the Tooltips Tutorial and Tooltips JSON page for more information and a full attribute list.

https://app.zingsoft.com/demos/embed/V34TJCWW
https://app.zingsoft.com/demos/embed/V34TJCWW
{
  type: "nestedpie",
  title: {
    text: "Tooltips"
  },
  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%",
  },
  series: [
    {
      values: [59,55,30],
      'background-color': "orange red",
      text: "0-18"
    },
    {
      values: [60,50,35],
      'background-color': "yellow orange",
      text: "19-30"
    },
    {
      values: [50,40,30],
      'background-color': "green blue",
      text: "31-34"
    },
    {
      values: [61,59,35],
      'background-color': "blue purple",
      text: "46-64"
    },
    {
      values: [65,55,45],
      'background-color': "purple red",
      text: "65 and over"
    }
  ]
}

Value Boxes

Value boxes are fixed labels that appear adjacent to the nodes. Create a value-box object in the plot object to customize the text and styling. Refer to the Value Boxes Tutorial and the Value Boxes JSON page for more information and a full attribute list.

https://app.zingsoft.com/demos/embed/E6GZBSF4
https://app.zingsoft.com/demos/embed/E6GZBSF4
{
  type: "nestedpie",
  title: {
    text: "Value Boxes"
  },
  plot: {
    'value-box': {
      text: "%data-year",
      'font-color': "white",
      'font-family': "Georgia",
      'font-size':12,
      'font-weight': "normal",
      rules: [
        {
          rule: "%p != 0",
          visible: false
        }
      ]
    },
    'data-year': [ "2014", "2015", "2016" ],
    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%",
  },
  series: [
    {
      values: [59,55,30],
      'background-color': "orange red",
      text: "0-18"
    },
    {
      values: [60,50,35],
      'background-color': "yellow orange",
      text: "19-30"
    },
    {
      values: [50,40,30],
      'background-color': "green blue",
      text: "31-34"
    },
    {
      values: [61,59,35],
      'background-color': "blue purple",
      text: "46-64"
    },
    {
      values: [65,55,45],
      'background-color': "purple red",
      text: "65 and over"
    }
  ]
}

Legend

Use the legend object to create an interactive legend to accompany your nested pie chart. The legend can help users better understand your chart data. Refer to the Legend Tutorial and the Legend JSON page for more information and a full attribute list.

https://app.zingsoft.com/demos/embed/N8Q7Y1Y8
https://app.zingsoft.com/demos/embed/N8Q7Y1Y8
{
  type: "nestedpie",
  title: {
    text: "Legend"
  },
  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"
    },
    item: {
      'font-color': "black",
      'font-family': "Georgia"
    },
    marker: {
      type: "circle"
    },
    'toggle-action': "remove",
    'minimize': true,
    'draggable': true,
    'drag-handler': "icon",
    'icon': {
      'line-color': "orange"
    }
  },
  plot: {
    'value-box': {
      text: "%data-year",
      'font-color': "white",
      'font-family': "Georgia",
      'font-size':12,
      'font-weight': "normal",
      rules: [
        {
          rule: "%p != 0",
          visible: false
        }
      ]
    },
    'data-year': [ "2014", "2015", "2016" ],
    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%",
  },
  series: [
    {
      values: [59,55,30],
      'background-color': "orange red",
      text: "0-18"
    },
    {
      values: [60,50,35],
      'background-color': "yellow orange",
      text: "19-30"
    },
    {
      values: [50,40,30],
      'background-color': "green blue",
      text: "31-34"
    },
    {
      values: [61,59,35],
      'background-color': "blue purple",
      text: "46-64"
    },
    {
      values: [65,55,45],
      'background-color': "purple red",
      text: "65 and over"
    }
  ]
}

Interactive Charts

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

Animation

Use the animation object to create an animated nested pie chart. Refer to the Animation Tutorial for more information.

https://app.zingsoft.com/demos/embed/PGFKBTKU
https://app.zingsoft.com/demos/embed/PGFKBTKU

Summary

Got a question about how nested pie charts work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.