Blog Help & Support Contact About Login

 Show Nav

Bubble Pie Charts

Overview

A bubble pie chart is a combination of both bubble chart and pie chart. This chart type allows users to plot their data against an X/Y-axis scale and assign it a bubble size value, and then assign each bubble additional values to represent pie slices. It is a useful way to display data with multiple variables, and our bubble pie charts are highly customizable. You can configure your scales, modify the size and scaling of your bubble pies, style your bubble pie slices, and incorporate value boxes, tooltips, and/or a legend.

Modules Addition

Our bubble pie chart type requires additional modules to properly load. Before getting started, you'll need to add a modules script to your script reference and a load modules method to wrap around your render method(s).

1. Modules Script

In the document <head>, add the following script to your script reference, enclosed in <script> tags:

zingchart.MODULESDIR = "/path/to/modules/folder"

Or, if using CDN:

zingchart.MODULESDIR = "https://cdn.zignchart.com/modules"

Note: If a specific ZingChart version is included in your core script, you should also specify the same version in your modules script, e.g., "https://cdn.zingchart.com/2.1.4/modules".

2. Load Modules Method

Next, in the document <body>, add a load modules method that will call your specific chart type. This load modules method will wrap around your render method(s) like so:

zingchart.loadModules('bubblepie', function(){      //Load Modules Method

zingchart.render({      //Render Method
  id : 'myChart1', 
  data : myConfig1, 
  height: 400, 
  width: 600 
});
zingchart.render({      //Render Method
  id : 'myChart2', 
  data : myConfig2, 
  height: 400, 
  width: 600 
});
 
});

See our ZingChart Modules page for more detailed information on modules.

Bubble Pie Chart Type

Get started by specifying your chart type. In your chart object, add a "type" attribute. Set the value to "bubble-pie". A basic chart with five bubble pies looks like this:

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bubble-pie",   //Specify your chart type.
  "plot": {
    "values": [         //(1) Provide your bubble chart data.
      [3,3,34],                   //for bubble-pie 1
      [5,12,101],                 //for bubble-pie 2
      [9,7,59],                   //for bubble-pie 3
      [11,5,15],                  //for bubble-pie 4
      [14,14,30]                  //for bubble-pie 5
    ]
  },
  "series": [             //(2) Provide your pie chart data.
    {"data-v": [15,37,7,3,14]},     //slice1
    {"data-v": [13,34,21,7,8]},     //slice2
    {"data-v": [6,30,31,5,8]},      //slice3
    {"data-v": [5,29,null,3,13]},   //slice4
    {"data-v": [3,25,19,3,null]}    //slice5
  ]
}

Bubble and Pie Values Data

Providing the data for your bubble pie chart is a two-step process. First, you have to provide the bubble chart portion (x- and y-axis coordinates and bubble size values). Second, you have to provide the pie chart portion (pie slice values for each bubble pie).

1. Bubble Chart portion

Your bubble chart data will be placed in the "plot" object. Create a "values" array. Provide your data in the following format:

"plot": {
  "values": [
    [x1, y1, size1],    //for bubblepie1
    [x2, y2, size2],    //for bubblepie2
    [x3, y3, size3],    //for bubblepie3
    ..., 
    [xN, yN, sizeN]     //for bubblepieN
  ]
}

2. Pie Chart portion

Your pie chart data will be placed in the "series" array. Create a "data-v" array for each pie slice. Provide your data in the following format:

Note: This chart type supports null values for missing or unavailable pie slices. See our bubble pie chart example above.

"series": [
  {"data-v": [slice1-bubblepie1, slice1-bubblepie2, ..., slice1-bubblepieN]}, //for slice1
  {"data-v": [slice2-bubblepie1, slice2-bubblepie2, ..., slice2-bubblepieN]}, //for slice2
  {"data-v": [slice3-bubblepie1, slice3-bubblepie2, ..., slice3-bubblepieN]}, //for slice3
  ...,
  {"data-v": [sliceN-bubblepie1, sliceN-bubblepie2, ..., sliceN-bubblepieN]}  //for sliceN
]

Chart-Specific Properties

Once you've set up your bubble pie chart's data, you can provide your corresponding text and adjust the sizing and/or scaling of your bubble pies.

Bubble and Pie Text

Provide the text you want for the bubble chart portion and pie chart portion of your bubble pies. For the bubble chart portion, add a "data-bubble" array to your "plot" object. Provide the text for each of your bubbles (bubblepie1, bubblepie2, bubblepie3, etc.) inside the array, contained in quotes and separated by a comma. For the pie chart portion, you'll provide text for each of your slice types (slice1, slice2, slice3, etc.). In your "series" array, add a "data-pie" attribute to each of your series objects. Provide your pie slice text.

Note: This text can later be recalled with the %data-bubble (bubble pie text) and %data-pie (pie slice text) tokens when working with value boxes and tooltips, discussed further below or as seen in the bubble pie chart example below. See our Custom Tokens page.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bubble-pie",
  "plot": {
    "values": [
      [3,3,34],
      [5,12,101],
      [9,7,59],
      [11,5,15],
      [14,14,30]
    ],
    "data-bubble": ["Sam D.","Oscar C.","Lisa A.","Selma J.","Sumati F."], //Text for Bubble Pies.
    "tooltip": {
      "text": "Pie Text:<br>%data-pie"
    }
  },
  "series": [
    {
      "data-v": [15,37,7,3,14],
      "data-pie": "Apple",                        //Text for Pie Slice 1.
      "value-box": {
        "text": "Bubble Text:<br>%data-bubble",
        "placement": "top"
      }
    },
    {
      "data-v": [13,34,21,7,8],
      "data-pie": "Pumpkin"                       //Text for Pie Slice 2.
    },
    {
      "data-v": [6,30,31,5,8],
      "data-pie": "Cherry"                        //Text for Pie Slice 3.
    },
    {
      "data-v": [5,29,null,3,13],
      "data-pie": "Chocolate"                     //Text for Pie Slice 4.
    },
    {
      "data-v": [3,25,19,3,null],
      "data-pie": "Pecan"                         //Text for Pie Slice 5.
    }
  ]
}

Minimum and Maximum Size

You can modify the appearance of your bubble pie chart by changing the minimum and/or maximum size of your bubbles. Add the "min-size" and/or "max-size" attributes to your "plot" object. Provide a pixel value.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "graphset": [
    {
      "type": "bubble-pie",
      "title": {
        "text": "Min/Max: 20 and 45"
      },
      "height": "100%",
      "width": "50%",
      "x": "0%",
      "y": "0%",
      "plot": {
        "values": [
          [3,3,34],
          [5,12,101],
          [9,7,59],
          [11,5,15],
          [14,14,30]
        ],
        "min-size": 20,
        "max-size": 45
      },
      "series": [
        {"data-v": [15,37,7,3,14]},
        {"data-v": [13,34,21,7,8]},
        {"data-v": [6,30,31,5,8]},
        {"data-v": [5,29,null,3,13]},
        {"data-v": [3,25,19,3,null]}
      ]
    },
    {
      "type": "bubble-pie",
      "title": {
        "text": "Min/Max: 5 and 15"
      },
      "height": "100%",
      "width": "50%",
      "x": "50%",
      "y": "0%",
      "plot": {
        "values": [
          [3,3,34],
          [5,12,101],
          [9,7,59],
          [11,5,15],
          [14,14,30]
        ],
        "min-size": 5,
        "max-size": 15
      },
      "series": [
        {"data-v": [15,37,7,3,14]},
        {"data-v": [13,34,21,7,8]},
        {"data-v": [6,30,31,5,8]},
        {"data-v": [5,29,null,3,13]},
        {"data-v": [3,25,19,3,null]}
      ]
    }
  ]
}

Scaling

Adjust the scaling of your bubble pies with the "scaling" attribute. Depending on your data range and the number of data values, it can make a difference in how your bubble pies appear in relation to each other. Place the attribute in your "plot" object. Provide a value of "area" (default) or "radius" (the square root of area).

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "graphset": [
    {
      "type": "bubble-pie",
      "title": {
        "text": "Scaling set to 'area'"
      },
      "height": "100%",
      "width": "50%",
      "x": "0%",
      "y": "0%",
      "plot": {
        "values": [
          [3,3,34],
          [5,12,101],
          [9,7,59],
          [11,5,15],
          [14,14,30]
        ],
        "scaling": "area"
      },
      "series": [
        {"data-v": [15,37,7,3,14]},
        {"data-v": [13,34,21,7,8]},
        {"data-v": [6,30,31,5,8]},
        {"data-v": [5,29,null,3,13]},
        {"data-v": [3,25,19,3,null]}
      ]
    },
    {
      "type": "bubble-pie",
      "title": {
        "text": "Scaling set to 'radius'"
      },
      "height": "100%",
      "width": "50%",
      "x": "50%",
      "y": "0%",
      "plot": {
        "values": [
          [3,3,34],
          [5,12,101],
          [9,7,59],
          [11,5,15],
          [14,14,30]
        ],
        "scaling": "radius"
      },
      "series": [
        {"data-v": [15,37,7,3,14]},
        {"data-v": [13,34,21,7,8]},
        {"data-v": [6,30,31,5,8]},
        {"data-v": [5,29,null,3,13]},
        {"data-v": [3,25,19,3,null]}
      ]
    }
  ]
}

Size Factor

You can also use the "size-factor" attribute to change the size of your bubble pies. Add the attribute to your "plot" object. Provide a value in relation to 1. Values greater than 1 will increase your bubble size and values less than 1 will decrease it. Note that decimal values should be preceded by a zero.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "graphset": [
    {
      "type": "bubble-pie",
      "title": {
        "text": "Size Factor set to 0.3"
      },
      "height": "100%",
      "width": "50%",
      "x": "0%",
      "y": "0%",
      "plot": {
        "values": [
          [3,3,34],
          [5,12,101],
          [9,7,59],
          [11,5,15],
          [14,14,30]
        ],
        "size-factor": 0.3
      },
      "series": [
        {"data-v": [15,37,7,3,14]},
        {"data-v": [13,34,21,7,8]},
        {"data-v": [6,30,31,5,8]},
        {"data-v": [5,29,null,3,13]},
        {"data-v": [3,25,19,3,null]}
      ]
    },
    {
      "type": "bubble-pie",
      "title": {
        "text": "Size Factor set to 1.3"
      },
      "height": "100%",
      "width": "50%",
      "x": "50%",
      "y": "0%",
      "plot": {
        "values": [
          [3,3,34],
          [5,12,101],
          [9,7,59],
          [11,5,15],
          [14,14,30]
        ],
        "size-factor": 1.3
      },
      "series": [
        {"data-v": [15,37,7,3,14]},
        {"data-v": [13,34,21,7,8]},
        {"data-v": [6,30,31,5,8]},
        {"data-v": [5,29,null,3,13]},
        {"data-v": [3,25,19,3,null]}
      ]
    }
  ]
}

Further Customization

Further customize your bubble pie chart by configuring your scales, styling your bubble pie slices, and incorporating value boxes, tooltips, and/or a legend.

Scale Configuration

You can configure your bubble pie chart's scales. This includes specifying your minimum, maximum, and step scale values with the "values" attribute, providing scale labels with the "labels" array (see scale-x in the below chart), and formatting your scale values with the "format" attribute (see scale-y). You can style your scale title, axis lines, tick marks, plot lines, and more. See our X/Y-Axis Scales Tutorial for more comprehensive information. Our JSON Attribute/Syntax pages for scale-x and scale-y offer a list of available attributes.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bubble-pie",
  "scale-x": {
    "values": "0:16:4", //Min, Max, and Step
    "label": {          //Scale Title
      "text": "X-Axis Title",
      "font-color": "#FF7CC2"
    },
    "labels": ["Zero","Four","Eight","Twelve","Sixteen"],   //Scale Labels
    "item": {           //Scale Label Styling
      "font-color": "#FFE000"
    },
    "line-color": "#FF0087",    //Axis Lines
    "tick": {           //Tick Marks
      "line-color": "#14B8CC"
    },
    "guide": {          //Plot Lines
      "line-color": "#09A0B2"
    }
  },
  "scale-y": {
    "values": "0:16:4", //Min, Max, and Step
    "label": {          //Scale Title
      "text": "Y-Axis Title",
      "font-color": "#09A0B2"
    },
    "format": "$%v",    //Scale Value Formatting
    "item": {           //Scale Label Styling
      "font-color": "#14B8CC"
    },
    "line-color": "#FF0087",    //Axis Lines
    "tick": {           //Tick Marks
      "line-color": "#FFE000"
    },
    "guide": {          //Plot Lines
      "line-color": "#FF7CC2"
    }
  },
  "plot": {
    "values": [
      [3,3,34],
      [5,12,101],
      [9,7,59],
      [11,5,15],
      [14,14,30]
    ],
    "data-bubble": ["Sam D.","Oscar C.","Lisa A.","Selma J.","Sumati F."]
  },
  "series": [
    {
      "data-v": [15,37,7,3,14],
      "data-pie": "Apple"
    },
    {
      "data-v": [13,34,21,7,8],
      "data-pie": "Pumpkin"
    },
    {
      "data-v": [6,30,31,5,8],
      "data-pie": "Cherry"
    },
    {
      "data-v": [5,29,null,3,13],
      "data-pie": "Chocolate"
    },
    {
      "data-v": [3,25,19,3,null],
      "data-pie": "Pecan"
    }
  ]
}

Pie Slice Styling

When styling your pie slices, use "marker" (for pie slices) and "hover-marker" (how they appear when a user hovers over a specific slice) objects to make your changes. Similar to how bubble charts style their markers, you can place these objects in the "plot" object for global changes and in a specific series object for local changes. You can specify the color of your pie slices with the "background-color" attribute, as well as use attributes such as "alpha", "border-color", "border-width", and "line-style" for additional styling. See the Marker and Hover-Marker JSON Attributes/Syntax pages for further attribute options.

Note: Remember that in your series array, each "data-v" array corresponds to slice1 across all your bubble pies, slice2 across all your bubble pies, and so on.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bubble-pie",
  "plot": {
    "values": [
      [3,3,34],
      [5,12,101],
      [9,7,59],
      [11,5,15],
      [14,14,30]
    ],
    "data-bubble": ["Sam D.","Oscar C.","Lisa A.","Selma J.","Sumati F."],
    "marker": {
      "border-color": "gray",
      "border-width": 1,
      "line-style": "dotted"
    },
    "hover-marker": {
      "background-color": "blue",
      "border-color": "pink",
      "border-width": 2,
      "line-style": "dashed"
    }
  },
  "scale-x": {
    "values": "0:16:4"
  },
  "scale-y": {
    "values": "0:16:4"
  },
  "series": [
    {
      "data-v": [15,37,7,3,14],
      "data-pie": "Apple",
      "marker": {
        "background-color": "#FF7CC2"
      }
    },
    {
      "data-v": [13,34,21,7,8],
      "data-pie": "Pumpkin",
      "marker": {
        "background-color": "#FFE000"
      }
    },
    {
      "data-v": [6,30,31,5,8],
      "data-pie": "Cherry",
      "marker": {
        "background-color": "#FF0087"
      }
    },
    {
      "data-v": [5,29,null,3,13],
      "data-pie": "Chocolate",
      "marker": {
        "background-color": "#14B8CC"
      }
    },
    {
      "data-v": [3,25,19,3,null],
      "data-pie": "Pecan",
      "marker": {
        "background-color": "#09A0B2"
      }
    }
  ]
}

Value Boxes

To include value boxes in your bubble pie chart, create a "value-box" object. With this chart type, make sure to add the object to your first series object. (Do not add it to your "plot" object. This will cause value boxes for each pie slice to appear, creating overlapping value boxes.) You can specify your value box text with the "text" attribute. Provide your choice of text and tokens inside a string. Relevant tokens to use in this section include %data-bubble (to show bubble pie text) and %node-size-value (to show bubble pie size). To specify where your value boxes are placed in relation to your bubble pies, add a "placement" attribute. Value options are "over" (default), "top", "bottom", "left", and "right". You can also style your value box text ("font-color", "font-weight", "font-style"). For a list of available attributes, see our Value Boxes JSON Attributes/Syntax page.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bubble-pie",
  "plot": {
    "values": [
      [3,3,34],
      [5,12,101],
      [9,7,59],
      [11,5,15],
      [14,14,30]
    ],
    "data-bubble": ["Sam D.","Oscar C.","Lisa A.","Selma J.","Sumati F."],
    "marker": {
      "border-color": "gray",
      "border-width": 1,
      "line-style": "dotted"
    },
    "hover-marker": {
      "background-color": "blue",
      "border-color": "pink",
      "border-width": 2,
      "line-style": "dashed"
    }
  },
  "scale-x": {
    "values": "0:16:4"
  },
  "scale-y": {
    "values": "0:16:4"
  },
  "series": [
    {
      "data-v": [15,37,7,3,14],
      "data-pie": "Apple",
      "marker": {
        "background-color": "#FF7CC2"
      },
      "value-box": {  //Place your value-box object in your first series object.
        "text": "%data-bubble<br>baked %node-size-value pies!",
        "placement": "top", //"over" (default), "top", "bottom", "left", or "right".
        "font-color": "black",
        "font-weight": "normal",
        "font-style": "italic"
      }
    },
    {
      "data-v": [13,34,21,7,8],
      "data-pie": "Pumpkin",
      "marker": {
        "background-color": "#FFE000"
      }
    },
    {
      "data-v": [6,30,31,5,8],
      "data-pie": "Cherry",
      "marker": {
        "background-color": "#FF0087"
      }
    },
    {
      "data-v": [5,29,null,3,13],
      "data-pie": "Chocolate",
      "marker": {
        "background-color": "#14B8CC"
      }
    },
    {
      "data-v": [3,25,19,3,null],
      "data-pie": "Pecan",
      "marker": {
        "background-color": "#09A0B2"
      }
    }
  ]
}

Tooltips

By default, tooltip text appears in the following format: "%t: %data-v (%data-pv%)". You can change this by placing a "tooltip" object in your "plot" object. Add a "text" attribute, and then provide your desired combination of text and tokens inside a string. Relevant tokens to use in this section include %data-pie (to show pie slice text), %data-v (to show pie slice values), and %data-pv (to show pie slice percentages). Once you've decided your tooltip text, you can apply styling attributes such as "font-color", "background-color", "border-color", "border-width", and "line-style". For more tooltip styling options, see our Tooltips JSON Attributes/Syntax page.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bubble-pie",
  "plot": {
    "values": [
      [3,3,34],
      [5,12,101],
      [9,7,59],
      [11,5,15],
      [14,14,30]
    ],
    "data-bubble": ["Sam D.","Oscar C.","Lisa A.","Selma J.","Sumati F."],
    "marker": {
      "border-color": "gray",
      "border-width": 1,
      "line-style": "dotted"
    },
    "hover-marker": {
      "background-color": "blue",
      "border-color": "pink",
      "border-width": 2,
      "line-style": "dashed"
    },
    "tooltip": {    //Place your "tooltip" object in your "plot" object.
      "text": "And of those %node-size-value pies, %data-v (or %data-pv%) were %data-pie pies!",
      "font-color": "blue",
      "font-family": "Georgia, serif",
      "background-color": "white",
      "border-color": "pink",
      "border-width": 2,
      "line-style": "dashed"
    }
  },
  "scale-x": {
    "values": "0:16:4"
  },
  "scale-y": {
    "values": "0:16:4"
  },
  "series": [
    {
      "data-v": [15,37,7,3,14],
      "data-pie": "Apple",
      "marker": {
        "background-color": "#FF7CC2"
      },
      "value-box": {
        "text": "%data-bubble<br>baked %node-size-value pies!",
        "placement": "top",
        "font-color": "black",
        "font-weight": "normal",
        "font-style": "italic"
      }
    },
    {
      "data-v": [13,34,21,7,8],
      "data-pie": "Pumpkin",
      "marker": {
        "background-color": "#FFE000"
      }
    },
    {
      "data-v": [6,30,31,5,8],
      "data-pie": "Cherry",
      "marker": {
        "background-color": "#FF0087"
      }
    },
    {
      "data-v": [5,29,null,3,13],
      "data-pie": "Chocolate",
      "marker": {
        "background-color": "#14B8CC"
      }
    },
    {
      "data-v": [3,25,19,3,null],
      "data-pie": "Pecan",
      "marker": {
        "background-color": "#09A0B2"
      }
    }
  ]
}

Legend

Legends allow users to better understand and interact with your chart data. To include one in your bubble pie chart, add a "legend" object. Make sure that your pie slice text properly displays by inserting an "item" object. Add a "text" attribute, and then provide a value of "%data-pie". You can specify where your legend is placed by using the "align" ("left", "center", or "right") and "vertical-align" ("top", "middle", or "bottom") attributes. See our Legend Tutorial or Legend JSON Attributes/Syntax page for further information on how to customize the layout and look of your bubble pie chart's legend.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "bubble-pie",
  "legend": {
    "item": {
      "text":"%data-pie"
    },
    "align": "right",
    "vertical-align": "middle"
  },
  "plot": {
    "values": [
      [3,3,34],
      [5,12,101],
      [9,7,59],
      [11,5,15],
      [14,14,30]
    ],
    "data-bubble": ["Sam D.","Oscar C.","Lisa A.","Selma J.","Sumati F."],
    "marker": {
      "border-color": "gray",
      "border-width": 1,
      "line-style": "dotted"
    },
    "hover-marker": {
      "background-color": "blue",
      "border-color": "pink",
      "border-width": 2,
      "line-style": "dashed"
    },
    "tooltip": {
      "text": "And of those %node-size-value pies, %data-v (or %data-pv%) were %data-pie pies!",
      "font-color": "blue",
      "font-family": "Georgia, serif",
      "background-color": "white",
      "border-color": "pink",
      "border-width": 2,
      "line-style": "dashed"
    }
  },
  "scale-x": {
    "values": "0:16:4"
  },
  "scale-y": {
    "values": "0:16:4"
  },
  "series": [
    {
      "data-v": [15,37,7,3,14],
      "data-pie": "Apple",
      "marker": {
        "background-color": "#FF7CC2"
      },
      "value-box": {
        "text": "%data-bubble<br>baked %node-size-value pies!",
        "placement": "top",
        "font-color": "black",
        "font-weight": "normal",
        "font-style": "italic"
      }
    },
    {
      "data-v": [13,34,21,7,8],
      "data-pie": "Pumpkin",
      "marker": {
        "background-color": "#FFE000"
      }
    },
    {
      "data-v": [6,30,31,5,8],
      "data-pie": "Cherry",
      "marker": {
        "background-color": "#FF0087"
      }
    },
    {
      "data-v": [5,29,null,3,13],
      "data-pie": "Chocolate",
      "marker": {
        "background-color": "#14B8CC"
      }
    },
    {
      "data-v": [3,25,19,3,null],
      "data-pie": "Pecan",
      "marker": {
        "background-color": "#09A0B2"
      }
    }
  ]
}

Summary

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