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",
}
https://app.zingsoft.com/demos/embed/KRJK4JLB
https://app.zingsoft.com/demos/embed/KRJK4JLB

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%"
  },
}
https://app.zingsoft.com/demos/embed/12UCV6FS
https://app.zingsoft.com/demos/embed/12UCV6FS

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).

Note: Our Adding Additional Charts page explains in greater detail how to create a graphset array, as well as how to insert multiple charts throughout your webpage.

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

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]}
]

Note: 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.

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%"
  },
}
https://app.zingsoft.com/demos/embed/ZE0SPQ29
https://app.zingsoft.com/demos/embed/ZE0SPQ29

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
  },
https://app.zingsoft.com/demos/embed/7FS2DI7I
https://app.zingsoft.com/demos/embed/7FS2DI7I

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.

Note: For more styling options, refer to the Plot/Series Styling Tutorial. For a full list of attributes, refer to the plot / series JSON Configuration page

{
  type: "nestedpie",
  plot: {
    alpha:0.8,
    shadow: false,
    'border-width': 1,
    'border-color': "white",
    'slice-start': "30%",
  }
}
https://app.zingsoft.com/demos/embed/RX1II14G
https://app.zingsoft.com/demos/embed/RX1II14G

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

Note: Learn more about tooltips with our Tooltips Tutorial. For more tooltip styling options, see our Tooltips JSON Attributes/Syntax page.

Tooltips

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

Note: Learn more about tooltips with our Tooltips Tutorial. For more tooltip styling options, see our Tooltips JSON Attributes/Syntax page.

{
  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%",
  }
}
https://app.zingsoft.com/demos/embed/V34TJCWW
https://app.zingsoft.com/demos/embed/V34TJCWW

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.

Note: Learn more about value boxes with our Value Boxes Tutorial. For a list of available attributes, see our Value Boxes JSON Attributes/Syntax page.

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

Legend

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

Note: Learn more about legends with our Legend Tutorial. See our Legend JSON Attributes/Syntax page for more information on legend styling and customization.

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

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.

Note: Learn more about adding animation to your chart with our Animation Tutorial.

{
  "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
    },
}
https://app.zingsoft.com/demos/embed/PGFKBTKU
https://app.zingsoft.com/demos/embed/PGFKBTKU

Summary

Have questions about how nested pie charts work? We're happy to help! Email support@zingchart.com or start a chat right here on this page for support.