/react-frappe-charts

Lightweight React Charts

Primary LanguageJavaScript

React Frappe Charts

React wrapper for Frappe Charts with TypeScript definitions and Storybook playground

Bundlephobia Bundlephobia

Installation

React Frappe Charts requires React 16.8.0 or later.

$ npm install --save react-frappe-charts

Usage

import ReactFrappeChart from "react-frappe-charts";

export default function MyChart(props) {
  return (
    <ReactFrappeChart
      type="bar"
      colors={["#21ba45"]}
      axisOptions={{ xAxisMode: "tick", yAxisMode: "tick", xIsSeries: 1 }}
      height={250}
      data={{
        labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        datasets: [{ values: [18, 40, 30, 35, 8, 52, 17, 4] }]
      }}
      chartRef={ ref => {/* do something with the chart's React DOM reference, i.e. save to some variable, so later can do <variable>.export() to export the cart */} }
    />
  );
}

Updating the data prop would update the chart with new data.

Playground

Use Storybook Playground to tweak different props and see their effect on the chart rendered

Contributing

PRs are welcome!