Skip to main content

Stacked Bar

Basic Configuration​

The Stacked Bar component has been designed to work together with XY Container. The minimal Stacked Bar configuration looks like:

component.tsx
import { VisXYContainer, VisStackedBar } from '@unovis/react'

function Component(props) {
  const data: DataRecord[] = props.data
  const x = (d: DataRecord) =>  d.x
  const y = (d: DataRecord) =>  d.y

  return (
    <VisXYContainer data={data}>
      <VisStackedBar x={x} y={y}/>
    </VisXYContainer>
  )
}
Loading...

Multiple Stacked Bars​

Stacked Bar can accept an array of y accessors to display values as a stack of bars:

component.tsx
import { VisXYContainer, VisStackedBar } from '@unovis/react'

function Component(props) {
  const data: DataRecord[] = props.data
  const x = (d: DataRecord) =>  d.x
  const y = [
    (d: DataRecord) =>  d.y,
    (d: DataRecord) =>  d.y1,
    (d: DataRecord) =>  d.y2
  ]

  return (
    <VisXYContainer data={data}>
      <VisStackedBar x={x} y={y}/>
    </VisXYContainer>
  )
}
Loading...

Baseline​

By default every stack starts at zero. The baseline property moves that starting point per data record, turning the bars into floating bars: each one spans from baseline to baseline + y. It accepts a constant or an accessor function, and works the same way as the Area component's baseline.

component.tsx
function Component(props) {
  const data: DataRecord[] = props.data
  const x = (d: DataRecord) =>  d.x
  const y = (d: DataRecord) =>  d.y
  const baseline = (d: DataRecord) =>  d.y1

  return (
    <VisStackedBar x={x} y={y} baseline={baseline}/>
  )
}
Loading...

With an array of y accessors the whole stack is offset: the first segment starts at baseline and the rest stack on top of it as usual. Positive and negative values still stack away from the baseline in opposite directions.

Waterfall Charts​

A waterfall chart is a single-series Stacked Bar whose baseline carries the running total, so each bar starts where the previous one ended. Unovis doesn't accumulate the values for you — you compute the running total when preparing your data, which keeps you in control of ordering, subtotals and totals:

type Step = { label: string; value?: number; isTotal?: boolean }

function toWaterfall (steps: Step[]) {
  let running = 0
  return steps.map((step, index) => {
    // Totals and subtotals are absolute, so they're drawn from zero up to the accumulated value
    if (step.isTotal) {
      running = step.value ?? running
      return { index, label: step.label, value: running, start: 0, isTotal: true }
    }

    const start = running
    running += step.value ?? 0
    return { index, label: step.label, value: step.value ?? 0, start, isTotal: false }
  })
}

Pass start to baseline and the signed value to y, then colour each bar by the sign of its value:

component.tsx
<VisXYContainer data={data}>
  <VisAxis
    type="x" 
    tickValues={[0,1,2,3,4,5]} 
    tickFormat={tickFormat}
  />
  <VisAxis type="y"/>
  <VisStackedBar
    x={x} 
    y={y} 
    baseline={baseline} 
    color={color} 
    barPadding={0.3}
  />
</VisXYContainer>
Loading...
note

Steps whose value is exactly 0 produce a zero-height bar and aren't rendered. Set barMinHeight1Px if you want those "no change" steps to stay visible as a 1 pixel line.

See the Waterfall Chart gallery example for a complete version with a tooltip.

Orientation​

Stacked Bar supports horizontal and vertical orientation.

<VisStackedBar x={x} y={y} orientation="horizontal"/>
Loading...

Rounded Corners​

You can apply rounded corners to the top bar in your Stacked Bar component using the roundedCorners property, which accepts either a number (in pixels) or boolean argument.

<VisStackedBar x={x} y={y} roundedCorners={true}/>
Loading...

Bar Color​

Set the color of each bar by assigning the color property to a color string, a color accessor function or an array of color strings.

Stacked Bars​

For stacked data, use an array of values or a single callback function.

// Either of these work
const colors = ['red', 'green', 'blue']
const color = (d: DataRecord, i: number) => ['red', 'green', 'blue'][i]
Loading...

Non-Stacked Bars​

If you want non-stacked data (i.e. single bars) to display variable colors, you can use a single color accessor. The following sets the color based on the value of y:

const color = (d: DataRecord) => d.y > 7 ? '#FF4F4E' : '#1acb9a'}
Loading...

Custom Bar Styles​

When color alone isn't enough, the barStyle accessor lets you style individual bars. It's called for every bar with the datum and its stack index, and the returned object is applied to the bar as inline styles. Property names can be camelCase or kebab-case, and CSS custom properties (--*) are supported. A common use case is rendering projected or estimated values differently from actuals:

const barStyle = (d: DataRecord, i: number) => d.x > 5
  ? { strokeDasharray: '4 3', strokeWidth: 1, fillOpacity: 0.2 }
  : undefined
Loading...

A few things to keep in mind:

  • The properties the component manages itself — fill, opacity, cursor and mask — take precedence over their regular sources (like the color accessor) and stay animated; all other properties are applied instantly.
  • Properties that are no longer returned for a bar are removed on the next render, so conditional styles clean up after themselves.
  • Since inline styles bypass the CSS cascade, use CSS variable references (e.g. stroke: 'var(--my-color)') for values that should respond to theming.

Bar Sizing​

Bar Width​

By default, the width of the bars is calculated automatically based on their count. But you can also strictly set the bar's width in pixels using the barWidth property:

<VisStackedBar x={x} y={y} barWidth={5}/>
Loading...

Limiting Dynamic Bar Width​

When you don't know the number of bars in advance, and you're relying on automatic bar width calculation, you might want to limit the maximum bar width to prevent the bars from being too wide when there are just a few of them. That can be achieved by setting the barMaxWidth property.

Bar Padding​

Another way to control the bar's width is by changing the barPadding property, which specifies how much of the available sector should be empty, in the range of [0,1).

<VisStackedBar x={x} y={y} barPadding={0.5}/>
Loading...

Minimum Bar Height​

When you have highly scattered data with very low and high values, the bars corresponding to the lower values can be so small, so they become invisible. If you want to prevent that you can set the minimum bar height to 1 pixel using the barMinHeight1Px boolean property.

<VisStackedBar x={x} y={y} barMinHeight1Px={undefined}/>
Loading...

Preventing Overlaps with dataStep​

When your data has gaps, it's impossible to do calculate of the bar width automatically. The visualization will still try to do that, but most likely the result will be wrong, and you'll see wide overlapping bars. However, you can help the calculation by setting your data step implicitly using the dataStep property. Consider the following example, with data mainly clumped in the domain 0 < x < 1:

<VisStackedBar x={x} y={y}/>
Loading...
<VisStackedBar x={x} y={y} dataStep={0.1}/>
Loading...

Ordinal Data​

Read our guide about using ordinal/categorical values with XY Components here

Events​

import { StackedBar } from '@unovis/ts'
...
events = {
    [StackedBar.selectors.bar]: {
        click: (d: DataRecord) => {},
        ...
    },
    [StackedBar.selectors.barGroup]: {
        mouseover: (d: DataRecord[]) => {},
        ...
    },
}
<VisStackedBar x={x} y={y} events={events}/>

CSS Variables​

The Stacked Bar component supports additional styling via CSS variables that you can define for your visualization container. For example:

styles.css
.custom-stacked-bar {
  --vis-stacked-bar-stroke-color: #000;
  --vis-stacked-bar-stroke-width: 5px;
  --vis-stacked-bar-hover-stroke-width: 10px;
  --vis-stacked-bar-hover-stroke-color: #8777d9;
}
Loading...
Supported CSS variables and their default values
--vis-stacked-bar-cursor: default;
--vis-stacked-bar-fill-color: var(--vis-color-main);
--vis-stacked-bar-stroke-color: none;
--vis-stacked-bar-stroke-width: 0px;
--vis-stacked-bar-hover-stroke-width: none;
--vis-stacked-bar-hover-stroke-color: none;
 
/* Dark Theme */
--vis-dark-stacked-bar-stroke-color: none;

Component Props​

NameTypeDescription
* required property