Created by Jace Sleeman | Person98 LLC
npm install react-native-charts-plus
# or
yarn add react-native-charts-plus- 📊 Beautiful, customizable charts
- 🚀 Smooth animations
- 📱 Fully responsive
- 🔧 Highly customizable
- 📲 Touch interaction support
- 🎨 Customizable styles and colors
- 📝 Comprehensive TypeScript definitions
- Bar Chart: Vertical bar charts for comparing values
- Percentage Bar Chart: Horizontal percentage bars for visualizing proportions
- Pie Chart: Circular charts with customizable slices and donut option
- Ring Chart: Multiple concentric rings showing progress or completion
- Line Chart: Line graphs with customizable curves and gradient fills
- Radar Chart: Spider/radar charts for multi-variable data visualization
- Bubble Chart: X-Y coordinate bubbles with size as third dimension
- Gauge Chart: Semi-circular gauge/dial for displaying a single value
- Contribution Chart: GitHub-style contribution grid for visualizing activity over time
A customizable bar chart component.
import { BarChart } from 'react-native-charts-plus';
// Example usage
const MyBarChart = () => {
const data = [
{ value: 50, label: 'Jan', color: '#FF5733' },
{ value: 80, label: 'Feb', color: '#33FF57' },
{ value: 65, label: 'Mar', color: '#3357FF' },
{ value: 100, label: 'Apr', color: '#F3FF33' },
{ value: 45, label: 'May', color: '#FF33F3' },
];
return (
<BarChart
data={data}
height={300}
barWidth={40}
spacing={20}
showValues={true}
showLabels={true}
valueFormatter={(value) => `$${value}`}
animated={true}
animationDuration={1000}
onBarPress={(item, index) => {
console.log(`Bar ${index} pressed with value ${item.value}`);
}}
/>
);
};A component that displays data as horizontal percentage bars, making it easy to visualize proportions.
import { PercentageBarChart } from 'react-native-charts-plus';
// Example usage
const MyPercentageBarChart = () => {
const data = [
{ value: 30, label: 'Category A', color: '#FF5733' },
{ value: 25, label: 'Category B', color: '#33FF57' },
{ value: 15, label: 'Category C', color: '#3357FF' },
{ value: 20, label: 'Category D', color: '#F3FF33' },
{ value: 10, label: 'Category E', color: '#FF33F3' },
];
return (
<PercentageBarChart
data={data}
showLabels={true}
showValues={true}
valueFormatter={(value) => `${value}%`}
animated={true}
animationDuration={1000}
onSlicePress={(item, index) => {
console.log(`Item ${index} pressed with value ${item.value}`);
}}
/>
);
};A component that displays data as a circular pie chart with customizable slices.
import { PieChart } from 'react-native-charts-plus';
// Example usage
const MyPieChart = () => {
const data = [
{ value: 30, label: 'Category A', color: '#FF5733' },
{ value: 25, label: 'Category B', color: '#33FF57' },
{ value: 15, label: 'Category C', color: '#3357FF' },
{ value: 20, label: 'Category D', color: '#F3FF33' },
{ value: 10, label: 'Category E', color: '#FF33F3' },
];
return (
<PieChart
data={data}
radius={120}
showLabels={true}
showValues={true}
valueFormatter={(value) => `${value}%`}
animated={true}
animationDuration={1000}
donut={true}
donutRadius={60}
centerLabel="Total"
showLegend={true}
legendPosition="bottom"
onSlicePress={(item, index) => {
console.log(`Slice ${index} pressed with value ${item.value}`);
}}
/>
);
};A component that displays data as concentric rings showing progress or completion.
import { RingChart } from 'react-native-charts-plus';
// Example usage
const MyRingChart = () => {
const data = [
{
value: 75,
total: 100,
label: 'Project A',
fullColor: '#FF5733',
emptyColor: '#FFD6CC',
},
{
value: 45,
total: 100,
label: 'Project B',
fullColor: '#33FF57',
emptyColor: '#CCFFDB',
},
{
value: 90,
total: 100,
label: 'Project C',
fullColor: '#3357FF',
emptyColor: '#CCD6FF',
},
];
return (
<RingChart
data={data}
ringThickness={20}
ringSpacing={10}
showLabels={true}
showValues={true}
valueFormatter={(value, total) => `${value}/${total}`}
animated={true}
animationDuration={1000}
showLegend={true}
legendPosition="bottom"
onRingPress={(item, index) => {
console.log(
`Ring ${index} pressed with value ${item.value}/${item.total}`
);
}}
/>
);
};A component that displays data as a line graph with customizable curves and gradient fills.
import { LineChart } from 'react-native-charts-plus';
// Example usage
const MyLineChart = () => {
const data = [
{ value: 50, label: 'Jan' },
{ value: 80, label: 'Feb' },
{ value: 65, label: 'Mar' },
{ value: 100, label: 'Apr' },
{ value: 45, label: 'May' },
];
return (
<LineChart
data={data}
height={300}
showArea={true}
areaOpacity={0.2}
lineWidth={3}
showDots={true}
dotSize={6}
showLabels={true}
showValues={true}
showGrid={true}
curveType="natural"
showGradient={true}
gradientColors={['#FF5733', '#33FF57']}
animated={true}
animationDuration={1000}
onPointPress={(item, index) => {
console.log(`Point ${index} pressed with value ${item.value}`);
}}
/>
);
};A component that displays multi-variable data as a spider/radar chart.
import { RadarChart } from 'react-native-charts-plus';
// Example usage
const MyRadarChart = () => {
const data = [
[
{ value: 80, label: 'Speed' },
{ value: 70, label: 'Power' },
{ value: 90, label: 'Range' },
{ value: 60, label: 'Agility' },
{ value: 75, label: 'Durability' },
],
[
{ value: 70, label: 'Speed' },
{ value: 85, label: 'Power' },
{ value: 65, label: 'Range' },
{ value: 80, label: 'Agility' },
{ value: 90, label: 'Durability' },
],
];
return (
<RadarChart
data={data}
radius={150}
showLabels={true}
showValues={true}
showAxis={true}
showPolygons={true}
showGrid={true}
gridLevels={5}
animated={true}
animationDuration={1000}
showLegend={true}
legendPosition="bottom"
onPointPress={(item, seriesIndex, pointIndex) => {
console.log(
`Point at series ${seriesIndex}, index ${pointIndex} pressed with value ${item.value}`
);
}}
/>
);
};A component that displays data as bubbles on an X-Y coordinate system, with the size of each bubble representing a third dimension of data.
import { BubbleChart } from 'react-native-charts-plus';
// Example usage
const MyBubbleChart = () => {
const data = [
{ x: 10, y: 20, size: 30, label: 'Item A', color: '#FF5733' },
{ x: 30, y: 40, size: 20, label: 'Item B', color: '#33FF57' },
{ x: 50, y: 30, size: 40, label: 'Item C', color: '#3357FF' },
{ x: 70, y: 50, size: 25, label: 'Item D', color: '#F3FF33' },
{ x: 90, y: 10, size: 35, label: 'Item E', color: '#FF33F3' },
];
return (
<BubbleChart
data={data}
width={350}
height={300}
showLabels={true}
showValues={true}
xAxisTitle="X Axis"
yAxisTitle="Y Axis"
valueFormatter={(x, y, size) => `(${x}, ${y}) - Size: ${size}`}
showGrid={true}
animated={true}
animationDuration={1000}
onBubblePress={(item, index) => {
console.log(`Bubble ${index} pressed with values (${item.x}, ${item.y}, ${item.size})`);
}}
/>
);
};A component that displays a single value on a semi-circular gauge, similar to a speedometer or dial.
import { GaugeChart } from 'react-native-charts-plus';
// Example usage
const MyGaugeChart = () => {
const data = {
value: 75,
minValue: 0,
maxValue: 100,
label: 'Progress',
color: '#3357FF',
backgroundColor: '#E0E0E0',
valueColor: '#333333',
};
return (
<GaugeChart
data={data}
width={300}
height={200}
radius={120}
thickness={20}
showLabels={true}
showValues={true}
showMinMax={true}
valueFormatter={(value) => `${value}%`}
animated={true}
animationDuration={1000}
needleColor="#FF5733"
needleBaseColor="#333333"
needleBaseSize={15}
showSections={true}
sections={[
{ value: 25, color: '#FF5733', label: 'Low' },
{ value: 50, color: '#F3FF33', label: 'Medium' },
{ value: 75, color: '#33FF57', label: 'Good' },
{ value: 100, color: '#3357FF', label: 'Excellent' },
]}
showTicks={true}
tickCount={5}
centerLabel="75%"
onPress={(item) => {
console.log(`Gauge pressed with value ${item.value}`);
}}
/>
);
};A component that displays a GitHub-style contribution grid, showing activity patterns over time.
import { ContributionChart } from 'react-native-charts-plus';
// Example usage
const MyContributionChart = () => {
// Generate sample data for the past year
const generateSampleData = () => {
const data = [];
const today = new Date();
const oneYearAgo = new Date(today);
oneYearAgo.setFullYear(today.getFullYear() - 1);
// Loop through each day in the past year
for (let d = new Date(oneYearAgo); d <= today; d.setDate(d.getDate() + 1)) {
// Generate a random value (0-15) with higher probability of lower values
const rand = Math.random();
let value = 0;
if (rand > 0.6) value = Math.floor(Math.random() * 5) + 1; // 1-5 (40% chance)
if (rand > 0.85) value = Math.floor(Math.random() * 5) + 5; // 5-10 (15% chance)
if (rand > 0.95) value = Math.floor(Math.random() * 5) + 10; // 10-15 (5% chance)
// Format the date as YYYY-MM-DD
const year = d.getFullYear();
const month = String(d.getMonth() + 1).padStart(2, '0');
const day = String(d.getDate()).padStart(2, '0');
const dateString = `${year}-${month}-${day}`;
data.push({
value,
date: dateString,
});
}
return data;
};
const data = generateSampleData();
return (
<ContributionChart
data={data}
height={200}
cellSize={14}
cellSpacing={2}
cellBorderRadius={2}
showLabels={true}
showTooltip={true}
tooltipFormatter={(value, date) => `${value} contributions on ${date}`}
emptyColor="#ebedf0"
colorScale={['#9be9a8', '#40c463', '#30a14e', '#216e39']}
thresholds={[1, 5, 10]}
animated={true}
animationDuration={1500}
showMonthLabels={true}
showDayLabels={true}
weeksToShow={52}
onCellPress={(item, index) => {
console.log(`Cell ${index} pressed with value ${item.value} on ${item.date}`);
}}
/>
);
};Each chart component accepts a variety of props to customize its appearance and behavior. Please refer to the TypeScript definitions for a complete list of available props.
interface DataPoint {
value: number;
label: string;
color?: string;
outlineColor?: string;
outlineWidth?: number;
labelBackgroundColor?: string;
}
interface RingDataPoint {
value: number;
total: number;
label: string;
fullColor?: string;
emptyColor?: string;
}
interface LineChartDataPoint {
value: number;
label: string;
color?: string;
dotColor?: string;
dotSize?: number;
showDot?: boolean;
customDotComponent?: React.ReactNode;
}
interface RadarChartDataPoint {
value: number;
label: string;
color?: string;
fillColor?: string;
fillOpacity?: number;
strokeWidth?: number;
dotColor?: string;
dotSize?: number;
showDot?: boolean;
}
interface BubbleChartDataPoint {
x: number;
y: number;
size: number;
label: string;
color?: string;
borderColor?: string;
borderWidth?: number;
}
interface GaugeChartDataPoint {
value: number;
minValue?: number;
maxValue?: number;
label: string;
color?: string;
backgroundColor?: string;
valueColor?: string;
}
interface ContributionDataPoint {
value: number;
date: string;
color?: string;
}
// Props interfaces are also available for each chart type:
// BarChartProps, PercentageBarChartProps, PieChartProps, RingChartProps,
// LineChartProps, RadarChartProps, BubbleChartProps, GaugeChartProps, ContributionChartPropsMIT © 2025 Person98 LLC (Jace Sleeman)
Made with create-react-native-library