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';
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';
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'] |