Charts > Stacked bar chart ​

A stacked bar chart that offers the flexibility to view sections grouped together or separated into individual columns.

The Chart ​

Randomize dataUpload data

Download example CSV

Copy HTML

Playground ​

Data

Style

Usage ​

The stacked bar chart is built using html and can transform into separate bar charts using the stacked prop.

The changing of position of the bars is animated using the transition-group component with CSS transition classes (class name flip-list-delay-move). The width of each segment is animated using the Motion One library.

For the non-stacked state, you can control the value of a full width bar using the max prop. This can be a fixed number or an array with a different number for each segment. If no value is given, the component uses the max value in the dataset.

Component API ​

Data ​

[
  {
    id: "data-1",
    name: "Data 1",
    values: {
      val1: { id: "val1", name: "val 1", value: 60 },
      val2: { id: "val2", name: "val 2", value: 40 },
    },
  },
  ...
]

Optional: color and compare on value object

Props ​

Events ​

Dependencies ​

• Motion One

Featured in ​

• Fecyt
• Odismet ONCE