@ahrefs/bs-recharts

Bucklescript bindings for Recharts

Stats

stars šŸŒŸissues āš ļøupdated šŸ› created šŸ£size šŸ‹ļøā€ā™€ļø
533Jun 6, 2021May 1, 2018Minified + gzip package size for @ahrefs/bs-recharts in KB

Readme

bs-recharts

This is Bucklescript bindings for Recharts. šŸš§ It is not completed, we are adding bindings as we go. Doesn't follow semver at this point. šŸš§

Install, npm

yarn add @ahrefs/bs-recharts

Setup

Add bs-recharts to bs-depenencies in your bsconfig.json!

{
  /* ... */
  "bs-dependencies": [
    "@ahrefs/bs-recharts"
  ],
  /* ... */
}

Usage Example

open BsRecharts;

[@react-component]
let make = (~data) =>
  <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(ReasonReact.reactElement);
  ...
};

you will use it like this:

<XAxis
  interval=PreserveStart
  label=Str("text")
/>
<XAxis
  interval=Num(12)
  label=Node(
    <span>
      (ReasonReact.stringToElement("text"))
    </span>
  )
/>

Check Recharts documentation for available props.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.