D3 RESPONSIVE BAR CHART

D3 Responsive Bar Chart rendering for reusability purpose.

Installation

  npm install d3-responsive-barchart

Dependencies

  npm install d3

Options/Config

Following options are available:

Name	Type	Description
data	data: [{"x": "Bosnia and Herzegovina","y": 20,"units": "%"},
{"x": "India","y": 78,"units": "%"},{"x": "China","y": 64,"units": "%"}]	Data for bar chart
margin	Object { left: 10, top: 10, right: 10, bottom: 50 }	Specify margin
width	String	Width for SVG
height	String	height for SVG

Usage/Examples

HTML

<div id="barChartPlaceholder" class=""></div>

JS

const config = {
          width: 363,
          height: 100,
          data: [
          {
            "x": "Bosnia and Herzegovina",
            "y": 20,
            "units": "%"
          },
          {
            "x": "India",
            "y": 78,
            "units": "%"
          },
          {
            "x": "China",
            "y": 64,
            "units": "%"
          }]
        };
renderBarChart("#barChartPlaceholder", config)