Simple javascript library to create material design charts (Line, Pie, Bar, Donut)

mimaCharts ia a minimal vanilla javascript library to provide extendable material design charts. mimaCharts is simply short for “minimal material charts”. It is a simple, lightweight and easy-to-use JavaScript library for rendering responsive, beautiful, interactive, various types of charts/graphs following the Google Material Design guidelines. Currently supports line, bar, pie, donut, dial charts.


  • Minimal: vanilla javascript code to keep a tiny footprint so front-end sites can be as fast as possible.
  • Material: follow material design guidelines.
  • Responsive: Every chart can be used on a small phone, a small container on a large page or filling a television screen.
  • Single Config: A single & simple configuration for every possible chart so any chart can be changed into another chart (where appropriate).
  • Interactive: Charts can be a simple data visualization or integrated within an application to enable the user to change the chart config visually. Clicking into more detail or isolating a chart to expand and fill the screen with all available data/detail within reach.



Just download and place the mimaCharts.js library right before the closing body tag and we’re ready to go.

<script src="mimaCharts.min.js"></script>


Prepare an array of data you want to present and Specify the chart type you want to use.

    type: "donut",
    data: [{
        l: "slice", // "l" label
        v: 10, // "v" value

You can use following configuration to customize the chart

type: 'line', 
ratio: '', 
maxHeight: 'none', 
format: '', 
scale: {
    lowest: 0, // set the lowest value on the scale, default is zero, set to "auto" to be automatic
    highest: 100, 
    steps: 10, 
    roundTo: 100, 
    defaultLabel: '', 
    sort: true, // sort by highest value set to "false" to use your own provided sorted order,
    types: ['bar', 'pie', 'donut', 'line'], 
    parentLabels: true, 
    parentLabelsSeparator: ', ', 
sort: function(a, b){}, 
onclick: function(event, dataPoint, chart) {}, 
onchange: function(changeType, config, chart) {}, 
dataLevel: 2 // for line and bar charts, what level of data do you want to stop rendering at?

See live demo and download source code.


This awesome plugin is developed by pleaseshutup. Visit their official github repository for more information and follow for future updates.