react-native-skia-charts

High-performance charts for react-native 🚀

This library is under development and is not ready for production use. Yet.

Example

Clone the repo and run one of the following commands to run the example app:

npm run example:ios

or

npm run example:android

Installation

npm install d3-scale
npm install react-native-reanimated
npm install react-native-gesture-handler
npm install @shopify/react-native-skia
npm install react-native-skia-charts

Usage

import { LineChart, StackedBarChart } from 'react-native-skia-charts';
// ...
<LineChart
  datasets={[{
    label: 'Default line',
    color: '#DE5C9D',
    data: [
      {
        x: '2020-01-02',
        y: 10,
      },
      {
        x: '2020-01-03',
        y: 20,
      },
      ...
    ],
  }]}
  fontFile={require("../assets/fonts/Roboto-Regular.ttf")}
/>

Configuration props

datasets (required)

The data to be displayed in the chart. The data should be an array of objects with a date and value properties.

fontFile (required)

A font file to be used in the chart. Example: require("../assets/fonts/Roboto-Regular.ttf")

startDate

If not provided, startDate will be calculated from data prop.

endDate

If not provided, endDate will be calculated from data prop.

onTouchStart

onTouchEnd

fontSize

chartColor

yAxisMax

tension

labelsColor

paddingVertical

paddingHorizontal

tooltip

borderRadius

Chart types

• Line chart (draft state)
• Tooltip (todo)
• Bar chart (draft state)
• Stacked Bar chart (todo)
• Multiple lines chart (todo)
• Donut chart (todo)

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Contact me

[email protected]

---

Made with create-react-native-library