Bar & column

geom.bar() draws a rectangle per observation. In the default cartesian plane it produces vertical columns; add coord.flip() to lay them on their side as horizontal bars. One geom, two orientations. Columns suit comparing categories or a value over discrete time periods; bars suit ranking and categories with long labels that wouldn’t fit under a vertical axis.

Basic example

Value on y, category on x — the default cartesian form draws vertical columns:

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

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 input={spec} data={data}>
      <GraphRenderer />
    </GraphProvider>
  );
}

Stacked and grouped

Map a category to color, then choose how the bars in each band arrange with position. In long format, 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.palette()
);

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

See position modes for the full list.

Horizontal bars

Keep the natural mapping — category on x, value on y — and add coord.flip() to swap the axes. Stacking, grouping and styling all carry over unchanged; only the orientation differs:

import { createSpec, pipe, geom, scale, coord } from '@graphysdk/viz-engine';

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 — most useful with horizontal bars:

import { transform } from '@graphysdk/viz-engine';

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

Styling the bars

geom.bar() accepts params to style the rectangle:

params.width

number

default:"0.7"

Bar width as a fraction of the band, in (0, 1].

params.borderRadius

number | 'auto' | 'full'

default:"auto"

Corner rounding in pixels, or 'full' for pill-shaped bars.

params.borderColor

string

Border color. The border is only drawn when this is set.

params.borderWidth

number

default:"1"

Border width in pixels; only applies when borderColor is set.

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

Coordinate systems — how coord.flip() works
Geoms & layers — position modes and layering
Scales — control the value axis range

Get Started

Core concepts

Chart types

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

Basic example

Stacked and grouped

Horizontal bars

Ranking

Styling the bars

​Basic example

​Stacked and grouped

​Horizontal bars

​Ranking

​Styling the bars

​Related

Basic example

Stacked and grouped

Horizontal bars

Ranking

Styling the bars

Related