Bubble Charts

Overview

A bubble chart or bubble graph is similar to a scatter chart, but data points are represented by bubbles rather than dots. This chart type's major advantage is that the bubbles can represent a third (or additional) variable. In addition to the standard bubble chart, you can create horizontal bubble charts, and bubble trellis charts. You can size, style, and even create your own custom bubble markers, as well as incorporate value boxes, tooltips, and legends. View our Bubble Chart Gallery for further inspiration!

Bubble Chart Variations

Our bubble chart types include the standard bubble chart, horizontal bubble chart, and trellis bubble chart.

Bubble Chart

Add a type attribute to your chart object. Set the value to bubble. Without further modification, a bubble chart with a single data set looks like this:

https://app.zingsoft.com/demos/embed/QO1EUWHD
https://app.zingsoft.com/demos/embed/QO1EUWHD
{
  type: "bubble",
  series: [
    {
      values: [
        [1,9,59],
        [2,15,15],
        [3,21,30],
        [4,30,5],
        [5,40,35],
        [6,59,21],
        [7,60,25],
        [8,75,85],
        [9,81,87],
        [10,99,12]
      ]
    }
  ]
}

Horizontal Bubble Chart

A horizontal bubble chart is specified by the hbubble value. With this chart type, the axes are switched so that the x-axis runs vertically and the y-axis runs horizontally. They are especially useful when working with our horizontal mixed charts.

https://app.zingsoft.com/demos/embed/YDZ5BFKW
https://app.zingsoft.com/demos/embed/YDZ5BFKW
{
  type: "hbubble",
  series: [
    {
      values: [
        [1,9,59],
        [2,15,15],
        [3,21,30],
        [4,30,5],
        [5,40,35],
        [6,59,21],
        [7,60,25],
        [8,75,85],
        [9,81,87],
        [10,99,12]
      ]
    }
  ]
}

Trellis Bubble Chart

A trellis bubble chart is a series of smaller charts placed into a panel or grid. This chart type is useful for comparing similar or related data sets. First create a graphset array, and then place each of your individual chart objects inside it. You can then size and position each chart to fit appropriately inside the trellis. See our Adding Additional Charts page for more detailed information on this chart type.

Note: To adjust the spacing between your axis lines and plotted data, add the offset-start and offset-end attributes to your scale-x and/or scale-y object(s). Provide a pixel value.

https://app.zingsoft.com/demos/embed/THKULZRK
https://app.zingsoft.com/demos/embed/THKULZRK
{
  graphset: [
    {
      type: "bubble",
      height: "50%",
      width: "50%",
      x: "0%",
      y: "0%",
      'scale-x': {
        'offset-start': 5,
        'offset-end': 5
      },
      'scale-y': {
        'offset-start': 5,
        'offset-end': 5
      },
      plot: {
        'min-size': 5,
        'max-size': 10
      },
      series: [
        {
          values: [
            [0.9,3,18],
            [2.1,13,21],
            [3.5,25,33],
            [4.9,35,54],
            [5.3,41,59],
            [6.5,57,34],
            [7.1,61,17],
            [8.7,70,3],
            [9.2,82,28],
            [9.9,95,76]
          ]
        }
      ]
    },
    {
      type: "bubble",
      height: "50%",
      width: "50%",
      x: "50%",
      y: "0%",
      'scale-x': {
        'offset-start': 5,
        'offset-end': 5
      },
      'scale-y': {
        'offset-start': 5,
        'offset-end': 5
      },
      plot: {
        'min-size': 5,
        'max-size': 10
      },
      series: [
        {
          values: [
            [0.1,9,3],
            [1.8,21,60],
            [1.9,29,9],
            [4.1,33,9],
            [4.5,39,4],
            [6.9,51,3],
            [7.4,64,11],
            [8.9,70,12],
            [9,75,3],
            [9.3,93,29]
          ]
        }
      ]
    },
    {
      type: "bubble",
      height: "50%",
      width: "50%",
      x: "0%",
      y: "50%",
      'scale-x': {
        'offset-start': 5,
        'offset-end': 5
      },
      'scale-y': {
        'offset-start': 5,
        'offset-end': 5
      },
      plot: {
        'min-size': 5,
        'max-size': 10
      },
      series: [
        {
          values: [
            [0.3,11,11],
            [0.9,15,21],
            [1.1,24,54],
            [2.3,29,6],
            [2.9,30,9],
            [3.3,35,59],
            [5.6,67,30],
            [6.9,70,14],
            [7.3,71,7],
            [8.9,90,9]
          ]
        }
      ]
    },
    {
      type: "bubble",
      height: "50%",
      width: "50%",
      x: "50%",
      y: "50%",
      'scale-x': {
        'offset-start': 5,
        'offset-end': 5
      },
      'scale-y': {
        'offset-start': 5,
        'offset-end': 5
      },
      plot: {
        'min-size': 5,
        'max-size': 10
      },
      series: [
        {
          values: [
            [0.5,5,8],
            [1.9,5,3],
            [2.5,10,2],
            [3.1,30,8],
            [6.5,45,87],
            [6.9,74,1],
            [7.2,50,7],
            [7.8,56,20],
            [8,61,3],
            [8.5,71,4]
          ]
        }
      ]
    }
  ]
}

Series Data

Bubble charts support single or multiple data sets, all contained inside the series array. Each data set is configured as an array of arrays, where users specify their x-axis, y-axis, and bubble values in the following format:

{
  values: [
    [x1, y1, bubble1],
    [x2, y2, bubble2],
    ...,
    [xN, yN, bubbleN]
  ]
}

The bubble chart below contains five data sets.

Note: For users working with time-series data, it must be provided in Unix time in milliseconds. You can convert your dates into Unix time with online conversion tools such as Epoch Converter. Our Time-Series Scale section further below has a bubble chart with time-series scale and data example.

https://app.zingsoft.com/demos/embed/3V3OHUQY
https://app.zingsoft.com/demos/embed/3V3OHUQY
{
  type: "bubble",
  series: [
    {
      values: [
        [1,9,59],
        [2,15,15],
        [3,21,30],
        [4,30,5],
        [5,40,35],
        [6,59,21],
        [7,60,25],
        [8,75,85],
        [9,81,87],
        [10,99,12]
      ]
    },
    {
      values: [
        [0.9,3,18],
        [2.1,13,21],
        [3.5,25,33],
        [4.9,35,54],
        [5.3,41,59],
        [6.5,57,34],
        [7.1,61,17],
        [8.7,70,3],
        [9.2,82,28],
        [9.9,95,76]
      ]
    },
    {
      values: [
        [0.1,9,3],
        [1.8,21,60],
        [1.9,29,9],
        [4.1,33,9],
        [4.5,39,4],
        [6.9,51,3],
        [7.4,64,11],
        [8.9,70,12],
        [9,75,3],
        [9.3,93,29]
      ]
    },
    {
      values: [
        [0.3,11,11],
        [0.9,15,21],
        [1.1,24,54],
        [2.3,29,6],
        [2.9,30,9],
        [3.3,35,59],
        [5.6,67,30],
        [6.9,70,14],
        [7.3,71,7],
        [8.9,90,9]
      ]
    },
    {
      values: [
        [0.5,5,8],
        [1.9,5,3],
        [2.5,10,2],
        [3.1,30,8],
        [6.5,45,87],
        [6.9,74,1],
        [7.2,50,7],
        [7.8,56,20],
        [8,61,3],
        [8.5,71,4]
      ]
    }
  ]
}

Chart-Specific Properties

Once you've set up your bubble chart, you can next specify the type, sizing, and scaling of your bubble markers.

Markers

In lieu of the standard bubbles, you can use any of our ZingChart markers or even create your own custom markers to represent your data.

ZingChart Markers

Choose from over thirty different marker types. You can toggle through your bubble marker options in the below chart. Markers can be applied globally to affect all data sets or locally to affect a specific data set. You'll need to create a marker object, insert a type attribute, and specify your marker type. Place the marker object in your plot object for global changes and in your desired series object for local changes.

https://app.zingsoft.com/demos/embed/4I712RU1
https://app.zingsoft.com/demos/embed/4I712RU1
{
  type: "bubble",
  plot: {
    marker: {
      type: "square"    //Specify your bubble marker type.
    }
  },
  series: [
    {
      values: [
        [1,9,59],
        [2,15,15],
        [3,21,30],
        [4,30,5],
        [5,40,35],
        [6,59,21],
        [7,60,25],
        [8,75,85],
        [9,81,87],
        [10,99,12]
      ]
    },
    {
      values: [
        [0.9,3,18],
        [2.1,13,21],
        [3.5,25,33],
        [4.9,35,54],
        [5.3,41,59],
        [6.5,57,34],
        [7.1,61,17],
        [8.7,70,3],
        [9.2,82,28],
        [9.9,95,76]
      ]
    },
    {
      values: [
        [0.1,9,3],
        [1.8,21,60],
        [1.9,29,9],
        [4.1,33,9],
        [4.5,39,4],
        [6.9,51,3],
        [7.4,64,11],
        [8.9,70,12],
        [9,75,3],
        [9.3,93,29]
      ]
    },
    {
      values: [
        [0.3,11,11],
        [0.9,15,21],
        [1.1,24,54],
        [2.3,29,6],
        [2.9,30,9],
        [3.3,35,59],
        [5.6,67,30],
        [6.9,70,14],
        [7.3,71,7],
        [8.9,90,9]
      ]
    },
    {
      values: [
        [0.5,5,8],
        [1.9,5,3],
        [2.5,10,2],
        [3.1,30,8],
        [6.5,45,87],
        [6.9,74,1],
        [7.2,50,7],
        [7.8,56,20],
        [8,61,3],
        [8.5,71,4]
      ]
    }
  ]
}

Custom Markers

You can also use your own custom bubble markers. In your marker object, add a background-image attribute. Provide an image link for your custom marker, contained in quotes. You'll want to add the following styling attributes: background-color(set to none) and background-repeat (set to no-repeat). And you can use the size attribute to ensure your entire marker properly displays.

Note: Custom markers, unlike ZingChart markers, will not scale with your bubble value. They remain a fixed size.

https://app.zingsoft.com/demos/embed/6FEATG6F
https://app.zingsoft.com/demos/embed/6FEATG6F
{
  type: "bubble",
  series: [
    {
      values: [
        [1,9,59],
        [3,21,30],
        [5,40,35],
        [7,60,25],
        [9,81,87]
      ],
      marker: {
        'background-image': "https://www.zingchart.com/resources/target.png",
        'background-color': "none",
        'background-repeat': "no-repeat",
        size: 12
      }
    },
    {
      values: [
        [2,15,15],
        [4,30,5],
        [6,59,21],
        [8,75,85],
        [10,99,12]
      ],
      marker: {
        'background-image': "https://www.zingchart.com/resources/heart.png",
        'background-color': "none",
        'background-repeat': "no-repeat",
        size: 12
      }
    }
  ]
}

Minimum and Maximum Size

Depending on your data size, you can specify the minimum and/or maximum size a bubble has with the min-size and max-size attributes. Include them in your plot object for global application or to your desired series object for local application. Provide a pixel value.

https://demos.zingchart.com/view/embed/6HO61IHS

{
  type: "bubble",
  tooltip: {
    text: "%node-size-value bubble value,<br>with `min-size' and 'max-size' set to %t, respectively"
  },
  series: [
    {
      values: [
        [1,9,59],
        [3,21,30],
        [5,40,35],
        [7,60,25],
        [9,81,87]
      ],
      'min-size':25,  //Provide a pixel value. (Default is 15 pixels.)
      'max-size':100, //Provide a pixel value.
      text: "25 and 100"
    },
    {
      values: [
        [1.5,9,59],
        [3.5,21,30],
        [5.5,40,35],
        [7.5,60,25],
        [9.5,81,87]
      ],
      'min-size':3,   //Provide a pixel value. (Default is 15 pixels.)
      'max-size':10,  //Provide a pixel value.
      text: "3 and 10"
    }
  ]
}

Scaling

Depending on your data range and/or the differences between your data values, you can use the scaling attribute to adjust how your bubble values display. You can apply the change globally by placing the attribute in your plot object or locally by placing it in a specific series object. Specify your value: area (default) or radius (the square root of area).

https://app.zingsoft.com/demos/embed/TEYZPN0Z
https://app.zingsoft.com/demos/embed/TEYZPN0Z
{
  type: "bubble",
  tooltip: {
    text: "%node-size-value bubble value,<br>with 'scaling' set to '%t'"
  },
  series: [
    {
      values: [
        [1,9,59],
        [3,21,30],
        [5,40,35],
        [7,60,25],
        [9,81,87]
      ],
      scaling: "area",      //"area" (default) or "radius"
      text: "area"
    },
    {
      values: [
        [1.5,9,59],
        [3.5,21,30],
        [5.5,40,35],
        [7.5,60,25],
        [9.5,81,87]
      ],
      scaling: "radius",    //"area" (default) or "radius"
      text: "radius"
    }
  ]
}

Size Factor

You can further modify the size of your bubble markers with the size-factor attribute. Add it to your plot object for global application or to a series object for local application. Provide a value in relation to 1, with values greater than 1 increasing your bubble size and values less than 1 decreasing your bubble size. Note that decimal values should be preceded by a zero.

https://demos.zingchart.com/view/embed/GX90KF9Y

{
  type: "bubble",
  tooltip: {
    text: "%node-size-value bubble value,<br>with 'size-factor' set to %t"
  },
  series: [
    {
      values: [
        [1,9,59],
        [3,21,30],
        [5,40,35],
        [7,60,25],
        [9,81,87]
      ],
      'size-factor': 2,   //Provide a value in relation to 1.
      text: "2"
    },
    {
      values: [
        [1.5,9,59],
        [3.5,21,30],
        [5.5,40,35],
        [7.5,60,25],
        [9.5,81,87]
      ],
      'size-factor': 0.5, //Provide a value in relation to 1.
      text: "0.5"
    }
  ]
}

Further Customization

Finally, you'll want to configure your scales, style your bubble chart markers, and incorporate value boxes, tooltips, and/or a legend.

Scales

Popular scale types on bubble charts are linear, logarithmic, and time-series scales. Our tutorial on Configuring Your X/Y-Axis Scales provides more in-depth information on their setup, but we provide a brief overview here.

Note: While the following sections display scale configurations on the more commonly used axis (scale-x or scale-y), you can generally make the same changes to the opposite axis.

Linear Scale

Our bubble charts display linear scales on both axes by default, with your starting (minimum), ending (maximum), and step scale values automatically calculated based on the data you provide. You can specify your own minimum, maximum, and step scale values by adding a values attribute to your scale-x and/or scale-y object. Provide your min/max/step inside a string, separated by colons. Our Scales Tutorial provides further information on your scale formatting options.

https://app.zingsoft.com/demos/embed/WOIHS8OI
https://app.zingsoft.com/demos/embed/WOIHS8OI
{
  type: "bubble",
  'scale-x': {
    label: {
      text: "Bubble Chart with a Linear Scale"
    },
    values: "0:10:2"
  },
  'scale-y': {
    values: "0:100:25",
    format: "$%v"
  },
  series: [
    {
      values: [
        [1,9,59],
        [2,15,15],
        [3,21,30],
        [4,30,5],
        [5,40,35],
        [6,59,21],
        [7,60,25],
        [8,75,85],
        [9,81,87],
        [10,99,12]
      ]
    },
    {
      values: [
        [0.9,3,18],
        [2.1,13,21],
        [3.5,25,33],
        [4.9,35,54],
        [5.3,41,59],
        [6.5,57,34],
        [7.1,61,17],
        [8.7,70,3],
        [9.2,82,28],
        [9.9,95,76]
      ]
    },
    {
      values: [
        [0.1,9,3],
        [1.8,21,60],
        [1.9,29,9],
        [4.1,33,9],
        [4.5,39,4],
        [6.9,51,3],
        [7.4,64,11],
        [8.9,70,12],
        [9,75,3],
        [9.3,93,29]
      ]
    },
    {
      values: [
        [0.3,11,11],
        [0.9,15,21],
        [1.1,24,54],
        [2.3,29,6],
        [2.9,30,9],
        [3.3,35,59],
        [5.6,67,30],
        [6.9,70,14],
        [7.3,71,7],
        [8.9,90,9]
      ]
    },
    {
      values: [
        [0.5,5,8],
        [1.9,5,3],
        [2.5,10,2],
        [3.1,30,8],
        [6.5,45,87],
        [6.9,74,1],
        [7.2,50,7],
        [7.8,56,20],
        [8,61,3],
        [8.5,71,4]
      ]
    }
  ]
}

Logarithmic Scale

When working with very large data ranges, a logarithmic scale may be useful. To set this scale type, you'll need to add a progression attribute to your scale-y object. Set the value to log. Next, add a log-base attribute. Your base value can be Math.E (e, the base of natural logarithms) or 10.

https://app.zingsoft.com/demos/embed/R46081MB
https://app.zingsoft.com/demos/embed/R46081MB
{
  type: "bubble",
  'scale-x': {
    label: {
      text: "Bubble Chart with a Logarithmic Scale"
    }
  },
  'scale-y': {
    progression: "log",
    'log-base': 10,
    'thousands-separator': ", "
  },
  series: [
    {
      values: [
        [1,9,59],
        [2,15,15],
        [3,21,30],
        [4,30,5],
        [5,40,35],
        [6,59,21],
        [7,60,25],
        [8,75,85],
        [9,81,87],
        [10,99,12],
        [11,500,10],
        [12,9000,8]
      ]
    },
    {
      values: [
        [0.9,3,18],
        [2.1,13,21],
        [3.5,25,33],
        [4.9,35,54],
        [5.3,41,59],
        [6.5,57,34],
        [7.1,61,17],
        [8.7,70,3],
        [9.2,82,28],
        [9.9,95,76],
        [10.5,700,10],
        [11.2,8500,6]
      ]
    },
    {
      values: [
        [0.1,9,3],
        [1.8,21,60],
        [1.9,29,9],
        [4.1,33,9],
        [4.5,39,4],
        [6.9,51,3],
        [7.4,64,11],
        [8.9,70,12],
        [9,75,3],
        [9.3,93,29],
        [10.3,650,11],
        [11.7,7000,79]
      ]
    },
    {
      values: [
        [0.3,11,11],
        [0.9,15,21],
        [1.1,24,54],
        [2.3,29,6],
        [2.9,30,9],
        [3.3,35,59],
        [5.6,67,30],
        [6.9,70,14],
        [7.3,71,7],
        [8.9,90,9],
        [10.6,350,21],
        [11.1,2000,29]
      ]
    },
    {
      values: [
        [0.5,5,8],
        [1.9,5,3],
        [2.5,10,2],
        [3.1,30,8],
        [6.5,45,87],
        [6.9,74,1],
        [7.2,50,7],
        [7.8,56,20],
        [8,61,3],
        [8.5,71,4],
        [10.7,900,30],
        [11.1,6000,5]
      ]
    }
  ]
}

Time-Series Scale

When working with bubble chart time-series data, you'll want a corresponding time-series scale. Generally displayed on the x-axis (scale-x object), you'll need to add a min-value attribute, step attribute, and transform object to create your time-series scale.

For the min-value and step, you'll need to specify your minimum and step scale values in Unix time, provided in milliseconds. (Use an online conversion tool such as Epoch Converter to calculate your Unix timestamps.) Next, you need to convert your timestamps into a readable format. In your transform object, add a type attribute. Set the value to date. Next, add an all attribute. Specify how you want your scale formatted. You can combine ZingChart tokens with alphanumeric and special characters, contained in a string. Read more on Time-Series Scale in our Scales Tutorial.

https://app.zingsoft.com/demos/embed/UAC9QXNY
https://app.zingsoft.com/demos/embed/UAC9QXNY
{
  type: "bubble",
  utc: true,
  timezone:-8,
  'scale-x': {
    label: {
      text: "Bubble Chart with a Time-Series Scale"
    },
    'min-value':1425196800000,
    step: "2day",
    transform: {
      type: "date",
      all: "%m/%d/%y"
    }
  },
  series: [
    {
      values: [
        [1425225600000,9,59],
        [1425312000000,15,15],
        [1425398400000,21,30],
        [1425484800000,30,5],
        [1425571200000,40,35],
        [1425657600000,59,21],
        [1425744000000,60,25],
        [1425826800000,75,85],
        [1425913200000,81,87],
        [1425999600000,99,12]
      ]
    },
    {
      values: [
        [1425243600000,3,18],
        [1425322800000,13,21],
        [1425391200000,25,33],
        [1425470400000,35,54],
        [1425574800000,41,59],
        [1425697200000,57,34],
        [1425772800000,61,17],
        [1425866400000,70,3],
        [1425938400000,82,28],
        [1425985200000,95,76]
      ]
    },
    {
      values: [
        [1425279600000,9,3],
        [1425301200000,21,60],
        [1425430800000,29,9],
        [1425488400000,33,9],
        [1425614400000,39,4],
        [1425708000000,51,3],
        [1425718800000,64,11],
        [1425859200000,70,12],
        [1425931200000,75,3],
        [1426042800000,93,29]
      ]
    },
    {
      values: [
        [1425200400000,11,11],
        [1425358800000,15,21],
        [1425441600000,24,54],
        [1425535200000,29,6],
        [1425574800000,30,9],
        [1425646800000,35,59],
        [1425754800000,67,30],
        [1425852000000,70,14],
        [1425888000000,71,7],
        [1426014000000,90,9]
      ]
    },
    {
      values: [
        [1425236400000,5,8],
        [1425337200000,5,3],
        [1425384000000,10,2],
        [1425488400000,30,8],
        [1425610800000,45,87],
        [1425686400000,74,1],
        [1425783600000,50,7],
        [1425816000000,56,20],
        [1425898800000,61,3],
        [1426028400000,71,4]
      ]
    }
  ]
}

Marker Styling

You can style your bubble chart's markers by changing their colors, borders, transparency levels, and more. In your marker object, you can modify your marker's fill color with the background-color attribute. You can modify the color and width of your marker borders with the border-color and border-width attributes. And to adjust the transparency levels of your markers, use the alpha attribute and provide a value between 0-1, with 0 being clear and 1 being opaque. (Make sure to precede your decimal mark with a zero.) For more on marker-specific styling, see our ZingChart Shapes Tutorial and Markers JSON Attributes/Syntax page.

https://app.zingsoft.com/demos/embed/52TCBRPD
https://app.zingsoft.com/demos/embed/52TCBRPD
{
  type: "bubble",
  plot: {
    marker: { //Apply marker styling globally.
      'background-color': "#00FFFF",
      'border-color': "#009999",
      'border-width': 1,
      alpha:0.3
    }
  },
  series: [
    {
      values: [
        [1,9,59],
        [2,15,15],
        [3,21,30],
        [4,30,5],
        [5,40,35],
        [6,59,21],
        [7,60,25],
        [8,75,85],
        [9,81,87],
        [10,99,12]
      ],
      marker: {  //Apply marker styling locally.
      type: "star5",
      'background-color': "#FF0066", /* hexadecimal or RGB value */
      'border-color': "#FFFF66", /* hexadecimal or RGB value */
      'border-width':3, /* in pixels */
      alpha:0.7
      }
    },
    {
      values: [
        [0.9,3,18],
        [2.1,13,21],
        [3.5,25,33],
        [4.9,35,54],
        [5.3,41,59],
        [6.5,57,34],
        [7.1,61,17],
        [8.7,70,3],
        [9.2,82,28],
        [9.9,95,76]
      ]
    },
    {
      values: [
        [0.1,9,3],
        [1.8,21,60],
        [1.9,29,9],
        [4.1,33,9],
        [4.5,39,4],
        [6.9,51,3],
        [7.4,64,11],
        [8.9,70,12],
        [9,75,3],
        [9.3,93,29]
      ]
    },
    {
      values: [
        [0.3,11,11],
        [0.9,15,21],
        [1.1,24,54],
        [2.3,29,6],
        [2.9,30,9],
        [3.3,35,59],
        [5.6,67,30],
        [6.9,70,14],
        [7.3,71,7],
        [8.9,90,9]
      ]
    },
    {
      values: [
        [0.5,5,8],
        [1.9,5,3],
        [2.5,10,2],
        [3.1,30,8],
        [6.5,45,87],
        [6.9,74,1],
        [7.2,50,7],
        [7.8,56,20],
        [8,61,3],
        [8.5,71,4]
      ]
    }
  ]
}

Value Boxes

By default, value boxes on bubble charts are not visible. You can make them visible (or selectively visible) by adding a value-box object to your plot object. Our value boxes can be formatted to display your choice of styling and text, and you can incorporate tokens and rules for even greater customization. In the below chart, rules were used to color values greater than 80 blue, values between 65-80 green, values between 50-65 orange, and remaining values not visible. Read more on ZingChart Tokens and Logic Rules in their respective tutorials. Our Value Boxes JSON Attributes/Syntax page provides a more comprehensive list of all your customization options.

https://app.zingsoft.com/demos/embed/N3NPIEFT
https://app.zingsoft.com/demos/embed/N3NPIEFT
{
  type: "bubble",
  plot: {
    'value-box': {
      text: "%node-size-value",  //Use the %node-size-value token to display bubble size.
      rules: [
        {
          rule: "%node-size-value >=80",
          'font-color': "blue",
          'font-size':15
        },
        {
          rule: "%node-size-value >= 65 && %node-size-value < 80",
          'font-color': "green",
          'font-size':12,
          'font-weight': "normal"
        },
        {
          rule: "%node-size-value >= 50 && %node-size-value < 65",
          'font-color': "orange",
          'font-size':10,
          'font-weight': "normal"
        },
        {
          rule: "%node-size-value < 50",
          visible: false
        }
      ]
    },
    marker: {
      'background-color': "#00FFFF",
      'border-color': "#009999",
      'border-width': 1,
      alpha:0.3
    }
  },
  series: [
    {
      values: [
        [1,9,59],
        [2,15,15],
        [3,21,30],
        [4,30,5],
        [5,40,35],
        [6,59,21],
        [7,60,25],
        [8,75,85],
        [9,81,87],
        [10,99,12]
      ],
      marker: {
        type: "star5",
        'background-color': "#FF0066",
        'border-color': "#FFFF66",
        'border-width':3,
        alpha:0.7
      }
    },
    {
      values: [
        [0.9,3,18],
        [2.1,13,21],
        [3.5,25,33],
        [4.9,35,54],
        [5.3,41,59],
        [6.5,57,34],
        [7.1,61,17],
        [8.7,70,3],
        [9.2,82,28],
        [9.9,95,76]
      ]
    },
    {
      values: [
        [0.1,9,3],
        [1.8,21,60],
        [1.9,29,9],
        [4.1,33,9],
        [4.5,39,4],
        [6.9,51,3],
        [7.4,64,11],
        [8.9,70,12],
        [9,75,3],
        [9.3,93,29]
      ]
    },
    {
      values: [
        [0.3,11,11],
        [0.9,15,21],
        [1.1,24,54],
        [2.3,29,6],
        [2.9,30,9],
        [3.3,35,59],
        [5.6,67,30],
        [6.9,70,14],
        [7.3,71,7],
        [8.9,90,9]
      ]
    },
    {
      values: [
        [0.5,5,8],
        [1.9,5,3],
        [2.5,10,2],
        [3.1,30,8],
        [6.5,45,87],
        [6.9,74,1],
        [7.2,50,7],
        [7.8,56,20],
        [8,61,3],
        [8.5,71,4]
      ]
    }
  ]
}

Tooltips

Tooltips are what appear when you hover over a bubble on your bubble chart. They can be customized to display your choice of styling and text. Add a tooltip object to your chart object. You can control their visibility with a visible attribute. Provide a true (default) or false value. To specify your tooltip text, add a text attribute. Place your desired text inside a string. You can use tokens such as %scale-key-value (to represent x-axis values), %node-value (to represent y-axis values), and %node-size-value (to represent bubble size values). For styling, use attributes such as font-color, font-family, background-color, border-color, and border-width. Browse our Tooltips JSON Attributes/Syntax page for further options.

https://app.zingsoft.com/demos/embed/W9ZU5P25
https://app.zingsoft.com/demos/embed/W9ZU5P25
{
  type: "bubble",
  tooltip: {
    text: "Bubble Chart Tokens:<br><br>X-axis value is %scale-key-value<br>Y-axis value is %node-value<br>Bubble value is %node-size-value<br><br>Also: %t",
    'font-color': "black",
    'font-family': "Georgia, serif",
    'background-color': "white",
    'border-color': "black",
    'border-width':2
  },
  plot: {
    marker: {
      'background-color': "#00FFFF",
      'border-color': "#009999",
      'border-width': 1,
      alpha:0.3
    }
  },
  series: [
    {
      values: [
        [1,9,59],
        [2,15,15],
        [3,21,30],
        [4,30,5],
        [5,40,35],
        [6,59,21],
        [7,60,25],
        [8,75,85],
        [9,81,87],
        [10,99,12]
      ],
      text: "Stars",
      marker: {
      type: "star5",
      'background-color': "#FF0066",
      'border-color': "#FFFF66",
      'border-width':3,
      alpha:0.7
      }
    },
    {
      values: [
        [0.9,3,18],
        [2.1,13,21],
        [3.5,25,33],
        [4.9,35,54],
        [5.3,41,59],
        [6.5,57,34],
        [7.1,61,17],
        [8.7,70,3],
        [9.2,82,28],
        [9.9,95,76]
      ],
      text: "Bubbles"
    },
    {
      values: [
        [0.1,9,3],
        [1.8,21,60],
        [1.9,29,9],
        [4.1,33,9],
        [4.5,39,4],
        [6.9,51,3],
        [7.4,64,11],
        [8.9,70,12],
        [9,75,3],
        [9.3,93,29]
      ],
      text: "Bubbles"
    },
    {
      values: [
        [0.3,11,11],
        [0.9,15,21],
        [1.1,24,54],
        [2.3,29,6],
        [2.9,30,9],
        [3.3,35,59],
        [5.6,67,30],
        [6.9,70,14],
        [7.3,71,7],
        [8.9,90,9]
      ],
      text: "Bubbles"
    },
    {
      values: [
        [0.5,5,8],
        [1.9,5,3],
        [2.5,10,2],
        [3.1,30,8],
        [6.5,45,87],
        [6.9,74,1],
        [7.2,50,7],
        [7.8,56,20],
        [8,61,3],
        [8.5,71,4]
      ],
      text: "Bubbles"
    }
  ]
}

Legend

Legends are useful in that they allow users to interact with and better understand their data. In our below chart, toggle plots on and off by clicking on the legend marker that a plot is associated with. Include a legend in your bubble chart by adding a legendobject to your chart object. You can layout and position your legend by using the layout and position attributes, respectively. To style your legend text, place your styling attributes inside an item object. And you can style your legend markers inside a marker object. Our Legends Tutorial explains in greater detail how to customize your legend. Also see our Legends JSON Attributes/Syntax page.

https://app.zingsoft.com/demos/embed/BY8OWAXB
https://app.zingsoft.com/demos/embed/BY8OWAXB
{
  type: "bubble",
  legend: {
    layout: "5x1",
    position: "97% 73%",
    item: {
    'font-color': "brown",
    'font-family': "Georgia"
    },
    'background-color': "white",
    alpha:0.5,
    'border-color': "none",
    shadow: false,
    marker: {
    type: "inherit",
    }
  },
  series: [
    {
      values: [
        [1,9,59],
        [2,15,15],
        [3,21,30],
        [4,30,5],
        [5,40,35],
        [6,59,21],
        [7,60,25],
        [8,75,85],
        [9,81,87],
        [10,99,12]
      ],
      text: "Kale",
      marker: {
      type: "rpoly6",
      alpha:0.7
      }
    },
    {
      values: [
        [0.9,3,18],
        [2.1,13,21],
        [3.5,25,33],
        [4.9,35,54],
        [5.3,41,59],
        [6.5,57,34],
        [7.1,61,17],
        [8.7,70,3],
        [9.2,82,28],
        [9.9,95,76]
      ],
      text: "Blueberries",
      marker: {
      type: "circle",
      alpha:0.7
      }
    },
    {
      values: [
        [0.1,9,3],
        [1.8,21,60],
        [1.9,29,9],
        [4.1,33,9],
        [4.5,39,4],
        [6.9,51,3],
        [7.4,64,11],
        [8.9,70,12],
        [9,75,3],
        [9.3,93,29]
      ],
      text: "Tomatoes",
      marker: {
      type: "triangle",
      alpha:0.7
      }
    },
    {
      values: [
        [0.3,11,11],
        [0.9,15,21],
        [1.1,24,54],
        [2.3,29,6],
        [2.9,30,9],
        [3.3,35,59],
        [5.6,67,30],
        [6.9,70,14],
        [7.3,71,7],
        [8.9,90,9]
      ],
      text: "Pineapples",
      marker: {
        type: "diamond",
        alpha:0.7
      }
    },
    {
      values: [
        [0.5,5,8],
        [1.9,5,3],
        [2.5,10,2],
        [3.1,30,8],
        [6.5,45,87],
        [6.9,74,1],
        [7.2,50,7],
        [7.8,56,20],
        [8,61,3],
        [8.5,71,4]
      ],
      text: "Mushrooms",
      marker: {
        type: "gear5",
        alpha:0.7
      }
    }
  ]
}

Summary

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