https://github.com/sheshbabu/react-frappe-charts

Lightweight React Charts
https://github.com/sheshbabu/react-frappe-charts

chart-library charting-library frappe-charts react-charts react-component reactjs storybook

Last synced: 4 days ago
JSON representation

Lightweight React Charts

• Host: GitHub
• URL: https://github.com/sheshbabu/react-frappe-charts
• Owner: sheshbabu
• Created: 2019-09-02T16:03:26.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-06T12:47:17.000Z (almost 2 years ago)
• Last Synced: 2025-01-21T08:06:02.536Z (12 days ago)
• Topics: chart-library, charting-library, frappe-charts, react-charts, react-component, reactjs, storybook
• Language: JavaScript
• Homepage: https://react-frappe-charts.netlify.com
• Size: 1.72 MB
• Stars: 117
• Watchers: 4
• Forks: 32
• Open Issues: 19
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Frappe Charts

React wrapper for [Frappe Charts](https://frappe.io/charts) with TypeScript definitions and Storybook playground



[![Bundlephobia](https://flat.badgen.net/bundlephobia/minzip/[email protected])](https://bundlephobia.com/result?p=react-frappe-charts) [![Bundlephobia](https://flat.badgen.net/bundlephobia/min/[email protected])](https://bundlephobia.com/result?p=react-frappe-charts) [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://react-frappe-charts.netlify.app)

## Installation

**React Frappe Charts requires React 16.8.0 or later.**

```shell

$ npm install --save frappe-charts react-frappe-charts

```

## Usage

```ts

import ReactFrappeChart from "react-frappe-charts";

export default function MyChart(props) {

  return (

    

  );

}

```

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

### With Next.js

The underlying `frappe-charts` library should be transpiled to avoid module loading issues. Install [next-transpile-modules](https://github.com/martpie/next-transpile-modules) with your package manager and then use the following code snippet:

```js

/* next.config.js */

const withTM = require("next-transpile-modules")(["frappe-charts", "react-frappe-charts"]);

module.exports = withTM({

  /* Optionally, specify additional settings here */

});

```

## Export Chart

In order to export a chart we need to forward a ref to invoke the `chart.export()` feature from Frappe Charts.

Example:

```ts

import React, { useRef } from "react";

import ReactFrappeChart from "react-frappe-charts";

export default function MyChart(props) {

  const chartRef = useRef();

  const exportChart = () => {

    if (chartRef && chartRef.current) {

      chartRef.current.export();

    }

  };

  return (

    


      

      

        Export

      

    

  );

}

```


## Playground

Use [Storybook Playground](https://react-frappe-charts.netlify.com/?path=/story/playground--default) to tweak different props and see their effect on the chart rendered

## Contributing

PRs are welcome!