@float-capital/rescript-recharts
v0.1.2
Published
ReScript bindings for Recharts
Downloads
10
Readme
rescript-recharts
This library provides ReScript bindings for Recharts.
It is a fork of ahrefs/bs-recharts, updated to the new ReScript syntax.
Installation
npm install @float-capital/rescript-recharts --save-dev
Setup
Add rescript-recharts to bs-depenencies
in your bsconfig.json
:
{
"bs-dependencies": ["@float-capital/rescript-recharts"]
}
Usage Example
@react.component
let make = (~data) => {
open Recharts;
<ResponsiveContainer height={Px(200.)} width={Px(300.)}>
<BarChart
barCategoryGap={Px(1.)}
margin={"top": 0, "right": 0, "bottom": 0, "left": 0}
data>
<Bar name="Some bar" dataKey="pv" fill="#2078b4" stackId="a" />
<Bar name="Other bar" dataKey="uv" fill="#ff7f02" stackId="a" />
<Tooltip />
<Legend align=#left iconType=#circle />
</BarChart>
</ResponsiveContainer>
}
Helpers
Some of polymorphic params are represented as a variant, list below:
module AxisInterval = {
type arg =
| PreserveStart
| PreserveEnd
| PreserveStartEnd
| Num(int)
};
module PxOrPrc = {
type arg =
| Px(int)
| Prc(int)
};
module StrOrNode = {
type arg =
| Str(string)
| Node(React.reactElement)
};
you will use it like this:
<XAxis
interval=PreserveStart
label=Str("text") />
<XAxis
interval=Num(12)
label=Node(
<span>
(React.string("text"))
</span>
) />
Check the Recharts documentation for available props.