Usage

Rendering a basic bar chart is as simple as importing the chart component and passing in your chart data as a prop.

Bar Chart

import React from 'react';
import BarChart from'../src/Charts/BarChart/barChart.jsx'; import data from './data.jsx';

// tl;dr
const MyChart = () => {
  return (
      <div className="container">
        <BarChart
          data={data}
        />
      </div>
  )
}

export default MyChart;

Left Bar Chart

import React from 'react';
import BarChartLeft from'../src/Charts/BarChart/barChartLeft.jsx';
import data from './data.jsx';

// tl;dr
const MyChart = () => {
  return (
      <div className="container">
        <BarChartLeft
          data={data}
        />
      </div>
  )
}

export default Main;


Props for Chart Customization

Below are the props that you may pass in to customize your charts:

Width

Prop Type Units Default
width Number px 600

Height

Prop Type Units Default
height Number px 300

Title

Prop Type Units Default
title String N/A 'Default Title'

Font size

Prop Type Units Default
fontSize Number N/A 14

Title font size

Prop Type Units Default
titleFontSize Number N/A 18

Font style

Prop Type Units Default
fontStyle String N/A 'Sans Serif'

x-axis label

Prop Type Units Default
xAxisLabel String N/A 'Default X'

y-axis label

Prop Type Units Default
yAxisLabel String N/A 'Default Y'

Margins

Prop Type Units Default
margins Object px { top: 30, right: 30, bottom: 50, left: 55 }

Colors

Prop Type Units Default
colors Array RGB/HEX ['#E71D36', '#26408B', '#FF9F1C', '#767B91', '#0FA3B1']