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)