Combo

A combo chart layers two geoms with different y-scales, typically bars for one metric and a line for another on a second axis. It shows two measures whose units or magnitudes do not share a scale.

Dual-axis example

Give each geom its own y through a layer-local mapping, and bind the line to the secondary axis with yScaleType: 'secondary'. Each layer also needs something to map to color; otherwise both take the built-in geom color and neither gets a legend entry. A per-layer transform.constant adds a categorical column holding the layer’s name. Mapping it to color gives the layer its own palette color and legend item:

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

const data = {
  columns: [
    { key: 'quarter', label: 'Quarter' },
    { key: 'revenue', label: 'Revenue' },
    { key: 'growth', label: 'Growth' },
  ],
  rows: [
    { quarter: 'Q1', revenue: 12000, growth: 5 },
    { quarter: 'Q2', revenue: 15000, growth: 25 },
    { quarter: 'Q3', revenue: 14000, growth: -7 },
    { quarter: 'Q4', revenue: 18500, growth: 32 },
    { quarter: 'Q5', revenue: 21000, growth: 14 },
    { quarter: 'Q6', revenue: 19500, growth: -7 },
  ],
};

export function RevenueAndGrowth() {
  const spec = useMemo(
    () =>
      pipe(
        createSpec({ x: 'quarter' }), // shared x
        geom.bar({
          id: 'revenue',
          aes: { y: 'revenue', color: 'revenueSeries' },
          transforms: [
            transform.constant({
              variableName: 'revenueSeries',
              type: 'categorical',
              value: 'Revenue',
            }),
          ],
        }), // primary axis
        geom.line({
          id: 'growth',
          aes: { y: 'growth', color: 'growthSeries' },
          yScaleType: 'secondary',
          transforms: [
            transform.constant({
              variableName: 'growthSeries',
              type: 'categorical',
              value: 'Growth',
            }),
          ],
        }), // secondary axis
        scale.x(),
        scale.y(),
        scale.ySecondary(),
        scale.color.discrete()
      ),
    []
  );

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

Each scale trains only on the layers bound to it, so the two metrics keep independent ranges. A layer’s transforms run after any spec-level transforms and apply to that layer alone. Use them whenever one geom needs the data in a different shape from its siblings. scale.ySecondary() is optional: the compiler infers one as soon as a layer declares yScaleType: 'secondary'. Declare it to control the domain, as with any other scale.

Configuring the second axis

The secondary axis is keyed ySecondary under axes. It is a sparse override: every field you leave out is inherited. position is the side opposite y; visible, grid and ticks come from y:

config({
  axes: {
    y: { label: 'Revenue' },
    ySecondary: { label: 'Growth (%)' },
  },
});

Styling one layer

Give a layer an id and a stylesheet entry can scope to it with { layer }. This is what makes an overlay line read as an overlay rather than another group:

styles({
  overrides: [
    style.geom.line({ strokeWidth: 4, dashArray: [4, 2] }, { layer: 'growth' }),
    style.geom.bar({ cornerRadius: 'md' }, { layer: 'revenue' }),
  ],
});

overrides outranks a mapped aesthetic; defaults does not. None of these properties is mapped, so defaults would work here too, but an entry that recolours a layer whose color is mapped has to be an override. See Styling for the full cascade. A second axis is right when the two layers measure different things. When they measure the same thing (an average, a target, a running total over the bars it summarizes), omit yScaleType and let the line sit on the primary scale. A dual axis there quietly detaches the line from the bars it annotates:

const spec = pipe(
  createSpec({ x: 'quarter' }),
  geom.bar({ aes: { y: 'sales', color: 'region' }, position: 'dodge' }),
  geom.line({ aes: { y: 'average' } }), // same scale as the bars
  scale.x(),
  scale.y(),
  scale.color.discrete()
);

For a flat reference line at a constant value, use geom.rule(). It is non-interactive by default and draws a 1px dashed line, painted through style.geom.rule({ stroke, strokeWidth, dashArray }). label prints inline text at the line’s start, or at its end with labelPosition: 'end':

geom.rule({
  aes: { y: 'target' },
  params: { label: 'Target', labelPosition: 'end' },
});

Styling — per-layer scoping with { layer }
Axes — the ySecondary axis
Mappings & aesthetics — layer-local mappings
Transforms — reshaping data per layer
Scales — the secondary y-scale
Geoms & layers — how layers stack

Get Started

Core concepts

Chart types

Themes

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

Dual-axis example

Configuring the second axis

Styling one layer

​Dual-axis example

​Configuring the second axis

​Styling one layer

​When to share the axis instead

​Related

Dual-axis example

Configuring the second axis

Styling one layer

When to share the axis instead

Related