How do I add charts to a React Native app with Victory Native?

If your chart’s labels are cut off at the edge, or the library you found turns out not to have been updated in years, you haven’t done anything wrong. React Native doesn’t include a chart component, so every chart comes from a library. The popular ones have changed a lot. Here’s what we’d use for a new chart today, and how to fix the older ones if you’re staying put.

Which library to use

• Victory Native draws charts with React Native Skia, Reanimated, and Gesture Handler, and covers line, bar, area, pie, grouped, and stacked charts. This is our pick for new work. On Expo SDK 55, use version 41, because versions 42 and 43 need a newer Skia than SDK 55 includes (version 43 also moved to the renamed react-native-skia package).
• react-native-chart-kit draws with react-native-svg. Version 7 added a new API at react-native-chart-kit/v2, and the original API still works from the root import, so existing screens keep running.
• react-native-svg-charts had its last release, 5.4.0, in April 2020. It expects react-native-svg 6 or 7, while SDK 55 includes 15, and its README asks for new maintainers.

How to add a chart with Victory Native

1. Install the native pieces with npx expo install, which picks the versions that match your SDK:

   npx expo install @shopify/react-native-skia react-native-reanimated react-native-gesture-handler
   npm install victory-native@41

2. Add a font file to your project, such as assets/fonts/Inter-Medium.ttf. Axis labels need one, and without a font no labels render at all.

3. Render the chart inside a view with a real height:

   import { View } from "react-native";
   import { useFont } from "@shopify/react-native-skia";
   import { CartesianChart, Bar } from "victory-native";
   
   const DATA = [
     { month: "Jan", sales: 120 },
     { month: "Feb", sales: 180 },
     { month: "Mar", sales: 150 },
   ];
   
   export function SalesChart() {
     const font = useFont(require("../assets/fonts/Inter-Medium.ttf"), 12);
   
     return (
       <View style={{ height: 260 }}>
         <CartesianChart
           data={DATA}
           xKey="month"
           yKeys={["sales"]}
           domainPadding={{ left: 30, right: 30 }}
           xAxis={{ font, labelRotate: 0 }}
           yAxis={[{ font }]}
         >
           {({ points, chartBounds }) => (
             <Bar points={points.sales} chartBounds={chartBounds} color="#5A45FF" />
           )}
         </CartesianChart>
       </View>
     );
   }

For labels on top of bars, pass labels={{ position: "top", font }} to Bar. For grouped bars, BarGroup has betweenGroupPadding and withinGroupPadding to control the spacing. react-native-chart-kit’s original API has no grouped bar chart, though its v2 BarChart takes mode="grouped" and barGapRatio.

If labels are cut off in react-native-chart-kit

With the original API (imported from react-native-chart-kit), you can fix it with four props:

1. Pass a width that fits. The chart draws at exactly the width you give it, so use the screen width minus your padding.
2. Make room for long y-axis labels with style={{ paddingRight: 80 }}. Despite the name, it sets the space on the left where those labels sit, and the default is 64.
3. Rotate crowded x-axis labels with verticalLabelRotation, and if they then run off the bottom, add height or move them up with a negative xLabelsOffset.
4. Shorten labels with formatXLabel or formatYLabel.

const { width } = useWindowDimensions();

<LineChart
  data={{ labels: ["Jan", "Feb", "Mar"], datasets: [{ data: [120, 180, 150] }] }}
  width={width - 32}
  height={240}
  verticalLabelRotation={30}
  xLabelsOffset={-8}
  style={{ paddingRight: 72 }}
  chartConfig={{
    backgroundGradientFrom: "#ffffff",
    backgroundGradientTo: "#ffffff",
    color: (opacity = 1) => `rgba(90, 69, 255, ${opacity})`,
  }}
/>;

In the v2 API, labelStrategy ("auto", "skip", "rotate", "stagger") handles crowding, and edgeLabelPolicy="shift" keeps the first and last labels inside the chart.

If you’re on react-native-svg-charts

If you came here for the grid direction setting, it’s <Grid direction={Grid.Direction.HORIZONTAL} />, which is the default, with VERTICAL and BOTH as the other options. For anything new, such as labels on stacked bars, we’d move that chart to Victory Native rather than build more on a library written for a much older react-native-svg.

How you know it works

The chart renders on the smallest phone you test on, every axis label is fully visible, and rotating the phone or changing the data doesn’t push labels off the edge.

If it still looks wrong

If the chart is blank, check that its parent has a height, since a chart can’t size itself from an unconstrained parent. Missing Victory Native labels mean the font hasn’t loaded yet or the path is wrong, because useFont returns null until the file loads. If installing pulled in versions your SDK doesn’t expect, run npx expo install --check to see which ones.