Simple Material Design Charting Library – mimaCharts

Category: Chart & Graph , Javascript | March 29, 2019
Author: pleaseshutup
Views Total: 3,680
Official Page: Go to website
Last Update: March 29, 2019
License: MIT

Preview:

Simple Material Design Charting Library – mimaCharts

Description:

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

How to use it:

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

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

Prepare an array of data you want to present.

var data = [];

Specify the chart type you want to use.

config: {

  // line, bar, pie, donut, dial
  type: 'line',

  // for line and bar charts
  dataLevel: 2
  
},

Render a line chart on the page.

mimaChart(config, data);

More configuration options.

config: {

  // line, bar, pie, donut, dial
  type: 'line',

  // for line and bar charts
  dataLevel: 2,

  // force an aspect ratio for the chart. defaults to 2:1
  ratio: '', 

  // set a maximum height for the chart. defaults to none, obeys aspect ratio
  maxHeight: 'none', 

  // display values as regular numbers (blank), % or $
  format: '', 

  // scale options
  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
  },

  // custom sort function to use or a string to use a function in window
  sort: function(a, b){},

  // an array of lines to overlay over a bar or line chart that plot with the vertical scale
  scaleLines: [ 
    {
      l: 'line title',
      h: '1px', //line height
      v: 100, //value to plot at
    }
  ]
  
}

Callback functions.

config: {

  onclick: function(event, dataPoint, chart) {}, 
  onchange: function(changeType, config, chart) {}
  
}

Changelog:

03/29/2019

  • line chart line/dot size reduced

03/20/2019

  • scale lines class added to custom scale lines for customization with css

03/15/2019

  • configure scale line height

12/18/2018

  • use format for numbers on legend, bars and lines

08/18/2018

  • JS update

You Might Be Interested In:


Leave a Reply