File: /var/www/quadcode.com/node_modules/chart.js/dist/docs/charts/bubble.html
<!DOCTYPE HTML>
<html lang="" >
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Bubble ยท GitBook</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="">
<meta name="generator" content="GitBook 3.2.2">
<meta name="author" content="chartjs">
<link rel="stylesheet" href="../gitbook/style.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-search-plus/search.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
<link rel="stylesheet" href="../style.css">
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
<link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
<link rel="next" href="scatter.html" />
<link rel="prev" href="polar.html" />
<link rel="stylesheet" href="../gitbook/gitbook-plugin-chartjs/style.css">
<script src="../gitbook/gitbook-plugin-chartjs/Chart.bundle.js"></script>
<script src="../gitbook/gitbook-plugin-chartjs/chartjs-plugin-deferred.js"></script>
</head>
<body>
<div class="book">
<div class="book-summary">
<div id="book-search-input" role="search">
<input type="text" placeholder="Type to search" />
</div>
<nav role="navigation">
<ul class="summary">
<li class="chapter " data-level="1.1" data-path="../">
<a href="../">
Chart.js
</a>
</li>
<li class="chapter " data-level="1.2" data-path="../getting-started/">
<a href="../getting-started/">
Getting Started
</a>
<ul class="articles">
<li class="chapter " data-level="1.2.1" data-path="../getting-started/installation.html">
<a href="../getting-started/installation.html">
Installation
</a>
</li>
<li class="chapter " data-level="1.2.2" data-path="../getting-started/integration.html">
<a href="../getting-started/integration.html">
Integration
</a>
</li>
<li class="chapter " data-level="1.2.3" data-path="../getting-started/usage.html">
<a href="../getting-started/usage.html">
Usage
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.3" data-path="../general/">
<a href="../general/">
General
</a>
<ul class="articles">
<li class="chapter " data-level="1.3.1" data-path="../general/responsive.html">
<a href="../general/responsive.html">
Responsive
</a>
</li>
<li class="chapter " data-level="1.3.2" data-path="../general/interactions/">
<a href="../general/interactions/">
Interactions
</a>
<ul class="articles">
<li class="chapter " data-level="1.3.2.1" data-path="../general/interactions/events.html">
<a href="../general/interactions/events.html">
Events
</a>
</li>
<li class="chapter " data-level="1.3.2.2" data-path="../general/interactions/modes.html">
<a href="../general/interactions/modes.html">
Modes
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.3.3" data-path="../general/colors.html">
<a href="../general/colors.html">
Colors
</a>
</li>
<li class="chapter " data-level="1.3.4" data-path="../general/fonts.html">
<a href="../general/fonts.html">
Fonts
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.4" data-path="../configuration/">
<a href="../configuration/">
Configuration
</a>
<ul class="articles">
<li class="chapter " data-level="1.4.1" data-path="../configuration/animations.html">
<a href="../configuration/animations.html">
Animations
</a>
</li>
<li class="chapter " data-level="1.4.2" data-path="../configuration/layout.html">
<a href="../configuration/layout.html">
Layout
</a>
</li>
<li class="chapter " data-level="1.4.3" data-path="../configuration/legend.html">
<a href="../configuration/legend.html">
Legend
</a>
</li>
<li class="chapter " data-level="1.4.4" data-path="../configuration/title.html">
<a href="../configuration/title.html">
Title
</a>
</li>
<li class="chapter " data-level="1.4.5" data-path="../configuration/tooltip.html">
<a href="../configuration/tooltip.html">
Tooltip
</a>
</li>
<li class="chapter " data-level="1.4.6" data-path="../configuration/elements.html">
<a href="../configuration/elements.html">
Elements
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.5" data-path="./">
<a href="./">
Charts
</a>
<ul class="articles">
<li class="chapter " data-level="1.5.1" data-path="line.html">
<a href="line.html">
Line
</a>
</li>
<li class="chapter " data-level="1.5.2" data-path="bar.html">
<a href="bar.html">
Bar
</a>
</li>
<li class="chapter " data-level="1.5.3" data-path="radar.html">
<a href="radar.html">
Radar
</a>
</li>
<li class="chapter " data-level="1.5.4" data-path="doughnut.html">
<a href="doughnut.html">
Doughnut & Pie
</a>
</li>
<li class="chapter " data-level="1.5.5" data-path="polar.html">
<a href="polar.html">
Polar Area
</a>
</li>
<li class="chapter active" data-level="1.5.6" data-path="bubble.html">
<a href="bubble.html">
Bubble
</a>
</li>
<li class="chapter " data-level="1.5.7" data-path="scatter.html">
<a href="scatter.html">
Scatter
</a>
</li>
<li class="chapter " data-level="1.5.8" data-path="area.html">
<a href="area.html">
Area
</a>
</li>
<li class="chapter " data-level="1.5.9" data-path="mixed.html">
<a href="mixed.html">
Mixed
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.6" data-path="../axes/">
<a href="../axes/">
Axes
</a>
<ul class="articles">
<li class="chapter " data-level="1.6.1" data-path="../axes/cartesian/">
<a href="../axes/cartesian/">
Cartesian
</a>
<ul class="articles">
<li class="chapter " data-level="1.6.1.1" data-path="../axes/cartesian/category.html">
<a href="../axes/cartesian/category.html">
Category
</a>
</li>
<li class="chapter " data-level="1.6.1.2" data-path="../axes/cartesian/linear.html">
<a href="../axes/cartesian/linear.html">
Linear
</a>
</li>
<li class="chapter " data-level="1.6.1.3" data-path="../axes/cartesian/logarithmic.html">
<a href="../axes/cartesian/logarithmic.html">
Logarithmic
</a>
</li>
<li class="chapter " data-level="1.6.1.4" data-path="../axes/cartesian/time.html">
<a href="../axes/cartesian/time.html">
Time
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.6.2" data-path="../axes/radial/">
<a href="../axes/radial/">
Radial
</a>
<ul class="articles">
<li class="chapter " data-level="1.6.2.1" data-path="../axes/radial/linear.html">
<a href="../axes/radial/linear.html">
Linear
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.6.3" data-path="../axes/labelling.html">
<a href="../axes/labelling.html">
Labelling
</a>
</li>
<li class="chapter " data-level="1.6.4" data-path="../axes/styling.html">
<a href="../axes/styling.html">
Styling
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.7" data-path="../developers/">
<a href="../developers/">
Developers
</a>
<ul class="articles">
<li class="chapter " data-level="1.7.1" data-path="../developers/api.html">
<a href="../developers/api.html">
Chart.js API
</a>
</li>
<li class="chapter " data-level="1.7.2" data-path="../developers/updates.html">
<a href="../developers/updates.html">
Updating Charts
</a>
</li>
<li class="chapter " data-level="1.7.3" data-path="../developers/plugins.html">
<a href="../developers/plugins.html">
Plugins
</a>
</li>
<li class="chapter " data-level="1.7.4" data-path="../developers/charts.html">
<a href="../developers/charts.html">
New Charts
</a>
</li>
<li class="chapter " data-level="1.7.5" data-path="../developers/axes.html">
<a href="../developers/axes.html">
New Axes
</a>
</li>
<li class="chapter " data-level="1.7.6" data-path="../developers/contributing.html">
<a href="../developers/contributing.html">
Contributing
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.8" data-path="../notes/">
<a href="../notes/">
Additional Notes
</a>
<ul class="articles">
<li class="chapter " data-level="1.8.1" data-path="../notes/comparison.html">
<a href="../notes/comparison.html">
Comparison Table
</a>
</li>
<li class="chapter " data-level="1.8.2" data-path="../notes/extensions.html">
<a href="../notes/extensions.html">
Popular Extensions
</a>
</li>
<li class="chapter " data-level="1.8.3" data-path="../notes/license.html">
<a href="../notes/license.html">
License
</a>
</li>
</ul>
</li>
<li class="divider"></li>
<li>
<a href="https://www.gitbook.com" target="blank" class="gitbook-link">
Published with GitBook
</a>
</li>
</ul>
</nav>
</div>
<div class="book-body">
<div class="body-inner">
<div class="book-header" role="navigation">
<!-- Title -->
<h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href=".." >Bubble</a>
</h1>
</div>
<div class="page-wrapper" tabindex="-1" role="main">
<div class="page-inner">
<div class="search-plus" id="book-search-results">
<div class="search-noresults">
<section class="normal markdown-section">
<h1 id="bubble-chart">Bubble Chart</h1>
<p>A bubble chart is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the corresponding horizontal and vertical axes. The third dimension is represented by the size of the individual bubbles. </p>
<p><div class="chartjs-wrapper"><canvas id="chartjs-6" class="chartjs" width="undefined" height="undefined"></canvas><script>new Chart(document.getElementById("chartjs-6"),{"type":"bubble","data":{"datasets":[{"label":"First Dataset","data":[{"x":20,"y":30,"r":15},{"x":40,"y":10,"r":10}],"backgroundColor":"rgb(255, 99, 132)"}]}});</script></div></p>
<h2 id="example-usage">Example Usage</h2>
<pre><code class="lang-javascript"><span class="hljs-comment">// For a bubble chart</span>
<span class="hljs-keyword">var</span> myBubbleChart = <span class="hljs-keyword">new</span> Chart(ctx,{
type: <span class="hljs-string">'bubble'</span>,
data: data,
options: options
});
</code></pre>
<h2 id="dataset-properties">Dataset Properties</h2>
<p>The bubble chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the colour of the bubbles is generally set this way.</p>
<p>All properties, except <code>label</code> can be specified as an array. If these are set to an array value, the first value applies to the first bubble in the dataset, the second value to the second bubble, and so on.</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>label</code></td>
<td><code>String</code></td>
<td>The label for the dataset which appears in the legend and tooltips.</td>
</tr>
<tr>
<td><code>backgroundColor</code></td>
<td><code>Color/Color[]</code></td>
<td>The fill color for bubbles.</td>
</tr>
<tr>
<td><code>borderColor</code></td>
<td><code>Color/Color[]</code></td>
<td>The border color for bubbles.</td>
</tr>
<tr>
<td><code>borderWidth</code></td>
<td><code>Number/Number[]</code></td>
<td>The width of the point bubbles in pixels.</td>
</tr>
<tr>
<td><code>hoverBackgroundColor</code></td>
<td><code>Color/Color[]</code></td>
<td>Bubble background color when hovered.</td>
</tr>
<tr>
<td><code>hoverBorderColor</code></td>
<td><code>Color/Color[]</code></td>
<td>Bubble border color when hovered.</td>
</tr>
<tr>
<td><code>hoverBorderWidth</code></td>
<td><code>Number/Number[]</code></td>
<td>Border width of point when hovered.</td>
</tr>
<tr>
<td><code>hoverRadius</code></td>
<td><code>Number/Number[]</code></td>
<td>Additional radius to add to data radius on hover.</td>
</tr>
</tbody>
</table>
<h2 id="config-options">Config Options</h2>
<p>The bubble chart has no unique configuration options. To configure options common to all of the bubbles, the <a href="../configuration/elements/point.md#point-configuration">point element options</a> are used.</p>
<h2 id="default-options">Default Options</h2>
<p>We can also change the default values for the Bubble chart type. Doing so will give all bubble charts created after this point the new defaults. The default configuration for the bubble chart can be accessed at <code>Chart.defaults.bubble</code>.</p>
<h2 id="data-structure">Data Structure</h2>
<p>For a bubble chart, datasets need to contain an array of data points. Each point must implement the <a href="#bubble-data-object">bubble data object</a> interface.</p>
<h3 id="bubble-data-object">Bubble Data Object</h3>
<p>Data for the bubble chart is passed in the form of an object. The object must implement the following interface. It is important to note that the radius property, <code>r</code> is <strong>not</strong> scaled by the chart. It is the raw radius in pixels of the bubble that is drawn on the canvas.</p>
<pre><code class="lang-javascript">{
<span class="hljs-comment">// X Value</span>
x: <Number>,
// Y Value
y: <Number>,
// Radius of bubble. This is not scaled.
r: <Number>
}
</code></pre>
</section>
</div>
<div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="polar.html" class="navigation navigation-prev " aria-label="Previous page: Polar Area">
<i class="fa fa-angle-left"></i>
</a>
<a href="scatter.html" class="navigation navigation-next " aria-label="Next page: Scatter">
<i class="fa fa-angle-right"></i>
</a>
</div>
<script>
var gitbook = gitbook || [];
gitbook.push(function() {
gitbook.page.hasChanged({"page":{"title":"Bubble","level":"1.5.6","depth":2,"next":{"title":"Scatter","level":"1.5.7","depth":2,"path":"charts/scatter.md","ref":"charts/scatter.md","articles":[]},"previous":{"title":"Polar Area","level":"1.5.5","depth":2,"path":"charts/polar.md","ref":"charts/polar.md","articles":[]},"dir":"ltr"},"config":{"plugins":["-lunr","-search","search-plus","anchorjs","chartjs","ga"],"root":"./docs","styles":{"website":"style.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"anchorjs":{"icon":"#","placement":"left","visible":"always"},"ga":{"configuration":"auto","token":"UA-28909194-3"},"theme-default":{"styles":{"website":"style.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false},"search-plus":{},"chartjs":{"defaults":null},"highlight":{},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2}},"theme":"default","author":"chartjs","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"gitbook":"3.2.2"},"file":{"path":"charts/bubble.md","mtime":"2017-05-25T14:02:34.971Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-05-25T14:06:47.305Z"},"basePath":"..","book":{"language":""}});
});
</script>
</div>
<script src="../gitbook/gitbook.js"></script>
<script src="../gitbook/theme.js"></script>
<script src="../gitbook/gitbook-plugin-search-plus/jquery.mark.min.js"></script>
<script src="../gitbook/gitbook-plugin-search-plus/search.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/3.1.1/anchor.min.js"></script>
<script src="../gitbook/gitbook-plugin-anchorjs/anchor-style.js"></script>
<script src="../gitbook/gitbook-plugin-ga/plugin.js"></script>
<script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
<script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
</body>
</html>