Skip to content

Repository files navigation

rn-chart-desk 📊

A powerful & easy to use chart library for creating customizable charts in React Native (Please note that this package does not have iOS support yet).

Table of content:

TODO: iOS Version

⚠️ When passing data to any of the charts, make sure you pass as JSON.stringify()

Installation

npm install rn-chart-desk

LineChart

rn-chart-desk React Native Line Chart

import{LineChart}from"rn-chart-desk";// ...<LineChartstyle={{flex: 1}}data={JSON.stringify({values: [34,2,15,29,5],label: "Second Test",color: 'blue'})}description={""}xAxisLabels={JSON.stringify(["Subday","Monday","Tuesday","Wednesday","Thursday"])}roundValues={true}/>

PieChart

rn-chart-desk React Native Pie Chart

import{PieChart}from"rn-chart-desk";// ...<PieChartstyle={{flex: 1}}data={JSON.stringify([{value: 5,label: "Label 1"},{value: 7,label: "Label 2"},{value: 20,label: "Label 3"},])}description={"Pie chart for data"}roundValues={true}/>

BarChart

rn-chart-desk React Native Bar Chart

import{BarChart}from"rn-chart-desk";// ...<BarChartstyle={{flex: 1}}data={JSON.stringify({values: [34,2,15,29,5],label: "Second Test",color: "blue"},)}description={"Bar chart for data"}xAxisLabels={JSON.stringify(["Jan","Feb","Mar","Apr","May"])}roundValues={false}/>

GroupedBarChart

rn-chart-desk React Native Grouped Bar Chart

import{GroupedBarChart}from"rn-chart-desk";// ...<GroupedBarChartstyle={{flex: 1}}data={JSON.stringify([{values: [3,2,9,10,3],label: "First Dataset",color: "#F06F00"},{values: [5,20,7,1,34],label: "Second Dataset",color: 'blue'},{values: [30,2,15,29,5],label: "Third Dataset",color: 'green'},])}description={""}xAxisLabels={JSON.stringify(["Jan","Feb","Mar","Apr","May"])}roundValues={true}/>

Remove decimal places on chart values

You can round all values on any of the charts by setting roundValues to true or false

roundValues={true|false}

Author

Babalola Macaulay

Cheers 🥂

Acknowlegement

This package was made possible, thanks to being able to leverage and build on top of the amazing work that was done on MPAndroidChart.

Contributing

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

License

MIT

About

No description, website, or topics provided.

Resources

Code of conduct

Contributing

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Used by

Contributors

Languages