JavaScript Bubble Chart Multi-Series

VIEW MORE CHARTS
SAVE
VIEW HTML
EDIT ON CODEPEN
A bubble chart is a type of chart that displays three dimensions of data. Each entity with its triplet (v1, v2, v3) of associated data is plotted as a disk. To create a bubble chart using KoolChart's JavaScript charting library, the <Bubble2DChart> and <Bubble2DSeries> elements must be set in Layout.
<Bubble2DChart maxRadius="40" minRadius="5" showDataTips="true">
...
<series>
<Bubble2DSeries xField="A_Profit" yField="A_Cost" radiusField="A_Revenue" displayName="A Dept.">
...
</Bubble2DSeries>
</series>
...
</Bubble2DChart>
In this JavaScript chart example, the <fill> element of the <Bubble2DSeries> element is set with a radial gradient effect (<RadialGradient>) in order to display a sphere-shaped bubble.
<fill>
<RadialGradient focalPointRatio="0.5" angle="220">
<entries>
<GradientEntry color="#9edffd" ratio="0.2" />
<GradientEntry color="#40b1e6" ratio="1" />
</entries>
</RadialGradient>
</fill>