Stacked Bar

Basic Configuration

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

React

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>
  )
}

Angular

component.ts

@Component({
  templateUrl: 'template.html'
})
export class Component {
  @Input data: DataRecord[];
  x = (d: DataRecord) =>  d.x
  y = (d: DataRecord) =>  d.y
}

template.html

<vis-xy-container [data]="data">
  <vis-stacked-bar [x]="x" [y]="y"></vis-stacked-bar>
</vis-xy-container>

Svelte

component.svelte

<script lang='ts'>
  import { VisXYContainer, VisStackedBar } from '@unovis/svelte'

  export let data: DataRecord[]
  const x = (d: DataRecord) =>  d.x
  const y = (d: DataRecord) =>  d.y
</script>

<VisXYContainer {data}>
  <VisStackedBar {x} {y}/>
</VisXYContainer>

Vue

component.vue

<script setup lang="ts">
import { VisXYContainer, VisStackedBar } from '@unovis/vue'

const props = defineProps<{ data: DataRecord[] }>()
const x = (d: DataRecord) =>  d.x
const y = (d: DataRecord) =>  d.y
</script>

<template>
  <VisXYContainer :data="data">
    <VisStackedBar :x="x" :y="y" />
  </VisXYContainer>
</template>

Solid

component.tsx

import { VisXYContainer, VisStackedBar } from '@unovis/solid'

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>
  )
}

TypeScript

component.ts

import { XYContainer, StackedBar } from '@unovis/ts'
import { data, DataRecord } from './data'

const container = new XYContainer<DataRecord>(node, {
  components: [
    new StackedBar<DataRecord>({
    x: (d: DataRecord) =>  d.x, 
    y: (d: DataRecord) =>  d.y
  })
  ]
}, data)

Loading...

Multiple Stacked Bars

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

React

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>
  )
}

Angular

component.ts

@Component({
  templateUrl: 'template.html'
})
export class Component {
  @Input data: DataRecord[];
  x = (d: DataRecord) =>  d.x
  y = [
    (d: DataRecord) =>  d.y,
    (d: DataRecord) =>  d.y1,
    (d: DataRecord) =>  d.y2
  ]
}

template.html

<vis-xy-container [data]="data">
  <vis-stacked-bar [x]="x" [y]="y"></vis-stacked-bar>
</vis-xy-container>

Svelte

component.svelte

<script lang='ts'>
  import { VisXYContainer, VisStackedBar } from '@unovis/svelte'

  export let data: DataRecord[]
  const x = (d: DataRecord) =>  d.x
  const y = [
    (d: DataRecord) =>  d.y,
    (d: DataRecord) =>  d.y1,
    (d: DataRecord) =>  d.y2
  ]
</script>

<VisXYContainer {data}>
  <VisStackedBar {x} {y}/>
</VisXYContainer>

Vue

component.vue

<script setup lang="ts">
import { VisXYContainer, VisStackedBar } from '@unovis/vue'

const props = defineProps<{ data: DataRecord[] }>()
const x = (d: DataRecord) =>  d.x
const y = [
    (d: DataRecord) =>  d.y,
    (d: DataRecord) =>  d.y1,
    (d: DataRecord) =>  d.y2
  ]
</script>

<template>
  <VisXYContainer :data="data">
    <VisStackedBar :x="x" :y="y" />
  </VisXYContainer>
</template>

Solid

component.tsx

import { VisXYContainer, VisStackedBar } from '@unovis/solid'

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>
  )
}

TypeScript

component.ts

import { XYContainer, StackedBar } from '@unovis/ts'
import { data, DataRecord } from './data'

const container = new XYContainer<DataRecord>(node, {
  components: [
    new StackedBar<DataRecord>({
    x: (d: DataRecord) =>  d.x, 
    y: [
      (d: DataRecord) =>  d.y,
      (d: DataRecord) =>  d.y1,
      (d: DataRecord) =>  d.y2
    ]
  })
  ]
}, data)

Loading...

Orientation

Stacked Bar supports horizontal and vertical orientation.

React

<VisStackedBar
  x={x} 
  y={y} 
  property="orientation" 
  inputType="select" 
  options={options}
/>

Angular

<vis-stacked-bar
  [x]="x" 
  [y]="y" 
  property="orientation" 
  inputType="select" 
  [options]="options"
></vis-stacked-bar>

Svelte

<VisStackedBar
  {x} 
  {y} 
  property="orientation" 
  inputType="select" 
  {options}
/>

Vue

<VisStackedBar
  :x="x" 
  :y="y" 
  property="orientation" 
  inputType="select" 
  :options="options"
 />

Solid

<VisStackedBar
  x={x} 
  y={y} 
  property="orientation" 
  inputType="select" 
  options={options}
/>

TypeScript

const stackedBar = new StackedBar<DataRecord>({
  x, 
  y, 
  property: "orientation", 
  inputType: "select", 
  options
})

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.

roundedCorners:

React

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

Angular

<vis-stacked-bar
  [roundedCorners]="true" 
  [x]="x" 
  [y]="y"
></vis-stacked-bar>

Svelte

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

Vue

<VisStackedBar :roundedCorners="true" :x="x" :y="y" />

Solid

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

TypeScript

const stackedBar = new StackedBar<DataRecord>({ roundedCorners: true, x, y })

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...

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:

barWidth:

React

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

Angular

<vis-stacked-bar [barWidth]="5" [x]="x" [y]="y"></vis-stacked-bar>

Svelte

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

Vue

<VisStackedBar :barWidth="5" :x="x" :y="y" />

Solid

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

TypeScript

const stackedBar = new StackedBar<DataRecord>({ barWidth: 5, x, y })

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).

barPadding:

React

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

Angular

<vis-stacked-bar [barPadding]="0.5" [x]="x" [y]="y"></vis-stacked-bar>

Svelte

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

Vue

<VisStackedBar :barPadding="0.5" :x="x" :y="y" />

Solid

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

TypeScript

const stackedBar = new StackedBar<DataRecord>({ barPadding: 0.5, x, y })

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.

barMinHeight1Px:

React

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

Angular

<vis-stacked-bar
  [barMinHeight1Px]="undefined" 
  [x]="x" 
  [y]="y"
></vis-stacked-bar>

Svelte

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

Vue

<VisStackedBar :barMinHeight1Px="undefined" :x="x" :y="y" />

Solid

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

TypeScript

const stackedBar = new StackedBar<DataRecord>({ barMinHeight1Px: undefined, x, y })

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:

React

<VisStackedBar x={x} y={y}/>

Angular

<vis-stacked-bar [x]="x" [y]="y"></vis-stacked-bar>

Svelte

<VisStackedBar {x} {y}/>

Vue

<VisStackedBar :x="x" :y="y" />

Solid

<VisStackedBar x={x} y={y}/>

TypeScript

const stackedBar = new StackedBar<DataRecord>({ x, y })

Loading...

React

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

Angular

<vis-stacked-bar [x]="x" [y]="y" [dataStep]="0.1"></vis-stacked-bar>

Svelte

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

Vue

<VisStackedBar :x="x" :y="y" :dataStep="0.1" />

Solid

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

TypeScript

const stackedBar = new StackedBar<DataRecord>({ x, 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[]) => {},
        ...
    },
}

React

<VisStackedBar x={x} y={y} events={events}/>

Angular

<vis-stacked-bar [x]="x" [y]="y" [events]="events"></vis-stacked-bar>

Svelte

<VisStackedBar {x} {y} {events}/>

Vue

<VisStackedBar :x="x" :y="y" :events="events" />

Solid

<VisStackedBar x={x} y={y} events={events}/>

TypeScript

const stackedBar = new StackedBar<DataRecord>({ x, y, 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

Name	Type	Description
* required property