mimaCharts ia a minimal vanilla javascript library to provide extendable material design charts. mimaCharts is simply short for "minimal & material charts".
The guiding principles:
- 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.
Usage Javascript
;
Usage Web Component Style
Only include the mimaCharts.min.js script once per page, include as many tags as you need.
{ "type": "donut", data: [{"l":"slice","v":10}] }
Config
type: 'line' // options are line, bar, pie, donut, dial. Default is donutratio: '' // force an aspect ratio for the chart. defaults to 2:1maxHeight: 'none' // set a maximum height for the chart. defaults to none, obeys aspect ratioscale:lowest: 0 // set the lowest value on the scale, default is zero, set to "auto" to be automatichighest: 100 // set the highest value on the scale, leave undefined for automaticsteps: 10 // number of steps in the scaleroundTo: 100 // round the scale todefaultLabel: '' // if no label or a blank label is provided use this default label insteadsort: 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{} // define the custom click handler for when a data point is clicked,{} // execute this function whenever a chart's config is changeddataLevel: 2 // for line and bar charts, what level of data do you want to stop rendering at?