react-d3-bar-graph

A component that renders a bar graph using d3

Install

npm install --save react-d3-bar-graph

or

yarn add react-d3-bar-graph

Import

import { BarGraph } from "react-d3-bar-graph";

Usage

<BarGraph
  width={400}
  height={400}
  yRange={100}
  xValue="song"
  yValue="popularity"
  data={data}
  ticks={3}
  axisStyles={{
    color: "#0BC5EA",
    "font-size": "15px",
  }}
  title="Most popular songs"
  xAxisSlanted={true}
  colors={["purple", "red", "black"]}
/>

Props

| Property | Type | Required | Default | Description | | ------------ | ------- | -------- | ------- | --------------------------------------------------------------------------- | | data | Array | true | - | An array to map the data | | xValue | String | true | - | Value to map x-axis | | yValue | String | true | - | Value to map y-axis | | yRange | Number | true | - | Max y range | | ticks | Number | false | 5 | Number of ticks on y-axis | | width | Number | false | 400 | Width of the graph | | height | Number | false | 400 | Height of the graph | | styles | Object | false | - | How to style the graph and bars (ex: {{fill: "red"}} (Note: Using fill will override the colors prop) | | xAxisStyles | Object | false | - | How to style the x-axis (ex: {{color: "purple"}}) | | yAxisStyles | Object | false | - | How to style the y-axis (ex: {{color: "purple"}}) | | axisStyles | Object | false | - | How to style both x and y axis (overrides xAxisStyles and yAxisStyles prop) | | xAxisSlanted | Boolean | false | false | Whether to make the x-axis labels slanted | | title | String | false | "" | Title of the graph | | titleStyles | Object | false | - | How to style the title | | colors | Array | false | ["black", "red"] | How to style individual bars |