TheWidlarzGroup / charts-library

React native charts library

Made with React Native, Typescript, React native svg, React native svg charts

---

Description

This app is a part of an article
Make your custom charts with react-native-svg-charts and typescript. Step-by-step tutorial

---

Installation:

• Clone the repo
• Run yarn from the root
• Run cd ios && pod install && cd ..
• Run the metro with yarn start
• Open the app either in a simulator with yarn ios / yarn android or on a physical device
• Use the examples in your project 😄

---

Table of Contents

• React-native-svg-charts setup

• Area chart

  • Base example with props and typescript
  • Line with circle decorators and grid
  • Start props
  • Curve and gradient
  • Multiple areas on the one chart
  • Area chart props summary
  • Stacked area chart

• Bar chart

  • Basic Bar chart
  • Spacing and gradient
  • yAccessor and different bar colors
  • Dashed bars
  • Grades
  • Horizontal Bar chart
  • Bar chart props summary
  • Stacked Bar chart

• Line chart

  • Basic Line chart
  • Line shadow
  • Line round shape with grid and gradient
  • Line steps shape
  • Partial line with the shadow
  • Multiple lines chart
  • Line chart with average
  • Line chart props summary

• Pie chart

  • Pie chart data
  • Basic Pie chart
  • Inner radius wth pad angle and sort
  • Corner radius and labels
  • Slice outer radius
  • Nested pie charts
  • Pie chart props summary

• Progress circle

  • Basic progress circle
  • Start angle and end angle
  • Progress number corner radius and stroke width
  • Combine stroke width with the angles and text - Speedometer
  • Nested multiple progress circles
  • Colored bows
  • Pac-man
  • Progress circle props summary

• Axes

  • Axis Y
  • Axis Y Line
  • Axis X
  • Axis X Line
  • Both Axes

• Summary