react-native-skia-charts's Introduction

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

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

react-native-skia-charts's People

Contributors

Stargazers

Watchers

{ label: 'First item', color: 'red', data: [ { date: '2020-01-01', value: 10, }, ... ], }, { label: 'Second item', color: 'green', data: [ { date: '2020-01-02', value: 20, }, ... ], }, ... ];