formidablelabs/victory

★ 11,240TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((Victory))
    What it does
      Chart components
      Data visualization
      React props API
    Chart types
      Pie charts
      Bar charts
      Line charts
      Scatter plots
    Platforms
      Web React
      React Native mobile
    Audience
      React developers
      Data dashboards

mindmap root((Victory)) What it does Chart components Data visualization React props API Chart types Pie charts Bar charts Line charts Scatter plots Platforms Web React React Native mobile Audience React developers Data dashboards

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add a bar chart, line chart, or pie chart to a React web app by importing one component and passing your data array as a prop.

USE CASE 2

Layer multiple chart types together in a single view to build complex data dashboards without writing graphics code.

USE CASE 3

Use Victory Native to add the same charts to a React Native mobile app with a nearly identical API and no new skills to learn.

USE CASE 4

Build interactive data visualizations in a browser sandbox without installing anything locally using the project's code sandbox.

Tech stack

TypeScriptReactReact Native

Getting it running

Difficulty · easy Time to first run · 5min

Requires React 16.3 or above, Victory Native is a separate package required for React Native mobile projects.

Free to use for any purpose including commercial projects, keep the copyright notice.

In plain English

Victory is a collection of React components for building charts and interactive data visualizations for the web. It lets you add charts to a React application the same way you add any other UI component, without writing low-level graphics code yourself. The library includes components for pie charts, bar charts, line charts, scatter plots, area charts, and several other visualization types. Each component accepts data and configuration as standard React props, so you describe what you want to display and Victory handles the rendering. Components are designed to be composable, meaning you can combine and layer multiple chart types within a single view to build more complex displays. Installing the library requires adding a single package to a React project. A minimal example in the README shows that rendering a pie chart is as short as importing a VictoryPie component and dropping it into JSX with no additional setup. The library requires React version 16.3 or above. A separate package called Victory Native shares most of the same code and offers a nearly identical API for React Native projects, which target mobile devices rather than the web. Skills and patterns learned on the web version carry over directly to the mobile version. The project is maintained by Formidable, now part of NearForm, and is described as actively maintained. Full documentation, guides, and interactive examples are available on the project website, and there is also a code sandbox where you can experiment with all components without installing anything locally.

Copy-paste prompts

Prompt 1

I have a React app and want to show monthly sales data as a bar chart. Show me how to install Victory and render a VictoryBar component with my data array.

Prompt 2

Help me combine a VictoryLine and VictoryScatter chart in a single Victory container to plot time-series data with highlighted individual data points.

Prompt 3

I'm using React Native and want to add Victory Native charts to my mobile app. Show me how the setup differs from the web version and how to render a VictoryPie component.

Prompt 4

How do I make a Victory chart interactive so clicking a bar shows a tooltip with the data value for that bar?

Open on GitHub → Explain another repo

← formidablelabs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.