Rn-chart-desk NPM

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";

// ...

<LineChart
	style={{ 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";

// ...

<PieChart
	style={{ 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";

// ...

<BarChart
	style={{ 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";

// ...

<GroupedBarChart
  style={{ 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}
/>