jQuery line and donut chart plug-in with 2 live demos

The KlondikeChart plug-in

The jQuery-based KlondikeChart plug-in can be used for creating the line and donut charts on your website.

This is a light-weight plug-in that requires adding a script file after the jQuery reference. You also need to include the jCanvas plug-in in the <head> section of the website.

See the demo and code in the following section along with the setting up instructions.

A demo of creating a jQuery line chart

For creating a line chart plug-in, you simply need to use the jQuery code with the plug-in LineChart() function and declare a few variables. Have a look at this live demo with code:

jquery line chart

See online demo and code

Setting up this plug-in to work

You need to include following files in the <head> section:

 Note: The path will change according to your own specification.

The simple markup for the demo of line chart:


The jQuery code:


In the script section, you can see a few straightforward variables for setting the line chart options. For example, the XValues and YValues define the information to be displayed at each point of the line chart. In the demo, I used Weekday names with corresponding values.

Similarly, you may set the color of the line by assigning a color value to the lineColor variable. The CanvasBackground defines the background color of the canvas.

You may also customize the grid line color, lineStroke, gridline frequency by using the respective variables.

A demo of donut chart by using the same plug-in

By using the same plug-in, you may create a donut chart based on jQuery as well. See this demo where I used an array of values to be displayed i.e. quarters from Jan to Mar, Apr to June and so on with respective numeric values.

jquery donut chart

See online demo and code

The markup for this demo:


The script:

You may workout the JS and CSS files to customize the color scheme.


Credit: aureliosanchez (plug-in download link)