@float-capital/rescript-recharts

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.