venturalp / react-frappe-charts

Lightweight React Charts

React Frappe Charts

React wrapper for Frappe Charts with TypeScript definitions and Storybook playground

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] }]
      }}
    />
  );
}

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!