BarChart

Bar chart with gradient fills, labels, and range lines. Supports vertical/horizontal layout with standard, grouped, stacked, stacked-normalized, stacked-diverging, marimekko, waterfall, and histogram variants.

Import

import {
  BarChart,
  BarSeries,
  Bar,
  BarLabel,
  GuideBar,
  RangeLines,
  BarTargetMarker,
  StackedBarChart,
  StackedBarSeries,
  StackedNormalizedBarChart,
  StackedNormalizedBarSeries,
  MarimekkoChart,
  MarimekkoBarSeries,
  HistogramBarChart,
  HistogramBarSeries
} from 'reaviz';

BarChart Props

BarSeries Props

Bar Props

BarLabel Props

GuideBar Props

RangeLines Props

BarTargetMarker Props

Basic Usage

Single Series (Vertical)

const data = [
  { key: 'DLP', data: 13 },
  { key: 'SIEM', data: 2 },
  { key: 'Tic', data: 7 },
];

<BarChart
  width={350}
  height={250}
  data={data}
/>

Horizontal Layout

<BarChart
  width={350}
  height={250}
  data={data}
  xAxis={<LinearXAxis type="value" />}
  yAxis={<LinearYAxis type="category" />}
  series={<BarSeries layout="horizontal" />}
/>

Grouped Multi-Series

const data = [
  { key: 'Q1', data: [
    { key: 'Sales', data: 10 },
    { key: 'Revenue', data: 15 },
  ]},
  { key: 'Q2', data: [
    { key: 'Sales', data: 25 },
    { key: 'Revenue', data: 20 },
  ]},
];

<BarChart
  width={550}
  height={350}
  data={data}
  series={<BarSeries type="grouped" colorScheme="cybertron" />}
/>

Stacked

<StackedBarChart
  width={550}
  height={350}
  data={multiSeriesData}
  series={<StackedBarSeries colorScheme="cybertron" />}
/>

Stacked Normalized (Percentage)

<StackedNormalizedBarChart
  width={550}
  height={350}
  data={multiSeriesData}
  series={<StackedNormalizedBarSeries colorScheme="cybertron" />}
/>

Marimekko

<MarimekkoChart
  width={550}
  height={350}
  data={multiSeriesData}
  series={<MarimekkoBarSeries colorScheme="cybertron" />}
/>

Histogram

<HistogramBarChart
  width={550}
  height={350}
  data={data}
  series={<HistogramBarSeries binSize={25} />}
/>

Customization

Rounded Corners

<BarChart
  data={data}
  series={<BarSeries bar={<Bar rx={4} ry={4} />} />}
/>

Bar Labels

<BarChart
  data={data}
  series={
    <BarSeries
      bar={<Bar label={<BarLabel position="top" fill="#333" />} />}
    />
  }
/>

Guide Bars (Hover Background)

<BarChart
  data={data}
  series={
    <BarSeries
      bar={<Bar guide={<GuideBar />} />}
    />
  }
/>

Range Lines

<BarChart
  data={data}
  series={
    <BarSeries
      bar={<Bar rangeLines={<RangeLines position="top" strokeWidth={3} />} />}
    />
  }
/>

Custom Gradient

import { Gradient, GradientStop } from 'reaviz';

<BarChart
  data={data}
  series={
    <BarSeries
      bar={
        <Bar
          gradient={
            <Gradient
              stops={[
                <GradientStop offset="5%" stopOpacity={0.1} />,
                <GradientStop offset="90%" stopOpacity={0.7} />,
              ]}
            />
          }
        />
      }
    />
  }
/>

Pattern Mask

import { Stripes } from 'reaviz';

<BarChart
  data={data}
  series={<BarSeries bar={<Bar mask={<Stripes />} />} />}
/>

Custom Padding

// Tighter bars
<BarSeries padding={0.05} />

// More spacing
<BarSeries padding={0.3} />

// Group spacing for grouped/stacked
<BarSeries type="grouped" groupPadding={24} />

Value Markers (Reference Lines)

import { LinearValueMarker } from 'reaviz';

<BarChart
  data={data}
  series={
    <BarSeries
      valueMarkers={[
        <LinearValueMarker value={50} color="#D740BE" />,
      ]}
    />
  }
/>

Click Handling

<BarChart
  data={data}
  series={
    <BarSeries
      bar={
        <Bar
          cursor="pointer"
          onClick={({ value, nativeEvent }) => console.log(value)}
        />
      }
    />
  }
/>

No Gridlines

<BarChart data={data} gridlines={null} />

Bar Types

Variant Components