Bubble Pack Charts

Overview

A bubble pack chart or bubble pack graph is used to show a relation between data without using axes. This chart type's major advantage is that the bubbles can represent proportional realtionships in data. View our Bubble Pack Chart Gallery for further inspiration!

Type and Options

ZingChart bubble pack charts use the type attribute and the options object. In your chart object, add a type attribute and set the value to bubble-pack. Next, create an options object. Without further modification, here is how the default bubble pack chart appears.

https://app.zingsoft.com/demos/embed/COCMCKD1
https://app.zingsoft.com/demos/embed/COCMCKD1
{
	type: 'bubble-pack',
	plotarea: {
	  margin: 10
	},
	series: chartData
}

Series Data

Provide your chart data in the series array. In the series array, create an object and assign a value to the id, parent, name, value, and group attributes. id is the bubble id, parent specifies the parent bubble id, name is the name of the bubble, and value is the numerical value of the bubble object being added.

series: [
  {id: 'theworld', parent: '', name: 'The World', group: ''},
  {id: 'denmark', parent: 'theworld', name: 'Denmark', value: 5733551, group: 'europe'},
  {id: 'finland', parent: 'theworld', name: 'Finland', value: 5523231, group: 'europe'},
  {id: 'norway', parent: 'theworld', name: 'Norway', value: 5305383, group: 'europe'},
  ...,
  {id: 'someId', parent: 'someParentId', name: 'someName', value: someValue, group: 'someGroup'}
]

Options Configuration

Use the options object to configure the bubble pack chart with the following properties.

format

The format object is used to configure how data is displayed inside of the bubbles. Within the format object use these attributes to change the configuration, short, decimals, decimalsSeparator, and thousandsSeparator. Setting short: true writes the bubble values in shorthand. decimals specifies how many decimal places of the bubble value will be displayed. decimalsSeparator and thousandsSeparator specify the separator used for the decimal position and the thousands position.

Demo with short: true

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

{
	type: 'bubble-pack',
	options: {
	  padding: 2,
	  minSize: 3,
	  groupFilter: ['europe'],
	  format: {
	    short: true,
	    decimals: 1,
	    decimalsSeparator: '.',
	    thousandsSeparator: ','
	  }
	},
	series: chartData
}

Demo with short: false

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

{
	type: 'bubble-pack',
	options: {
	  padding: 2,
	  minSize: 3,
	  groupFilter: ['europe'],
	  format: {
	    short: false,
	    decimals: 1,
	    decimalsSeparator: '.',
	    thousandsSeparator: ','
	  }
	},
	series: chartData
}

groupFilter

The groupFilter array lets you choose which groups to display on the chart. The data may contain multiple groups, groupFilter allows you to choose only the ones you want to display. Just add the group names as strings inside the groupFilter array.

Demo with groupFilter: ['southamerica']

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

{
	type: 'bubble-pack',
	options: {
	  padding: 2,
	  minSize: 3,
	  groupFilter: ['southamerica'],
	  format: {
	    short: false,
	    decimals: 1,
	    decimalsSeparator: '.',
	    thousandsSeparator: ','
	  }
	},
	series: chartData
}

Demo with groupFilter: ['southamerica', 'europe']

https://app.zingsoft.com/demos/embed/3ZG9CRWI
https://app.zingsoft.com/demos/embed/3ZG9CRWI

{
	type: 'bubble-pack',
	options: {
	  padding: 2,
	  minSize: 3,
	  groupFilter: ['southamerica', 'europe'],
	  format: {
	    short: false,
	    decimals: 1,
	    decimalsSeparator: '.',
	    thousandsSeparator: ','
	  }
	},
	series: chartData
}

maxItems

Use maxItems to display a maximum number of bubbles in a bubble pack group.

https://app.zingsoft.com/demos/embed/9UEJF82C
https://app.zingsoft.com/demos/embed/9UEJF82C

{
    type: 'bubble-pack',
    plotarea: {
      margin: 10
    },
    options: {
      padding: 2,
      minSize: 3,
      maxItems: 5,
      groupFilter: ['europe'],
      format: {
        short: true,
        decimals: 1,
        decimalsSeparator: '.',
        thousandsSeparator: ','
      }
    },
    series: chartData
}

minSize

Use minSize to display bubbles with a minimum pixel size.

https://app.zingsoft.com/demos/embed/16YJYDJ5
https://app.zingsoft.com/demos/embed/16YJYDJ5

{
    type: 'bubble-pack',
    plotarea: {
      margin: 10
    },
    options: {
      padding: '2px',
      minSize: '30px',
      groupFilter: ['europe'],
      format: {
        short: true,
        decimals: 1,
        decimalsSeparator: '.',
        thousandsSeparator: ','
      }
    },
    series: chartData
}

padding

Use padding to add padding around the bubbles in the chart.

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

{
    type: 'bubble-pack',
    plotarea: {
      margin: 10
    },
    options: {
      padding: '15px',
      minSize: '5px',
      groupFilter: ['europe'],
      format: {
        short: true,
        decimals: 1,
        decimalsSeparator: '.',
        thousandsSeparator: ','
      }
    },
    series: chartData
}

Summary

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