Grouped Bar

Basic Configuration

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

React

component.tsx

import { VisXYContainer, VisGroupedBar } 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}>
      <VisGroupedBar 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-grouped-bar [x]="x" [y]="y"></vis-grouped-bar>
</vis-xy-container>

Svelte

component.svelte

<script lang='ts'>
  import { VisXYContainer, VisGroupedBar } 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}>
  <VisGroupedBar {x} {y}/>
</VisXYContainer>

Vue

component.vue

<script setup lang="ts">
import { VisXYContainer, VisGroupedBar } 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">
    <VisGroupedBar :x="x" :y="y" />
  </VisXYContainer>
</template>

Solid

component.tsx

import { VisXYContainer, VisGroupedBar } 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()}>
      <VisGroupedBar x={x} y={y}/>
    </VisXYContainer>
  )
}

TypeScript

component.ts

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

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

Loading...

Orientation

Grouped Bar supports horizontal and vertical orientation.

orientation: verticalhorizontal

React

<VisGroupedBar orientation="horizontal" x={x} y={y}/>

Angular

<vis-grouped-bar
  orientation="horizontal" 
  [x]="x" 
  [y]="y"
></vis-grouped-bar>

Svelte

<VisGroupedBar orientation="horizontal" {x} {y}/>

Vue

<VisGroupedBar orientation="horizontal" :x="x" :y="y" />

Solid

<VisGroupedBar orientation="horizontal" x={x} y={y}/>

TypeScript

const groupedBar = new GroupedBar<DataRecord>({ orientation: "horizontal", x, y })

Loading...

Bar Colors

Set the color of the bar by assigning the color property to a hex string and/or by assigning the color property to a function evaluated per each bar. In this example, each bar's color is assigned based on its index:

React

component.tsx

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
  ]
  const color = (d: DataRecord, i: number) =>  ['#04c0c7', '#5144d3', '#da348f'][i]

  return (
    <VisGroupedBar x={x} y={y} color={color}/>
  )
}

Angular

component.ts

@Component({
  template: '<vis-grouped-bar [x]="x" [y]="y" [color]="color"></vis-grouped-bar>'
})
export class Component {
  @Input data: DataRecord[];
  x = (d: DataRecord) =>  d.x
  y = [
    (d: DataRecord) =>  d.y,
    (d: DataRecord) =>  d.y1,
    (d: DataRecord) =>  d.y2
  ]
  color = (d: DataRecord, i: number) =>  ['#04c0c7', '#5144d3', '#da348f'][i]
}

Svelte

component.svelte

<script lang='ts'>
  import { VisXYContainer, VisGroupedBar } 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
  ]
  const color = (d: DataRecord, i: number) =>  ['#04c0c7', '#5144d3', '#da348f'][i]
</script>

<VisGroupedBar {x} {y} {color}/>

Vue

component.vue

<script setup lang="ts">
import { VisXYContainer, VisGroupedBar } 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
  ]
const color = (d: DataRecord, i: number) =>  ['#04c0c7', '#5144d3', '#da348f'][i]
</script>

<template>
  <VisGroupedBar :x="x" :y="y" :color="color" />
</template>

Solid

component.tsx

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
  ]
  const color = (d: DataRecord, i: number) =>  ['#04c0c7', '#5144d3', '#da348f'][i]

  return (
    <VisGroupedBar x={x} y={y} color={color}/>
  )
}

TypeScript

component.ts

const groupedBar = new GroupedBar<DataRecord>({
  x: (d: DataRecord) =>  d.x, 
  y: [
    (d: DataRecord) =>  d.y,
    (d: DataRecord) =>  d.y1,
    (d: DataRecord) =>  d.y2
  ], 
  color: (d: DataRecord, i: number) =>  ['#04c0c7', '#5144d3', '#da348f'][i]
})

Loading...

Rounded Corners

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

roundedCorners:

React

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

Angular

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

Svelte

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

Vue

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

Solid

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

TypeScript

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

Loading...

Bar Sizing

There are multiple configuration properties that contribute to the size of you bars in Grouped Bar. Some are on the group level while others on the individual.

Group 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:

groupWidth:

React

<VisGroupedBar groupWidth={50} x={x} y={y}/>

Angular

<vis-grouped-bar [groupWidth]="50" [x]="x" [y]="y"></vis-grouped-bar>

Svelte

<VisGroupedBar groupWidth={50} {x} {y}/>

Vue

<VisGroupedBar :groupWidth="50" :x="x" :y="y" />

Solid

<VisGroupedBar groupWidth={50} x={x} y={y}/>

TypeScript

const groupedBar = new GroupedBar<DataRecord>({ groupWidth: 50, x, y })

Loading...

Limiting Dynamic Group 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 groupMaxWidth property.

React

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

Angular

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

Svelte

<VisGroupedBar {x} {y}/>

Vue

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

Solid

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

TypeScript

const groupedBar = new GroupedBar<DataRecord>({ x, y })

Loading...

React

<VisGroupedBar x={x} y={y} groupMaxWidth={25}/>

Angular

<vis-grouped-bar
  [x]="x" 
  [y]="y" 
  [groupMaxWidth]="25"
></vis-grouped-bar>

Svelte

<VisGroupedBar {x} {y} groupMaxWidth={25}/>

Vue

<VisGroupedBar :x="x" :y="y" :groupMaxWidth="25" />

Solid

<VisGroupedBar x={x} y={y} groupMaxWidth={25}/>

TypeScript

const groupedBar = new GroupedBar<DataRecord>({ x, y, groupMaxWidth: 25 })

Loading...

Group vs. Bar Padding

Another way to control bar width is by adding padding to bar groups (groupPadding property) or individual bars (`barPadding). The value which specifies how much of the available sector should be empty in the range of [0,1].

groupPadding:

React

<VisGroupedBar groupPadding={0.5} x={x} y={y}/>

Angular

<vis-grouped-bar
  [groupPadding]="0.5" 
  [x]="x" 
  [y]="y"
></vis-grouped-bar>

Svelte

<VisGroupedBar groupPadding={0.5} {x} {y}/>

Vue

<VisGroupedBar :groupPadding="0.5" :x="x" :y="y" />

Solid

<VisGroupedBar groupPadding={0.5} x={x} y={y}/>

TypeScript

const groupedBar = new GroupedBar<DataRecord>({ groupPadding: 0.5, x, y })

Loading...

barPadding:

React

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

Angular

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

Svelte

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

Vue

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

Solid

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

TypeScript

const groupedBar = new GroupedBar<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 barMinHeight boolean property.

barMinHeight:

React

<VisGroupedBar barMinHeight={1} x={x} y={y}/>

Angular

<vis-grouped-bar [barMinHeight]="1" [x]="x" [y]="y"></vis-grouped-bar>

Svelte

<VisGroupedBar barMinHeight={1} {x} {y}/>

Vue

<VisGroupedBar :barMinHeight="1" :x="x" :y="y" />

Solid

<VisGroupedBar barMinHeight={1} x={x} y={y}/>

TypeScript

const groupedBar = new GroupedBar<DataRecord>({ barMinHeight: 1, 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

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

Angular

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

Svelte

<VisGroupedBar {x} {y}/>

Vue

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

Solid

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

TypeScript

const groupedBar = new GroupedBar<DataRecord>({ x, y })

Loading...

React

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

Angular

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

Svelte

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

Vue

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

Solid

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

TypeScript

const groupedBar = new GroupedBar<DataRecord>({ x, y, dataStep: 0.1 })

Loading...

Using Ordinal Data

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

Events

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

React

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

Angular

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

Svelte

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

Vue

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

Solid

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

TypeScript

const groupedBar = new GroupedBar<DataRecord>({ x, y, events })

CSS Variables

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

styles.css

.custom-vis {
  --vis-grouped-bar-stroke-width: 2px;
  --vis-grouped-bar-stroke-color: #000;
  --vis-grouped-bar-cursor: crosshair;
}

Loading...

Supported CSS variables and their default values

--vis-grouped-bar-cursor: default;
--vis-grouped-bar-fill-color: var(--vis-color-main);
--vis-grouped-bar-stroke-color: none;
--vis-grouped-bar-stroke-width: 0px;
--vis-grouped-bar-hover-stroke-width: 1px;
--vis-grouped-bar-hover-stroke-color: none;

Component Props

Name	Type	Description
* required property