Appearance
Ribbon Chart
A ribbon chart is a variation of a stacked bar chart that shows how data categories flow or change over time. It highlights shifts in rank or size between groups with colored ribbons connecting each segment.
The Chart
Other compatible charts
Download example CSV
Copy HTML
Playground
Data
Number of stacked layers
Style
Colors for ribbons
Use lines in the chart
Use curves in the chart
Animation
Duration of animation in ms
Usage Example (with tooltip)
vue
<template>
<RibbonChart :data="data" @hover="setTooltip" />
<OTTooltip :info="tooltip">
<div v-if="tooltip?.data?.values">
<p
class="m-0"
v-for="item in Object.keys(tooltip.data.values)"
:key="item"
>
<span class="font-medium">
{{ tooltip.data.values[item]?.name }}:
</span>
{{ tooltip.data.values[item]?.value }}
</p>
</div>
</OTTooltip>
</template>
<script setup>
import useTooltip from "@/functions/useTooltip.js";
const [tooltip, setTooltip] = useTooltip();
</script>Component API
The ribbon chart is built using SVG and d3. You can use it with different options like with or without curves or lines. The area shapes animate using d3 transition.
Data
js
[
{
id: "data-1",
name: "Data 1",
values: {
val1: { id: "val1", name: "val 1", value: 60, order: 1 },
val2: { id: "val2", name: "val 2", value: 40, order: 2 },
},
},
{
// ...
},
];Props
| Name | Default | Type | Description |
|---|---|---|---|
| data | Array of example data | Array | Dataset for the ribbon chart |
| color | { val1: "#eee", val2: "#ccc" } | Object | Colors for each segment |
| rectStyle | { val1: "rect", val2: "line" } | Object | Style (e.g., shape) for each segment |
| margin | { top: 0, right: 0, bottom: 20, left: 0 } | Object | Margin around the chart |
| max | null | Number | Fixed max value for y-axis |
| duration | 500 | Number | Duration of animations in milliseconds |
| ease | "easeCubic" | String | Easing function for animations |
| refLine | null | Number | Value at which to show a reference line |
| refLineText | "" | String | Label for the reference line |
| showXAxis | true | Boolean | Whether to show the X axis |
| showYAxis | false | Boolean | Whether to show the Y axis |
| yTickValues | null | Array | Values to show as Y axis ticks |
| xTickValues | null | Array | Values to show as X axis ticks |
| paddingInner | 0.6 | Number | Padding between bars |
| paddingOuter | 0 | Number | Padding on the sides of the chart |
| bgColor | null | String | Background color for each column |
| format | (d) => d | Function | Formatter function for Y axis values |
| stacked | true | Boolean | Whether to stack the ribbons or not |
| keys | null | Array | Segment keys to use as layers, in order |
| useCurves | true | Boolean | Whether to use curved shapes for ribbons |
| useLines | false | Boolean | Whether to use line-based layout for ribbons |
Events
| Event | Argument | Description |
|---|---|---|
@select | { target, data } | Emitted when bar is clicked |
@hover | { target, data } | Emitted when bar is hovered |
Dependencies
- d3