Charts > Diverging stacked bars ​

A diverging stacked bar chart visualizes multiple data series in a stacked format, where each bar is split into segments representing subcategories, and the bars are oriented in opposite directions from a central axis, highlighting positive and negative contributions.

The Chart ​

Randomize dataUpload data

Download example CSV

Copy HTML

Playground ​

Data

Style

Usage Example (with tooltip) ​

<template>
  <div class="mt-8 text-gray-800">
    <DivergingStackedBars :data="data" @hover="setTooltip" />
  </div>

  <OTTooltip :info="tooltip">
    <div>
      <p class="my-0">👍 {{ tooltip?.data?.values?.val1?.value }}%</p>
      <p class="my-0">👎{{ tooltip?.data?.values?.val2?.value }}%</p>
    </div>
  </OTTooltip>
</template>

<script setup>
import useTooltip from "@/functions/useTooltip.js";

const [tooltip, setTooltip] = useTooltip();
</script>

Component API ​

The diverging stacked bar chart is built using html. The width of each segment is animated using CSS transitions on each segment div. The order of the bars is animated using the transition-group component with CSS transition classes (class name flip-list-delay-move).

Data ​

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

Props ​

Events ​

Dependencies ​

• d3