• Demos
    • JavaScript Charts
    • JavaScript StockCharts
  • Download/NPM
    • Download CanvasJS
    • Install via NPM
  • Integrations
    Front End Technology Samples
    • React Charts
    • Angular Charts
    • Vue.js Charts New!
    • jQuery Charts
    • Dashboards
    Server Side Technology Samples
    • PHP Charts
    • Python Charts New!
    • ASP.NET MVC Charts
    • Spring MVC Charts
    • JSP Charts
  • License
  • Blog
  • Docs
    • Chart Documentation
    • StockChart Documentation
  • Support Forum
    • Chart Support
    • StockChart Support
  • My Account
My Account
  • KEY FEATURES
    • Chart with Zooming and Panning
    • Exporting Chart to Image
    • Chart with Animation
    • Chart with Multiple Axes
    • Chart with Dynamic Data
    • Chart with Logarithmic Axis
    • Chart using JSON Data
    • Performance with 50,000 Data Points
    • Chart with Crosshair
    • Chart inside Re-Sizable Container
    • Charts inside jQuery Tabs
    • Chart inside Popup Modal
    • Responsive jQuery Chart
    • Drilldown Chart
  • LINE CHARTS
    • Line Chart
    • Spline Chart
    • Step Line Chart
  • AREA CHARTS
    • Area Chart
    • Multi Series Area Chart with Date Time
    • Spline Area Chart
    • Multi Series Spline Area
    • Step Area Chart
    • Range Area Chart
    • Range Spline Area Chart
    • Stacked Area Chart
    • Stacked Area 100% Chart
  • COLUMN & BAR CHARTS
    • Column Chart
    • Bar Chart
    • Range Column Chart
    • Stacked Column Chart
    • Stacked Column 100% Chart
    • Range Bar Chart
    • Stacked Bar Chart
    • Stacked Bar 100% Chart
    • Waterfall Chart
  • PIE & FUNNEL CHARTS
    • Pie Chart
    • Pie Chart with Index Labels Placed Inside
    • Doughnut Chart
    • Funnel Chart
    • Funnel Chart with Custom Neck
    • Pyramid Chart
  • FINANCIAL CHARTS
    • Candlestick Chart
    • Candlestick Chart from JSON
    • OHLC Chart
  • SCATTER & BUBBLE CHARTS
    • Scatter Chart
    • Scatter Chart with Custom Markers
    • Bubble Chart
  • BOX & WHISKER CHARTS
    • Box and Whisker Chart
    • Box and Whisker Chart with Outliers
  • COMBINATION CHARTS
    • Error Chart
    • Error Line Chart
    • Combination of Column, Line and Area Chart
  • DYNAMIC CHARTS
    • Dynamic Line Chart
    • Dynamic Column Chart
    • Dynamic Multi Series Chart
  • STOCKCHARTS
    • StockChart with Numeric Axis
    • StockChart with Date-Time Axis
    • StockChart with SplineArea & Navigator
  • REACT, ANGULAR, VUE.JS, JAVASCRIPT
    • React Charts
    • Angular Charts
    • Vue.js Charts
    • JavaScript Charts
  • SERVER SIDE TECHNOLOGIES
    • ASP.NET MVC Charts
    • PHP Charts
    • Python Charts
    • JSP Charts
    • Spring MVC Charts

jQuery Bubble Charts & Graphs

Download jQuery Chart Samples
  • jQuery Chart Samples
  • JavaScript Chart Samples
  • React Chart Samples
  • Angular Chart Samples
  • Vue.js Chart Samples
  • PHP Chart Samples
  • Python Django Chart Samples
  • ASP.NET Chart Samples
  • JSP Chart Samples
  • Spring MVC Chart Samples
  • Dashboard Samples
  • JavaScript StockChart Samples

jQuery Bubble Chart allows you to visualize data in 3 dimensions. It is very similar to Scatter Charts except that size of bubble represents another parameter. Out of the three parameters required (x, y, z), x & y determine the bubble's position on X & Y Axis whereas z determines its size. Given example shows simple jQuery Bubble Chart along with source code that you can edit in-browser or save to run it locally.

Try Editing The Code

Download Copy JSFiddle
window.onload = function() {

var options = {
	animationEnabled: true,
	zoomEnabled: true,
	theme: "light2",
	title: {
		text: "Crude Birth Rate vs Crude Death Rate and Population"
	},
	subtitles: [{
		text: "European Union 2016",
		fontSize: 15
	}],
	axisX: {
		title: "Crude Death Rate"
	},
	axisY: {
		title: "Crude Birth Rate",
		includeZero: true
	},
	data: [{
		type: "bubble",
		xValueFormatString: "#,#0.0",
		yValueFormatString: "#,#0.0",
		zValueFormatString: "#,#0.0",
		toolTipContent: "<b>{name}</b><br/>Crude Death Rate: {x} <br/> Crude Birth Rate: {y}<br/> Population: {z}mn",
		dataPoints: [
			{ x: 5.3, y: 16.5, z: 78.74, name: "Turkey" },
			{ x: 6.4, y: 13.5, z: 4.72, name: "Ireland" },
			{ x: 6.4, y: 11.1, z: 0.84, name: "Cyprus" },
			{ x: 6.9, y: 12, z: 0.33, name: "Iceland" },
			{ x: 7.8, y: 11.2, z: 5.2, name: "Norway" },
			{ x: 7.8, y: 10.5, z: 8.3, name: "Switzerland" },
			{ x: 8.8, y: 8.7, z: 46.44, name: "Spain" },
			{ x: 8.7, y: 10.1, z: 16.9, name: "Netherlands" },
			{ x: 8.8, y: 11.7, z: 66.75, name: "France" },
			{ x: 9.1, y: 11.8, z: 65.3, name: "United Kingdom" },
			{ x: 9.2, y: 10, z: 8.69, name: "Austria" },
			{ x: 9.2, y: 11.8, z: 9.85, name: "Sweden" },
			{ x: 9.2, y: 10.8, z: 5.70, name: "Denmark" },
			{ x: 9.5, y: 10.8, z: 11.31, name: "Belgium" },
			{ x: 9.8, y: 9.6, z: 5.4, name: "Finland" },
			{ x: 10.2, y: 10.7, z: 10.5, z: "Czech Republic" },
			{ x: 10.2, y: 10.1, z: 37.96, name: "Poland" },
			{ x: 10.1, y: 7.8, z: 60.66, name: "Italy" },
			{ x: 10.7, y: 8.4, z: 10.34, name: "Portugal" },
			{ x: 11, y: 8.6, z: 10.7, name: "Greece" },
			{ x: 11.2, y: 9.3, z: 82.17, name: "Germany" },
			{ x: 12.4, y: 9, z: 4.19, name: "Croatia" },
			{ x: 13, y: 9.7, z: 9.83, name: "Hungary" },
			{ x: 13, y: 9.6, z: 19.76, name: "Romania" },
			{ x: 15.1, y: 9.1, z: 7.15, name: "Bulgaria" }
		]
	}]
};
$("#chartContainer").CanvasJSChart(options);

}                                

Chart Customizations

Zoom / Pan feature can be enabled in the chart by setting zoomEnabled to true. Also you can control the axis for zooming & panning using zoomType property. Other frequently used customization options are color, fillOpacity, markerBorderColor, markerBorderThickness, etc.

Note   For step by step instructions, follow our jQuery Integration Tutorial

Quick Links

  • Chart Docs
  • StockChart Docs
  • About Us
  • FAQs

Server Side Technologies

  • ASP.NET MVC Charts
  • PHP Charts
  • JSP Charts
  • Spring MVC Charts

Front Side Technologies

  • JavaScript Charts
  • jQuery Charts
  • React Charts
  • Angular Charts
  • JavaScript StockCharts

Contact

  • Fenopix, Inc.
  • 2093 Philadelphia Pike,
  • #5678, Claymont,
  • Delaware 19703
  • United States Of America

©2025 Fenopix Privacy Policy Cookies Policy Careers