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', // 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.
