victory-native

What is victory-native?

Victory Native is a React Native library for creating data visualizations and charts. It provides a collection of modular charting components that can be combined to create complex visualizations. The library is designed to be highly customizable and easy to use, making it suitable for both simple and advanced data visualization needs in mobile applications.

What are victory-native's main functionalities?

Line Chart

The Line Chart feature allows you to create a simple line chart to visualize data trends over time. The code sample demonstrates how to use the VictoryLine component within a VictoryChart to plot a series of data points.

{
  "import": "{ VictoryChart, VictoryLine } from 'victory-native';",
  "component": "<VictoryChart>\n  <VictoryLine\n    data={[\n      { x: 1, y: 2 },\n      { x: 2, y: 3 },\n      { x: 3, y: 5 },\n      { x: 4, y: 4 },\n      { x: 5, y: 7 }\n    ]}\n  />\n</VictoryChart>"
}

Bar Chart

The Bar Chart feature allows you to create bar charts for categorical data comparison. The code sample shows how to use the VictoryBar component to display data as bars within a VictoryChart.

{
  "import": "{ VictoryChart, VictoryBar } from 'victory-native';",
  "component": "<VictoryChart>\n  <VictoryBar\n    data={[\n      { x: 'A', y: 2 },\n      { x: 'B', y: 3 },\n      { x: 'C', y: 5 },\n      { x: 'D', y: 4 },\n      { x: 'E', y: 7 }\n    ]}\n  />\n</VictoryChart>"
}

Pie Chart

The Pie Chart feature allows you to create pie charts to represent data proportions. The code sample demonstrates how to use the VictoryPie component to create a pie chart with different categories.

{
  "import": "{ VictoryPie } from 'victory-native';",
  "component": "<VictoryPie\n  data={[\n    { x: 'Cats', y: 35 },\n    { x: 'Dogs', y: 40 },\n    { x: 'Birds', y: 25 }\n  ]}\n/>"
}

Other packages similar to victory-native

react-native-svg-charts

React Native SVG Charts is a library for creating charts using react-native-svg. It offers a variety of chart types, including line, bar, and pie charts, similar to Victory Native. However, it relies on react-native-svg for rendering, which can provide more flexibility in terms of SVG manipulation and styling.

react-native-chart-kit

React Native Chart Kit is another library for creating charts in React Native applications. It provides a simple API for creating line, bar, pie, and other types of charts. Compared to Victory Native, it is more lightweight and may be easier to set up for basic charting needs, but it might not offer the same level of customization and modularity.

README

high-performance charts powered by D3, Skia, and Reanimated for React Native.

 

https://github.com/FormidableLabs/victory-native-xl/assets/12721310/20bada2d-9903-4fe1-9b5f-3b516c0d7428

Installation

Start by installing the peer dependencies of victory-native – React Native Reanimated, Gesture Handler, and Skia:

yarn add react-native-reanimated react-native-gesture-handler @shopify/react-native-skia

For Reanimated, you'll need to add "react-native-reanimated/plugin" to your plugins list in your babel.config.js config file.

Then install victory-native:

yarn add victory-native

To get started and read more about the API, view the docs here.

LICENSE

MIT

Maintenance Status

Active: Nearform is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.