Bar & column

geom.bar() draws a rectangle per observation. In the default cartesian plane the rectangles are vertical columns; add coord.flip() to turn them into horizontal bars. Columns suit comparing categories, or a value over discrete time periods. Bars suit rankings, and categories with labels too long to fit under a vertical axis.

Basic example

Value on y, category on x. The default cartesian plane draws vertical columns:

import { useMemo } from 'react';
import {
  GraphProvider,
  GraphRenderer,
  createSpec,
  pipe,
  geom,
  scale,
} from '@graphysdk/react';

const data = {
  columns: [
    { key: 'category', label: 'Product' },
    { key: 'revenue', label: 'Revenue' },
  ],
  rows: [
    { category: 'Product A', revenue: 1200 },
    { category: 'Product B', revenue: 1800 },
    { category: 'Product C', revenue: 2400 },
    { category: 'Product D', revenue: 1600 },
    { category: 'Product E', revenue: 3200 },
    { category: 'Product F', revenue: 2800 },
  ],
};

export function ProductRevenueChart() {
  const spec = useMemo(
    () =>
      pipe(
        createSpec({ x: 'category', y: 'revenue' }),
        geom.bar(),
        scale.x(),
        scale.y()
      ),
    []
  );

  return (
    <GraphProvider spec={spec} data={data}>
      <GraphRenderer />
    </GraphProvider>
  );
}

Stacked and grouped

Map a group column to color, then choose how the bars in each band are arranged with position. The data is long: one row per quarter × region:

const data = {
  columns: [
    { key: 'quarter', label: 'Quarter' },
    { key: 'region', label: 'Region' },
    { key: 'sales', label: 'Sales' },
  ],
  rows: [
    { quarter: 'Q1', region: 'North', sales: 350 },
    { quarter: 'Q1', region: 'South', sales: 200 },
    { quarter: 'Q1', region: 'West', sales: 500 },
    // ...
  ],
};

const spec = pipe(
  createSpec({ x: 'quarter', y: 'sales', color: 'region' }),
  geom.bar({ position: 'stack' }), // 'dodge' for grouped, 'fill' for 100% stacked
  scale.x(),
  scale.y(),
  scale.color.discrete()
);

'stack' — segments stacked into one column
'dodge' — segments side by side within the band
'fill' — stacked and normalized to 100%

A bar layer defaults to 'dodge', so a multi-group bar chart with no position renders grouped. See position modes for the full list.

Negative values

'identity' draws each bar at its raw value, so a negative y hangs below the zero baseline instead of joining a stack:

const spec = pipe(
  createSpec({ x: 'month', y: 'pnl' }), // pnl rows may be negative
  geom.bar({ position: 'identity' }),
  scale.x(),
  scale.y()
);

Counting rows

Map only x and set the count stat. Each bar’s height is the number of rows in its category, with no value column needed:

const spec = pipe(
  createSpec({ x: 'category' }),
  geom.bar({ stat: 'count' }),
  scale.x(),
  scale.y()
);

Horizontal bars

Keep the mapping as it is, category on x and value on y, and add coord.flip() to swap the axes. Stacking, grouping and styling carry over unchanged:

import { createSpec, pipe, geom, scale, coord } from '@graphysdk/react';

const spec = pipe(
  createSpec({ x: 'country', y: 'users' }),
  geom.bar(),
  scale.x(),
  scale.y(),
  coord.flip() // horizontal bars
);

Ranking

To order bars by value, sort the data with a transform. This is most useful with horizontal bars:

import { transform } from '@graphysdk/react';

const spec = pipe(
  createSpec({ x: 'country', y: 'users' }),
  transform.sort({ variableName: 'users', direction: 'desc' }),
  geom.bar(),
  scale.x(),
  scale.y(),
  coord.flip()
);

Bar geometry

geom.bar() takes one param, width. It is geometry, not paint:

number

default:"0.7"

Bar width as a fraction of its band, in (0, 1]. Under coord.polar() it defaults to 1, so wedges touch.

geom.bar({ params: { width: 0.6 } });

A value outside (0, 1] draws with a substitute width and reports an INVALID_GEOM_PARAM warning.

Painting the bars

Fill, opacity, corner rounding and the border come from the stylesheet, through the style.geom.bar target:

import { createSpec, pipe, geom, scale, styles, style } from '@graphysdk/react';

const spec = pipe(
  createSpec({ x: 'category', y: 'revenue' }),
  geom.bar({ params: { width: 0.6 } }),
  scale.x(),
  scale.y(),
  styles({
    defaults: [
      style.geom.bar({
        cornerRadius: 'md',
        stroke: '#ffffff',
        strokeWidth: 2,
      }),
    ],
  })
);

style.geom.bar declares fill, alpha, saturation, cornerRadius, stroke, strokeWidth and maxWidth.

Corner rounding

cornerRadius is a named token, not a pixel value, so each coordinate system renders it its own way: a rectangle corner in cartesian, an arc corner in polar:

Token	Effect
`'none'`	Square corners
`'xs'` `'sm'` `'md'` `'lg'` `'xl'`	Increasing rounding; `'sm'` is the built-in default
`'full'`	Rounds to half the bar’s cross-axis thickness — a pill

styles({ defaults: [style.geom.bar({ cornerRadius: 'full' })] });

A stacked column rounds only the outer corners of the whole column, so the segments inside it stay flush against each other.

Capping the width

maxWidth caps a bar’s thickness in pixels without moving its center. It applies to vertical and flipped cartesian bars; polar bars ignore it. Without a cap, the bar keeps the width set by geom.bar({ width }). A stack narrows to the smallest cap among its segments, so its edges stay aligned. Data labels and annotations place against the narrowed bar.

styles({ defaults: [style.geom.bar({ cornerRadius: 'full', maxWidth: 32 })] });

Borders

A bar draws a 1px translucent border by default, from the geomBorder token. A border in the chart’s background color is the usual way to separate stacked segments or pie wedges. strokeWidth: 0 removes the border:

styles({
  defaults: [style.geom.bar({ stroke: '#ffffff', strokeWidth: 2 })],
});

Scope an entry with { layer } to paint one bar layer of a combo differently, or with { where } to paint by value, such as negative bars in a warning color.

Styling — the stylesheet, its cascade and every target
Coordinate systems — how coord.flip() works
Geoms & layers — position modes and layering
Scales — control the value axis range

Get Started

Core concepts

Chart types

Themes

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

Basic example

Stacked and grouped

Negative values

Counting rows

Horizontal bars

Ranking

Bar geometry

Painting the bars

Corner rounding

Capping the width

Borders

​Basic example

​Stacked and grouped

​Negative values

​Counting rows

​Horizontal bars

​Ranking

​Bar geometry

​Painting the bars

​Corner rounding

​Capping the width

​Borders

​Related

Basic example

Stacked and grouped

Negative values

Counting rows

Horizontal bars

Ranking

Bar geometry

Painting the bars

Corner rounding

Capping the width

Borders

Related