{"id":48532113,"url":"https://github.com/thejacedev/react-native-charts-plus","last_synced_at":"2026-04-08T00:03:57.693Z","repository":{"id":279520887,"uuid":"939078190","full_name":"thejacedev/react-native-charts-plus","owner":"thejacedev","description":"A beautiful, easy-to-use chart library for React Native applications.","archived":false,"fork":false,"pushed_at":"2025-05-11T15:32:30.000Z","size":2800,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-19T15:42:29.118Z","etag":null,"topics":["charts","expo","nextjs","react","react-native"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thejacedev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-02-26T00:35:49.000Z","updated_at":"2025-08-15T07:12:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"2f6eca2e-ddb0-41d1-9879-83c8d571d63f","html_url":"https://github.com/thejacedev/react-native-charts-plus","commit_stats":null,"previous_names":["therealperson98/react-native-charts-plus","thejacedev/react-native-charts-plus"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/thejacedev/react-native-charts-plus","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thejacedev%2Freact-native-charts-plus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thejacedev%2Freact-native-charts-plus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thejacedev%2Freact-native-charts-plus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thejacedev%2Freact-native-charts-plus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thejacedev","download_url":"https://codeload.github.com/thejacedev/react-native-charts-plus/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thejacedev%2Freact-native-charts-plus/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31533828,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"ssl_error","status_checked_at":"2026-04-07T16:28:06.951Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["charts","expo","nextjs","react","react-native"],"created_at":"2026-04-08T00:03:57.198Z","updated_at":"2026-04-08T00:03:57.678Z","avatar_url":"https://github.com/thejacedev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Charts Plus\n\n[![npm version](https://img.shields.io/npm/v/react-native-charts-plus.svg)](https://www.npmjs.com/package/react-native-charts-plus)\n[![npm downloads](https://img.shields.io/npm/dm/react-native-charts-plus.svg)](https://www.npmjs.com/package/react-native-charts-plus)\n[![license](https://img.shields.io/github/license/thejacedev/react-native-charts-plus.svg)](https://github.com/thejacedev/react-native-charts-plus/blob/main/LICENSE)\n[![platform](https://img.shields.io/badge/platform-ios%20%7C%20android-blue.svg)](https://github.com/thejacedev/react-native-charts-plus)\nA beautiful, easy-to-use chart library for React Native applications.\n\nCreated by Jace Sleeman | Person98 LLC\n\n## Installation\n\n```bash\nnpm install react-native-charts-plus\n# or\nyarn add react-native-charts-plus\n```\n\n## Features\n\n- 📊 Beautiful, customizable charts\n- 🚀 Smooth animations\n- 📱 Fully responsive\n- 🔧 Highly customizable\n- 📲 Touch interaction support\n- 🎨 Customizable styles and colors\n- 📝 Comprehensive TypeScript definitions\n\n## Chart Types\n\n- **Bar Chart**: Vertical bar charts for comparing values\n- **Percentage Bar Chart**: Horizontal percentage bars for visualizing proportions\n- **Pie Chart**: Circular charts with customizable slices and donut option\n- **Ring Chart**: Multiple concentric rings showing progress or completion\n- **Line Chart**: Line graphs with customizable curves and gradient fills\n- **Radar Chart**: Spider/radar charts for multi-variable data visualization\n- **Bubble Chart**: X-Y coordinate bubbles with size as third dimension\n- **Gauge Chart**: Semi-circular gauge/dial for displaying a single value\n- **Contribution Chart**: GitHub-style contribution grid for visualizing activity over time\n\n## Components\n\n### BarChart\n\nA customizable bar chart component.\n\n```jsx\nimport { BarChart } from 'react-native-charts-plus';\n\n// Example usage\nconst MyBarChart = () =\u003e {\n  const data = [\n    { value: 50, label: 'Jan', color: '#FF5733' },\n    { value: 80, label: 'Feb', color: '#33FF57' },\n    { value: 65, label: 'Mar', color: '#3357FF' },\n    { value: 100, label: 'Apr', color: '#F3FF33' },\n    { value: 45, label: 'May', color: '#FF33F3' },\n  ];\n\n  return (\n    \u003cBarChart\n      data={data}\n      height={300}\n      barWidth={40}\n      spacing={20}\n      showValues={true}\n      showLabels={true}\n      valueFormatter={(value) =\u003e `$${value}`}\n      animated={true}\n      animationDuration={1000}\n      onBarPress={(item, index) =\u003e {\n        console.log(`Bar ${index} pressed with value ${item.value}`);\n      }}\n    /\u003e\n  );\n};\n```\n\n### PercentageBarChart\n\nA component that displays data as horizontal percentage bars, making it easy to visualize proportions.\n\n```jsx\nimport { PercentageBarChart } from 'react-native-charts-plus';\n\n// Example usage\nconst MyPercentageBarChart = () =\u003e {\n  const data = [\n    { value: 30, label: 'Category A', color: '#FF5733' },\n    { value: 25, label: 'Category B', color: '#33FF57' },\n    { value: 15, label: 'Category C', color: '#3357FF' },\n    { value: 20, label: 'Category D', color: '#F3FF33' },\n    { value: 10, label: 'Category E', color: '#FF33F3' },\n  ];\n\n  return (\n    \u003cPercentageBarChart\n      data={data}\n      showLabels={true}\n      showValues={true}\n      valueFormatter={(value) =\u003e `${value}%`}\n      animated={true}\n      animationDuration={1000}\n      onSlicePress={(item, index) =\u003e {\n        console.log(`Item ${index} pressed with value ${item.value}`);\n      }}\n    /\u003e\n  );\n};\n```\n\n### PieChart\n\nA component that displays data as a circular pie chart with customizable slices.\n\n```jsx\nimport { PieChart } from 'react-native-charts-plus';\n\n// Example usage\nconst MyPieChart = () =\u003e {\n  const data = [\n    { value: 30, label: 'Category A', color: '#FF5733' },\n    { value: 25, label: 'Category B', color: '#33FF57' },\n    { value: 15, label: 'Category C', color: '#3357FF' },\n    { value: 20, label: 'Category D', color: '#F3FF33' },\n    { value: 10, label: 'Category E', color: '#FF33F3' },\n  ];\n\n  return (\n    \u003cPieChart\n      data={data}\n      radius={120}\n      showLabels={true}\n      showValues={true}\n      valueFormatter={(value) =\u003e `${value}%`}\n      animated={true}\n      animationDuration={1000}\n      donut={true}\n      donutRadius={60}\n      centerLabel=\"Total\"\n      showLegend={true}\n      legendPosition=\"bottom\"\n      onSlicePress={(item, index) =\u003e {\n        console.log(`Slice ${index} pressed with value ${item.value}`);\n      }}\n    /\u003e\n  );\n};\n```\n\n### RingChart\n\nA component that displays data as concentric rings showing progress or completion.\n\n```jsx\nimport { RingChart } from 'react-native-charts-plus';\n\n// Example usage\nconst MyRingChart = () =\u003e {\n  const data = [\n    {\n      value: 75,\n      total: 100,\n      label: 'Project A',\n      fullColor: '#FF5733',\n      emptyColor: '#FFD6CC',\n    },\n    {\n      value: 45,\n      total: 100,\n      label: 'Project B',\n      fullColor: '#33FF57',\n      emptyColor: '#CCFFDB',\n    },\n    {\n      value: 90,\n      total: 100,\n      label: 'Project C',\n      fullColor: '#3357FF',\n      emptyColor: '#CCD6FF',\n    },\n  ];\n\n  return (\n    \u003cRingChart\n      data={data}\n      ringThickness={20}\n      ringSpacing={10}\n      showLabels={true}\n      showValues={true}\n      valueFormatter={(value, total) =\u003e `${value}/${total}`}\n      animated={true}\n      animationDuration={1000}\n      showLegend={true}\n      legendPosition=\"bottom\"\n      onRingPress={(item, index) =\u003e {\n        console.log(\n          `Ring ${index} pressed with value ${item.value}/${item.total}`\n        );\n      }}\n    /\u003e\n  );\n};\n```\n\n### LineChart\n\nA component that displays data as a line graph with customizable curves and gradient fills.\n\n```jsx\nimport { LineChart } from 'react-native-charts-plus';\n\n// Example usage\nconst MyLineChart = () =\u003e {\n  const data = [\n    { value: 50, label: 'Jan' },\n    { value: 80, label: 'Feb' },\n    { value: 65, label: 'Mar' },\n    { value: 100, label: 'Apr' },\n    { value: 45, label: 'May' },\n  ];\n\n  return (\n    \u003cLineChart\n      data={data}\n      height={300}\n      showArea={true}\n      areaOpacity={0.2}\n      lineWidth={3}\n      showDots={true}\n      dotSize={6}\n      showLabels={true}\n      showValues={true}\n      showGrid={true}\n      curveType=\"natural\"\n      showGradient={true}\n      gradientColors={['#FF5733', '#33FF57']}\n      animated={true}\n      animationDuration={1000}\n      onPointPress={(item, index) =\u003e {\n        console.log(`Point ${index} pressed with value ${item.value}`);\n      }}\n    /\u003e\n  );\n};\n```\n\n### RadarChart\n\nA component that displays multi-variable data as a spider/radar chart.\n\n```jsx\nimport { RadarChart } from 'react-native-charts-plus';\n\n// Example usage\nconst MyRadarChart = () =\u003e {\n  const data = [\n    [\n      { value: 80, label: 'Speed' },\n      { value: 70, label: 'Power' },\n      { value: 90, label: 'Range' },\n      { value: 60, label: 'Agility' },\n      { value: 75, label: 'Durability' },\n    ],\n    [\n      { value: 70, label: 'Speed' },\n      { value: 85, label: 'Power' },\n      { value: 65, label: 'Range' },\n      { value: 80, label: 'Agility' },\n      { value: 90, label: 'Durability' },\n    ],\n  ];\n\n  return (\n    \u003cRadarChart\n      data={data}\n      radius={150}\n      showLabels={true}\n      showValues={true}\n      showAxis={true}\n      showPolygons={true}\n      showGrid={true}\n      gridLevels={5}\n      animated={true}\n      animationDuration={1000}\n      showLegend={true}\n      legendPosition=\"bottom\"\n      onPointPress={(item, seriesIndex, pointIndex) =\u003e {\n        console.log(\n          `Point at series ${seriesIndex}, index ${pointIndex} pressed with value ${item.value}`\n        );\n      }}\n    /\u003e\n  );\n};\n```\n\n### BubbleChart\n\nA component that displays data as bubbles on an X-Y coordinate system, with the size of each bubble representing a third dimension of data.\n\n```jsx\nimport { BubbleChart } from 'react-native-charts-plus';\n\n// Example usage\nconst MyBubbleChart = () =\u003e {\n  const data = [\n    { x: 10, y: 20, size: 30, label: 'Item A', color: '#FF5733' },\n    { x: 30, y: 40, size: 20, label: 'Item B', color: '#33FF57' },\n    { x: 50, y: 30, size: 40, label: 'Item C', color: '#3357FF' },\n    { x: 70, y: 50, size: 25, label: 'Item D', color: '#F3FF33' },\n    { x: 90, y: 10, size: 35, label: 'Item E', color: '#FF33F3' },\n  ];\n\n  return (\n    \u003cBubbleChart\n      data={data}\n      width={350}\n      height={300}\n      showLabels={true}\n      showValues={true}\n      xAxisTitle=\"X Axis\"\n      yAxisTitle=\"Y Axis\"\n      valueFormatter={(x, y, size) =\u003e `(${x}, ${y}) - Size: ${size}`}\n      showGrid={true}\n      animated={true}\n      animationDuration={1000}\n      onBubblePress={(item, index) =\u003e {\n        console.log(`Bubble ${index} pressed with values (${item.x}, ${item.y}, ${item.size})`);\n      }}\n    /\u003e\n  );\n};\n```\n\n### GaugeChart\n\nA component that displays a single value on a semi-circular gauge, similar to a speedometer or dial.\n\n```jsx\nimport { GaugeChart } from 'react-native-charts-plus';\n\n// Example usage\nconst MyGaugeChart = () =\u003e {\n  const data = {\n    value: 75,\n    minValue: 0,\n    maxValue: 100,\n    label: 'Progress',\n    color: '#3357FF',\n    backgroundColor: '#E0E0E0',\n    valueColor: '#333333',\n  };\n\n  return (\n    \u003cGaugeChart\n      data={data}\n      width={300}\n      height={200}\n      radius={120}\n      thickness={20}\n      showLabels={true}\n      showValues={true}\n      showMinMax={true}\n      valueFormatter={(value) =\u003e `${value}%`}\n      animated={true}\n      animationDuration={1000}\n      needleColor=\"#FF5733\"\n      needleBaseColor=\"#333333\"\n      needleBaseSize={15}\n      showSections={true}\n      sections={[\n        { value: 25, color: '#FF5733', label: 'Low' },\n        { value: 50, color: '#F3FF33', label: 'Medium' },\n        { value: 75, color: '#33FF57', label: 'Good' },\n        { value: 100, color: '#3357FF', label: 'Excellent' },\n      ]}\n      showTicks={true}\n      tickCount={5}\n      centerLabel=\"75%\"\n      onPress={(item) =\u003e {\n        console.log(`Gauge pressed with value ${item.value}`);\n      }}\n    /\u003e\n  );\n};\n```\n\n### ContributionChart\n\nA component that displays a GitHub-style contribution grid, showing activity patterns over time.\n\n```jsx\nimport { ContributionChart } from 'react-native-charts-plus';\n\n// Example usage\nconst MyContributionChart = () =\u003e {\n  // Generate sample data for the past year\n  const generateSampleData = () =\u003e {\n    const data = [];\n    const today = new Date();\n    const oneYearAgo = new Date(today);\n    oneYearAgo.setFullYear(today.getFullYear() - 1);\n\n    // Loop through each day in the past year\n    for (let d = new Date(oneYearAgo); d \u003c= today; d.setDate(d.getDate() + 1)) {\n      // Generate a random value (0-15) with higher probability of lower values\n      const rand = Math.random();\n      let value = 0;\n\n      if (rand \u003e 0.6) value = Math.floor(Math.random() * 5) + 1; // 1-5 (40% chance)\n      if (rand \u003e 0.85) value = Math.floor(Math.random() * 5) + 5; // 5-10 (15% chance)\n      if (rand \u003e 0.95) value = Math.floor(Math.random() * 5) + 10; // 10-15 (5% chance)\n\n      // Format the date as YYYY-MM-DD\n      const year = d.getFullYear();\n      const month = String(d.getMonth() + 1).padStart(2, '0');\n      const day = String(d.getDate()).padStart(2, '0');\n      const dateString = `${year}-${month}-${day}`;\n\n      data.push({\n        value,\n        date: dateString,\n      });\n    }\n\n    return data;\n  };\n\n  const data = generateSampleData();\n\n  return (\n    \u003cContributionChart\n      data={data}\n      height={200}\n      cellSize={14}\n      cellSpacing={2}\n      cellBorderRadius={2}\n      showLabels={true}\n      showTooltip={true}\n      tooltipFormatter={(value, date) =\u003e `${value} contributions on ${date}`}\n      emptyColor=\"#ebedf0\"\n      colorScale={['#9be9a8', '#40c463', '#30a14e', '#216e39']}\n      thresholds={[1, 5, 10]}\n      animated={true}\n      animationDuration={1500}\n      showMonthLabels={true}\n      showDayLabels={true}\n      weeksToShow={52}\n      onCellPress={(item, index) =\u003e {\n        console.log(`Cell ${index} pressed with value ${item.value} on ${item.date}`);\n      }}\n    /\u003e\n  );\n};\n```\n\n## Props\n\nEach 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.\n\n## Types\n\n```typescript\ninterface DataPoint {\n  value: number;\n  label: string;\n  color?: string;\n  outlineColor?: string;\n  outlineWidth?: number;\n  labelBackgroundColor?: string;\n}\n\ninterface RingDataPoint {\n  value: number;\n  total: number;\n  label: string;\n  fullColor?: string;\n  emptyColor?: string;\n}\n\ninterface LineChartDataPoint {\n  value: number;\n  label: string;\n  color?: string;\n  dotColor?: string;\n  dotSize?: number;\n  showDot?: boolean;\n  customDotComponent?: React.ReactNode;\n}\n\ninterface RadarChartDataPoint {\n  value: number;\n  label: string;\n  color?: string;\n  fillColor?: string;\n  fillOpacity?: number;\n  strokeWidth?: number;\n  dotColor?: string;\n  dotSize?: number;\n  showDot?: boolean;\n}\n\ninterface BubbleChartDataPoint {\n  x: number;\n  y: number;\n  size: number;\n  label: string;\n  color?: string;\n  borderColor?: string;\n  borderWidth?: number;\n}\n\ninterface GaugeChartDataPoint {\n  value: number;\n  minValue?: number;\n  maxValue?: number;\n  label: string;\n  color?: string;\n  backgroundColor?: string;\n  valueColor?: string;\n}\n\ninterface ContributionDataPoint {\n  value: number;\n  date: string;\n  color?: string;\n}\n\n// Props interfaces are also available for each chart type:\n// BarChartProps, PercentageBarChartProps, PieChartProps, RingChartProps,\n// LineChartProps, RadarChartProps, BubbleChartProps, GaugeChartProps, ContributionChartProps\n```\n\n## License\n\nMIT © 2025 Person98 LLC (Jace Sleeman)\n\n---\n\nMade with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthejacedev%2Freact-native-charts-plus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthejacedev%2Freact-native-charts-plus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthejacedev%2Freact-native-charts-plus/lists"}