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

Victory Native

Usage

Install victory-native:

$ npm install victory-native@legacy --save

Install react-native-svg:

$ npm install react-native-svg --save

Link react-native:

$ react-native link react-native-svg

victory-native@^33.0.0 requires react-native-svg@^9.0.0 and react-native@~0.60.0

Please see Peer Dependencies and Version Requirements for requirements for previous versions of victory-native

Import charts from victory-native. For example,

import React, { Component } from "react";

import { VictoryBar } from "victory-native";

class App extends Component {
  render() {
    return (
      <VictoryBar />
    );
  }
}

export default App;

Peer Dependencies and Version Requirements

Note: victory-native requires the following peer dependencies:

• react-native-svg
• react
• react-native

Note: react-native-svg has strict version requirements for both react and react-native. Please match versions to those required by react-native-svg. See the up-to-date requirements on the react-native-svg Readme. We encourage you to use the latest version of react-native-svg possible for your project, as victory-native issues are frequently solved by react-native-svg bugfixes.

• victory-native@^33.0.0 requires react-native-svg@^9.0.0 and react-native@~0.60.0

• victory-native@^30.0.0 requires react-native-svg@6.1.x or react-native-svg@^6.5.0and above
• victory-native@^0.16.2 requires react-native-svg@6.1.x or react-native-svg@^6.5.0
• victory-native@~0.16.0 requires react-native-svg@6.0.0 No longer supported
• victory-native@~0.15.0 requires react-native-svg@^5.0.0 No longer supported

Local Development and Demo

If you'd like to contribute to victory-native, you can use the local demo app to test your changes on the iOS simulator. The demo app uses Expo to streamline this dev experience.

To open the demo app, just fire up the expo app.

# Install victory and its dependencies
$ git clone https://github.com/FormidableLabs/victory
$ cd victory
$ yarn install
# Open up the React Native demo app
$ cd demo/rn
$ yarn install
$ yarn start

Once Expo has fired up, it should open a web browser window where you can find instructions to open the demo application (either on a simulator or a physical device using the Expo Go app).

Changes to the Victory and Victory Native source code will be reflected in the demo app.

Documentation

See the docs and examples on the Victory website.

Contributor Covenant Code of Conduct

Please review our Code of Conduct before contributing.

Maintenance Status

Active: Formidable 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.