extensible react chart library
First, install necessary packages. e.g. If you need bar chart and axis then
npm install --save @representation/bar
npm install --save @representation/axis
Or
yarn add @representation/bar
yarn add @representation/axis
import React from 'react'
import { BarChart, Bar } from '@representation/bar'
import { XAxis, YAxis } from '@representation/axis'
function Chart() {
return (
<BarChart
data={{ a: 400, b: 300, c: 100 }}
width={1000}
height={300}
>
<Bar dataKey="a" fill="#00c3ff" />
<Bar dataKey="b" fill="rgba(0, 138, 255, 0.8)" />
<Bar dataKey="c" fill="#4f5bff" />
<YAxis stroke="#ccc" />
<XAxis stroke="#ccc" />
</BarChart>
)
}
Result:
If you want make custom chart children then install @representation/core
npm install --save @representation/core
Or
yarn add @representation/core
Then, use withChart
and this.props.chart
to get the chart data you need.
For example, getBarXPosition
return the x-axis position of the bar of the dataKey.
So if you want to put your the custom child in the middle of the two bars, write the code like this:
import { withChart } from '@representation/core'
function Step({ chart, fromDataKey, toDataKey, ...props }) {
const fromPosition = chart.getBarXPosition(fromDataKey)
const toPosition = chart.getBarXPosition(toDataKey)
const xPosition = (fromPosition + toPosition) / 2
return (
<rect
x={xPosition}
{...props}
/>
)
}
export default withChart(Step)
You can also use HTML tags with the svg foreignObject tag.
import React from 'react'
import { withChart } from '@representation/core'
import numeral from 'numeral'
import styles from './Step.module.scss'
function Step({ chart, fromDataKey, toDataKey, width, onClick }) {
const fromPosition = chart.getBarXPosition(fromDataKey)
const toPosition = chart.getBarXPosition(toDataKey)
const xPosition = (fromPosition + toPosition) / 2
const fromData = chart.data[fromDataKey]
const toData = chart.data[toDataKey]
const rate = toData / fromData
const stepHeight = 100
return (
<foreignObject
x={xPosition}
y={(chart.height / 2) - (stepHeight / 2)}
width={width}
height={stepHeight}
>
<div
className={styles.step}
onClick={onClick}
>
<div className={styles.content}>
<div className={styles.arrow}>
<i className="material-icons">
arrow_forward
</i>
</div>
<div className={styles.rate}>
{numeral(rate).format('0 %')}
</div>
</div>
</div>
</foreignObject>
)
}
export default withChart(Step)
Now you can use custom children!
import React from 'react'
import { BarChart, Bar } from '@representation/bar'
import { XAxis, YAxis } from '@representation/axis'
// Your custom children
import Step from 'Component/Step'
function Chart() {
return (
<BarChart
data={{ a: 400, b: 300, c: 100 }}
width={1000}
height={300}
>
<Bar dataKey="a" fill="#00c3ff" />
<Step fromDataKey="a" toDataKey="b" width={200} />
<Bar dataKey="b" fill="rgba(0, 138, 255, 0.8)" />
<Step fromDataKey="b" toDataKey="c" width={200} />
<Bar dataKey="c" fill="#4f5bff" />
<YAxis stroke="#ccc" />
<XAxis stroke="#ccc" />
</BarChart>
)
}
Result:
For more information see website/src/components/Step
Requirements
yarn install
yarn bootstrap
yarn build