create-stackbar-chart v1.0.8

D3 based Stacked Bar Chart

A library of React components created using create-react-app.

Installation

Run the following command: npm install create-stackbar-chart --save

Configuration

{
  svgContainer: {
    margins: { top: 10, right: 30, bottom: 20, left: 30 },
    height: 500,
    minWidth: 300
  },
  chartData: {
    data: newData,
    stackKeys: ["Mango", "Orange", "Apple"],
    xAxisBinding: "year"
  },
  bars: {
    colors: ["#74bd8b", "#ff6c6c", "#5ca5e9"]
  },
  legend: {
    show: true
  },
  tooltip: {
    show: true,
    width: 80
  },
  xAxisFormat: {
    tickPadding: 12,
    tickFormat: "%d",
    showGrid: true,
    tickValues: null // pass your custom values in array. For ex. [1,2,3,4,5]
  },
  yAxisFormat: {
    tickCount: 4,
    showGrid: true,
    tickPadding: 12
  }
}

How to use

import React from "react";
import StackBarChart from "create-stackbar-chart";

function App() {
const config = {
  svgContainer: {
    margins: { top: 10, right: 30, bottom: 20, left: 30 },
    height: 500,
    minWidth: 300
  },
  chartData: {
    data: newData,
    stackKeys: ["Mango", "Orange", "Apple"],
    xAxisBinding: "year"
  },
  bars: {
    colors: ["#74bd8b", "#ff6c6c", "#5ca5e9"]
  },
  legend: {
    show: true
  },
  tooltip: {
    show: true,
    width: 80
  },
  xAxisFormat: {
    tickPadding: 12,
    tickFormat: "%d",
    showGrid: true,
    tickValues: null 
  },
  yAxisFormat: {
    tickCount: 4,
    showGrid: true,
    tickPadding: 12
  }
};
return (
  <div className="App">
    <StackBarChart {...config} />
  </div>
);
}

export default App;