Interactive SVG-Based Bar Chart with Pure JavaScript – MDProgressBarChart

Preview:

Description:

MDProgressBarChart is a pure JavaScript library that draws an interactive SVG based bar chart progressively.

How to use it:

Load the MDProgressBarChart.js JavaScript library in the html page.

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

Create a SVG element for the pie chart.

<svg width="800" height="400" id="mainSVG"></svg>

Build the data structure and insert it into a JSON file named data.json.

{
  "data" : {
  "values" : [620, 311, 653, 275, 520, 342],
  "marginBetweenBars" : 2,
  "barColors" : ["#1ABC9C", "#3498DB", "#9B59B6", "#34495E", "#F1C40F", "#E74C3C"],
  "labelColors" : ["#000000"],
  "labelFont" : "Verdana",
  "labelText" : ["aaa", "bbb", "label 3", "label 4", "something", "final label"],
  "labelPaddingLeft" : 10,
  "height" : 400,
  "width" : 400,
  "backgroundColor" : "#445566",
  "label" : true,
  "value" : true,
  "labelWidth" : 50
  }
}