Blog Help & Support Contact About Login

 Show Nav

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

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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).

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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 "legend" object 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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.