Create Material Design Style Charts using jQuery - Material Charts

Material Charts is a lightweight jQuery plugin helps you create nice, clean, Material Design styled charts / diagrams with plain html, CSS and JavaScript. Currently supports column / pie chart. More chart types will be coming soon.

How to use it:

1. Copy and include the JavaScript file material-charts.js, and the style sheet material-charts.css in your project.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  ...
<link rel="stylesheet" href="css/material-charts.css">
<script src="js/material-charts.js"></script>

2. Create an empty DIV element for the chart.

<div id="demo"></div>

3. Create datasets you want to plot as a bar chart.

var barchart = {
    "datasets": {
      "values": [5, 10, 30, 50, 20],
      "labels": [
        "JavaScript", 
        "Swift", 
        "Object-C", 
        "C++", 
        "Python"
      ], 
      "color": "blue"
    }
    // more options here
};

4. Initialize the plugin to render a basic bar chart inside the DIV element you just created.

MaterialCharts.bar("#demo", barchart)

5. Initialize the plugin to render a pie chart chart inside the DIV element you just created.

MaterialCharts.pie("#demo", piechart)

6. Chart options available.

// chart title
"title": "Example Bar Chart",

// height / width
"height": "300px",
"width": "500px",

// background color
"background": "#FFFFFF",

// shadow depth
"shadowDepth": "1"

Change log:

2015-09-07

• modifications to work with invisible charts

2015-09-01

• added pie chart support

---

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