Customizable Liquid Bubble Chart With jQuery and Canvas

File Size: 17.5 KB
Views Total: 19639
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Customizable Liquid Bubble Chart With jQuery and Canvas

A super tiny yet customizable jQuery plugin used to present your numeric data in a Canvas liquid bubble chart with a water fill animation. Useful for preloader, progress bar, loading indicator.

How to use it:

1. Load jQuery library and the jQuery Water Bubble Chart plugin at the end of your document.

<script src="//"></script>
<script src="waterbubble.js"></script>

2. Create an Canvas element for the liquid bubble chart.

<canvas id="demo"></canvas>

3. Draw a default liquid bubble chart on the Canvas element.


4. Customization options.


  // bubble size
  radius: 100,

  // border width
  lineWidth: undefined,

  // data to present
  data: 0.5,

  // color of the water bubble
  waterColor: 'rgba(25, 139, 201, 1)',

  // text color
  textColor: 'rgba(06, 85, 128, 0.8)',

  // custom font family
  font: '',

  // show wave
  wave: true,

  // custom text displayed inside the water bubble
  txt: undefined,

  // enable water fill animation
  animation: true

Change log:


  • fixed for Chrome


  • fixed a bug


  • fixed a bug

This awesome jQuery plugin is developed by miafan23. For more Advanced Usages, please check the demo page or visit the official website.