Blog Help & Support Contact About Login

 Show Nav

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

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

 
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

 
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

{
  "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:

Token Description
%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
%npv
The percentage value of the pie slice (node) relative to the entire pie (sum of all nodes).
%node-value
%v
The pie slice (node) value.
%plot-description The description of the current plot, pulled from the "description" attribute in the plot/series object.
%plot-text
%t
The 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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

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.