Documentation

BarChart Examples

Explore interactive BarChart examples showcasing different features and use cases. Supports vertical and horizontal orientations, grouped and stacked modes, with customizable styling and hover interactions.

Basic Charts

Simple Vertical Bar Chart

The most basic bar chart with minimal configuration showing a single data series.

<BarChart
  config={{
    data: [
      { label: "Jan", value: 65 },
      { label: "Feb", value: 59 },
      { label: "Mar", value: 80 },
      // ...
    ],
    orientation: "vertical",
  }}
/>

With Hover Effects

Enable hover interactions to highlight bars and show tooltips on touch or cursor.

<BarChart
  config={{
    data: simpleData,
    orientation: "vertical",
    hover: {
      enabled: true,
      highlightBar: true,
      tooltip: {
        renderContent: (dataPoint) => (
          <View style={styles.tooltip}>
            <Text>{dataPoint.label}</Text>
            <Text>{dataPoint.value}</Text>
          </View>
        ),
      },
    },
  }}
/>

With Axes

With X and Y Axes

Add labeled axes and grid lines for better readability.

<BarChart
  config={{
    data: simpleData,
    orientation: "vertical",
    xAxis: {
      enabled: true,
    },
    yAxis: {
      enabled: true,
      showGridLines: true,
    },
  }}
/>

Styled Charts

Custom Colors and Rounded Corners

Customize bar colors, corner radius, and spacing to match your brand.

<BarChart
  config={{
    data: simpleData,
    orientation: "vertical",
    colors: ["#8B5CF6", "#3B82F6", "#10B981"],
    style: {
      cornerRadius: 8,
      groupGap: 8,
    },
    hover: {
      enabled: true,
      highlightBar: true,
    },
  }}
/>

Grouped Bars

Grouped Bar Chart

Display multiple data series side-by-side for easy comparison.

<BarChart
  config={{
    series: [
      {
        id: "revenue",
        label: "Revenue",
        data: revenueData,
        color: "#3B82F6",
      },
      {
        id: "expenses",
        label: "Expenses",
        data: expensesData,
        color: "#EF4444",
      },
    ],
    mode: "grouped",
    orientation: "vertical",
    style: {
      cornerRadius: 4,
      gap: 4,
    },
  }}
/>

Stacked Bars

Stacked Bar Chart

Stack multiple series on top of each other to show cumulative values. With gaps between segments for visual separation.

<BarChart
  config={{
    series: stackedSeries,
    mode: "stacked",
    orientation: "vertical",
    style: {
      cornerRadius: 4,
      stackGap: 3, // Gap between segments
    },
    hover: {
      enabled: true,
      tooltip: {
        position: "end", // Always show at top
      },
    },
  }}
/>

Stacked without Gaps

When stackGap is 0, only the outer corners of the entire stack are rounded for a seamless appearance.

<BarChart
  config={{
    series: stackedSeries,
    mode: "stacked",
    style: {
      cornerRadius: 8,
      stackGap: 0, // Seamless stacking
    },
  }}
/>

Horizontal Orientation

Horizontal Bar Chart

Bars grow rightward instead of upward, with categories on the Y-axis.

<BarChart
  config={{
    data: simpleData,
    orientation: "horizontal",
    xAxis: {
      enabled: true,
      showGridLines: true,
    },
    yAxis: {
      enabled: true,
    },
  }}
/>

Horizontal Grouped Bars

Multiple series displayed side-by-side in horizontal orientation.

<BarChart
  config={{
    series: groupedSeries,
    mode: "grouped",
    orientation: "horizontal",
    style: {
      cornerRadius: 6,
      gap: 3,
    },
  }}
/>

Advanced Features

Tooltip Position: Touch

Position tooltip near the touch or cursor coordinates for better mobile experience.

<BarChart
  config={{
    hover: {
      enabled: true,
      tooltip: {
        position: "touch", // Follow cursor
        renderContent: (dataPoint, seriesId) => (
          <View style={styles.tooltip}>
            <Text>{seriesId}</Text>
            <Text>{dataPoint.value}</Text>
          </View>
        ),
      },
    },
  }}
/>