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', // options are line, bar, pie, donut, dial. Default is donut
ratio: '', // force an aspect ratio for the chart. defaults to 2:1
maxHeight: 'none', // set a maximum height for the chart. defaults to none, obeys aspect ratio
format: '', // display values as regular numbers (blank), % or $
scale: {
    lowest: 0, // set the lowest value on the scale, default is zero, set to "auto" to be automatic
    highest: 100, // set the highest value on the scale, leave undefined for automatic
    steps: 10, // number of steps in the scale
    roundTo: 100, // round the scale to
    defaultLabel: '', // if no label or a blank label is provided use this default label instead
    sort: true, // sort by highest value set to "false" to use your own provided sorted order,
    types: ['bar', 'pie', 'donut', 'line'], // allowed chart types for the viewer to switch between. default is all
    parentLabels: true, // when hovering a point automatically add the parent names to the label
    parentLabelsSeparator: ', ', // sets the string that is used between labels for creating parent labels
sort: function(a, b){}, // custom sort function to use or a string to use a function in window
onclick: function(event, dataPoint, chart) {}, // define the custom click handler for when a data point is clicked,
onchange: function(changeType, config, chart) {}, // execute this function whenever a chart's config is changed
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.