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.



Features:

• 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.

Libraries

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>

JS

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

mimaChart({
    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?