isometric-bar-chart

Demo

https://chule.github.io/isometric-bar-chart/

Features

React barchart for displaying ordinal data using animated isometric bars

Installation

Install package from NPM

npm install isometric-bar-chart

Usage

import Barchart from "isometric-bar-chart";

const MyComponent = () => {
  const myData = [
    { name: "first", value: 12 },
    { name: "second", value: 20 },
    { name: "third", value: 30 },
    { name: "something", value: 0 },
    ...etc,
  ];

  return (
    <Barchart
      data={myData}
      svgWidth={800}
      svgHeight={400}
      marginTop={100}
      marginRight={50}
      marginBottom={50}
      marginLeft={50}
      color={"#AE3E33"}
      sizeCorrector={2}
      delayMultiplier={100}
      fontSize={16}
    />
  );
};

export default MyComponent;

Props

| Property | PropType | Required | Default Value | | --------------- | ------------------------------------- | -------- | ------------- | | data | custom(validates usage of scale keys) | false | data | | svgWidth | number | false | 800 | | svgHeight | number | false | 400 | | marginTop | number | false | 100 | | marginRight | number | false | 50 | | marginBottom | number | false | 50 | | marginLeft | number | false | 50 | | color | string | false | "#AE3E33" | | sizeCorrector | number | false | 2 | | delayMultiplier | number | false | 100 | | fontSize | number | false | 16 |

data

An array of data points with a value for the x axis and y axis respectively. The key for the x axis should be "name" and for the y axis should be "value"

[
  { "name": "#1", "value": 12 },
  { "name": "#2", "value": 20 },
  { "name": "#3", "value": 30 },
  { "name": "#4", "value": 0 },
  { "name": "#5", "value": 63 },
  { "name": "#6", "value": 35 },
  { "name": "#7", "value": 22 },
  { "name": "#8", "value": 35 },
  { "name": "#9", "value": 22 }
]