Bubble Pie Charts

Overview

A bubble pie chart is a combination of both bubble 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:

https://app.zingsoft.com/demos/embed/8NJXGACZ
https://app.zingsoft.com/demos/embed/8NJXGACZ
{
  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.

https://app.zingsoft.com/demos/embed/2XEZG1U9
https://app.zingsoft.com/demos/embed/2XEZG1U9
{
  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.

https://app.zingsoft.com/demos/embed/Y4SL8Z6N
https://app.zingsoft.com/demos/embed/Y4SL8Z6N
{
  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).

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

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

https://app.zingsoft.com/demos/embed/59DE7QW1
https://app.zingsoft.com/demos/embed/59DE7QW1
{
  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.

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

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

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

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