Bar Charts

BarChart is the modern v2 bar surface for object-row data. It supports vertical and horizontal bars, grouped bars, stacked bars, 100% stacked bars, negative values, horizontal scrolling, automatic axis padding, theme presets, value labels, tap selection, tooltips, and a simple bottom legend.

Use this API for new apps. The v2 package also exports a StackedBarChart compatibility facade for legacy stacked-bar data during migration.

All examples on this page are part of the public free v2 API.

Basic Bars

import { BarChart } from "react-native-chart-kit/v2";

const data = [
  { month: "Jan", signups: 180 },
  { month: "Feb", signups: 520 },
  { month: "Mar", signups: 260 },
  { month: "Apr", signups: 740 },
  { month: "May", signups: 390 },
  { month: "Jun", signups: 860 }
];

export function SignupsChart() {
  return (
    <BarChart
      data={data}
      xKey="month"
      yKey="signups"
      width={360}
      height={240}
    />
  );
}

Grouped Bars

Use series for multiple bars per x value. The chart shows a bottom legend by default when there is more than one series.

const data = [
  { month: "Jan", organic: 28, paid: 62 },
  { month: "Feb", organic: 74, paid: 34 },
  { month: "Mar", organic: 39, paid: 88 },
  { month: "Apr", organic: 96, paid: 41 },
  { month: "May", organic: 54, paid: 103 },
  { month: "Jun", organic: 118, paid: 58 }
];

<BarChart
  data={data}
  xKey="month"
  series={[
    { yKey: "organic", label: "Organic" },
    { yKey: "paid", label: "Paid" }
  ]}
  preset="analytics"
  showValuesOnTopOfBars
  width={360}
  height={260}
/>;

Useful grouped-bar props:

• barWidthRatio: controls how much of each x band is filled by bars.
• barGapRatio: controls spacing between bars inside a group.
• barRadius: controls corner radius.
• legend={false}: hides the default legend.

Negative Values

Negative values render below the zero baseline. Keep yDomain on its default include-zero behavior unless you intentionally want a cropped baseline.

const profit = [
  { month: "Jan", profit: 38 },
  { month: "Feb", profit: -28 },
  { month: "Mar", profit: 64 },
  { month: "Apr", profit: -42 },
  { month: "May", profit: 81 },
  { month: "Jun", profit: -18 }
];

<BarChart
  data={profit}
  xKey="month"
  yKey="profit"
  preset="fintech"
  showValuesOnTopOfBars
  formatYLabel={(value) => (value < 0 ? `-$${Math.abs(value)}k` : `$${value}k`)}
  width={360}
  height={250}
/>;

Horizontal Bars

Set orientation="horizontal" when category labels are easier to scan down the left axis.

const supportVolume = [
  { channel: "Chat", tickets: 95 },
  { channel: "Email", tickets: 37 },
  { channel: "Phone", tickets: 68 },
  { channel: "Social", tickets: 24 },
  { channel: "Community", tickets: 113 }
];

<BarChart
  data={supportVolume}
  xKey="channel"
  yKey="tickets"
  orientation="horizontal"
  showValuesOnTopOfBars
  width={360}
  height={260}
/>;

Horizontal bars support grouped, stacked, 100% stacked, and negative values through the same mode, series, and yDomain props as vertical bars.

Stacked Bars

Set mode="stacked" to stack series by row. Positive and negative stacks are tracked separately from the zero baseline.

const data = [
  { month: "Jan", newCustomers: 180, expansion: 60 },
  { month: "Feb", newCustomers: 520, expansion: 210 },
  { month: "Mar", newCustomers: 260, expansion: 120 },
  { month: "Apr", newCustomers: 740, expansion: 330 },
  { month: "May", newCustomers: 390, expansion: 170 },
  { month: "Jun", newCustomers: 860, expansion: 410 }
];

<BarChart
  data={data}
  xKey="month"
  mode="stacked"
  series={[
    { yKey: "newCustomers", label: "New" },
    { yKey: "expansion", label: "Expansion" }
  ]}
  width={360}
  height={260}
/>;

100% Stacked Bars

Set mode="stacked100" for percentage composition. The original values are preserved in the bar model while rendered heights are normalized to row totals.

const platformShare = [
  { month: "Jan", ios: 62, android: 25, web: 13 },
  { month: "Feb", ios: 38, android: 47, web: 15 },
  { month: "Mar", ios: 55, android: 21, web: 24 },
  { month: "Apr", ios: 29, android: 58, web: 13 },
  { month: "May", ios: 68, android: 19, web: 13 },
  { month: "Jun", ios: 44, android: 31, web: 25 }
];

<BarChart
  data={platformShare}
  xKey="month"
  mode="stacked100"
  series={[
    { yKey: "ios", label: "iOS" },
    { yKey: "android", label: "Android" },
    { yKey: "web", label: "Web" }
  ]}
  formatYLabel={(value) => `${value}%`}
  width={360}
  height={250}
/>;

Legacy StackedBarChart Facade

Existing StackedBarChart data can render through the modern stacked-bar engine without changing the old data shape.

import { StackedBarChart } from "react-native-chart-kit/v2";

<StackedBarChart
  data={{
    labels: ["Free", "Starter", "Team"],
    legend: ["Active", "Trial", "Paused"],
    data: [
      [44, 18, 8],
      [38, 24, 11],
      [52, 28, 14]
    ],
    barColors: ["#2563eb", "#0891b2", "#7c3aed"]
  }}
  width={360}
  height={250}
  chartConfig={{
    backgroundGradientFrom: "#ffffff",
    backgroundGradientTo: "#ffffff",
    decimalPlaces: 0
  }}
  segments={4}
  yAxisSuffix="k"
/>;

The facade maps labels, legend, data, barColors, hideLegend, percentile, segments, barPercentage, chartConfig.barPercentage, chartConfig.barRadius, decimalPlaces, formatYLabel, withVerticalLabels, withHorizontalLabels, withInnerLines, yAxisLabel, and yAxisSuffix.

Tap Selection And Tooltips

Bar selection is opt-in. Use interaction="tap" for the simplest behavior, or pass an object when you need callbacks or outside-press dismissal.

const data = [
  { month: "Jan", organic: 28, paid: 62 },
  { month: "Feb", organic: 74, paid: 34 },
  { month: "Mar", organic: 39, paid: 88 },
  { month: "Apr", organic: 96, paid: 41 },
  { month: "May", organic: 54, paid: 103 },
  { month: "Jun", organic: 118, paid: 58 }
];

<BarChart
  data={data}
  xKey="month"
  series={[
    { yKey: "organic", label: "Organic" },
    { yKey: "paid", label: "Paid" }
  ]}
  interaction={{
    mode: "tap",
    deselectOnOutsidePress: true,
    onSelect: (event) => {
      setSelectedChannel(event.seriesLabel);
    }
  }}
  tooltip={{
    anchor: "pointer",
    placement: "above",
    width: 132
  }}
  defaultSelectedBar={{ dataIndex: 3, seriesKey: "paid" }}
  width={360}
  height={260}
/>;

The public select event includes dataIndex, seriesKey, seriesLabel, value, formattedValue, x, xLabel, color, position, and the original raw row.

Tooltip positioning uses anchor: "bar" and placement: "auto" by default. Use anchor: "pointer" with placement: "above" when the tooltip should follow the tap position and stay above the finger. Styling follows the chart theme tooltip tokens by default and can be overridden per chart with backgroundColor, borderColor, textColor, labelColor, padding, borderRadius, fontFamily, fontSize, labelFontSize, and shadow props.

Scrollable Bars

Use scrollable, visiblePoints, and initialIndex for long categorical bar charts. For bars, visiblePoints maps to visible bar bands.

const weeklySpend = [
  { week: "W1", spend: 18 },
  { week: "W2", spend: 52 },
  { week: "W3", spend: 26 },
  { week: "W4", spend: 74 },
  { week: "W5", spend: 31 },
  { week: "W6", spend: 88 },
  { week: "W7", spend: 43 },
  { week: "W8", spend: 96 },
  { week: "W9", spend: 39 },
  { week: "W10", spend: 108 },
  { week: "W11", spend: 57 },
  { week: "W12", spend: 121 },
  { week: "W13", spend: 44 },
  { week: "W14", spend: 132 },
  { week: "W15", spend: 63 },
  { week: "W16", spend: 118 },
  { week: "W17", spend: 71 },
  { week: "W18", spend: 146 }
];

<BarChart
  data={weeklySpend}
  xKey="week"
  yKey="spend"
  scrollable
  visiblePoints={8}
  initialIndex="end"
  formatYLabel={(value) => `$${value}k`}
  width={360}
  height={250}
/>;

The y-axis labels stay pinned while the bars and x-axis labels scroll horizontally.

Custom Bar Rendering

Use renderBar when bars need product-specific styling while keeping the built-in layout, selection, hit testing, labels, sticky axes, and tooltips.

import { Rect } from "react-native-svg";

const weeklySpend = [
  { week: "W1", spend: 18 },
  { week: "W2", spend: 52 },
  { week: "W3", spend: 26 },
  { week: "W4", spend: 74 },
  { week: "W5", spend: 31 },
  { week: "W6", spend: 88 },
  { week: "W7", spend: 43 },
  { week: "W8", spend: 96 }
];

<BarChart
  data={weeklySpend}
  xKey="week"
  yKey="spend"
  width={360}
  height={250}
  renderBar={({ bar, fill, radius }) => (
    <Rect
      x={bar.x}
      y={bar.y}
      width={bar.width}
      height={bar.height}
      rx={radius}
      fill={fill}
    />
  )}
/>;

Labels and Themes

Useful label and theme props:

• labelStrategy: auto, show, or hide.
• formatXLabel: formats x-axis labels.
• formatYLabel: formats y-axis and value labels.
• showHorizontalGridLines: enabled by default.
• showXAxisLabels / showYAxisLabels: hide axis label groups without removing grid geometry.
• yTickCount: controls y-axis tick density.
• preset: uses the same cartesian presets as LineChart.
• theme: overrides chart colors, plot background, text, typography, and series colors.

Current Limitations

This is still an early modern BarChart slice. Full legacy BarChart prop mapping belongs to the root compatibility facade rather than the modern object-row API.

Props

BarChart

Prop	Type	Description
data	TData[]	Object-row source data for the chart.
xKey	keyof TData	Row key used for category, date, or numeric x values.
yKey	keyof TData	Single row key used for bar values when series or yKeys is not provided.
yKeys	Array<keyof TData>	Multiple row keys rendered as grouped or stacked series with default styling.
series	BarChartSeries<TData>[]	Full per-series configuration, including y key, label, key, and color.
width	number	Outer chart width in pixels.
height	number	Outer chart height in pixels.
theme	ChartKitThemeMode or CartesianChartTheme	Theme mode or inline theme tokens for this chart.
preset	CartesianChartPresetValue	Built-in or registered preset name used to seed chart colors and typography.
scrollable	boolean	Enables a horizontal scroll viewport for long bar sets.
visiblePoints	number	Number of x values visible in the viewport when scrollable is enabled.
initialIndex	ChartViewportInitialIndex	Initial scroll position, such as "start" or "end".
orientation	BarChartOrientation	Renders vertical or horizontal bars.
mode	BarChartMode	Chooses grouped, stacked, or 100% stacked layout.
yDomain	NumericDomainInput	Overrides or constrains the computed value-axis domain.
barRadius	number	Corner radius applied to rendered bars.
barWidthRatio	number	Portion of each category slot occupied by bars.
barGapRatio	number	Relative gap between grouped bars.
showValuesOnTopOfBars	boolean	Shows formatted value labels at bar ends.
showHorizontalGridLines	boolean	Shows or hides horizontal grid lines.
showXAxisLabels	boolean	Shows or hides x-axis labels.
showYAxisLabels	boolean	Shows or hides y-axis labels.
yTickCount	number	Number of ticks used for value-axis labels and grid lines.
legend	boolean	Shows or hides the bottom legend.
interaction	BarChartInteraction<TData>	Tap selection mode and callbacks.
selectedBar	BarChartSelectedBar	Controlled selected bar by data index and series key.
defaultSelectedBar	BarChartSelectedBar	Initial uncontrolled selected bar.
selectionAnimation	boolean or BarChartSelectionAnimationConfig	Enables and configures selected-bar animation.
tooltip	boolean or BarChartTooltipConfig	Shows and configures selected-bar tooltip content and placement.
renderBar	(props) => ReactNode	Custom renderer for each bar while preserving layout and hit testing.
renderer	BarChartRenderer	Renderer implementation used for SVG-compatible primitives.
labelStrategy	BarChartLabelStrategy	Controls x-axis label visibility.
formatXLabel	(value, index) => string	Formats x-axis labels and selected x labels.
formatYLabel	(value) => string	Formats y-axis labels, value labels, and tooltip values.
id	string	Stable chart id used for coordinated selection scope.
accessibilityLabel	string	Overrides the generated accessible chart summary.
testID	string	Test identifier applied to the chart surface.

StackedBarChart

StackedBarChart is the v2 compatibility facade for legacy stacked-bar data.

Prop	Type	Description
data	StackedBarChartLegacyData	Legacy stacked-bar data with labels, legend, data, and barColors.
width	number	Outer chart width in pixels.
height	number	Outer chart height in pixels.
chartConfig	StackedBarChartLegacyConfig	Legacy color, label, decimal, bar, and grid configuration.
hideLegend	boolean	Hides the generated legend when true.
style	StyleProp<ViewStyle>	Style applied to the compatibility wrapper.
barPercentage	number	Overrides the bar width ratio from chartConfig.
decimalPlaces	number	Controls formatted value precision.
withVerticalLabels	boolean	Shows or hides x-axis labels.
withHorizontalLabels	boolean	Shows or hides y-axis labels.
withInnerLines	boolean	Shows or hides inner grid lines.
segments	number	Controls y-axis tick density.
percentile	boolean	Renders the stack as 100% stacked values.
fromZero	boolean	Forces the value domain to include zero.
yAxisLabel	string	Prefix added to formatted y-axis values.
yAxisSuffix	string	Suffix added to formatted y-axis values.
verticalLabelsHeightPercentage	number	Legacy compatibility prop accepted by the facade.
formatYLabel	(yLabel) => string	Formats y-axis labels after decimal formatting.
theme	ChartKitThemeMode or CartesianChartTheme	Theme mode or inline theme tokens for this chart.
preset	CartesianChartPresetValue	Built-in or registered preset name used to seed chart colors and typography.
accessibilityLabel	string	Overrides the generated accessible chart summary.
testID	string	Test identifier applied to the chart surface.