Charts > Column chart ​

A stacked column chart visually displays multiple data series in vertical columns, using segmented sections to represent cumulative values for each category.

The Chart ​

Randomize dataUpload data

Download example CSV

Copy HTML

Playground ​

Data

Animation

Style

Component API ​

The column chart is built using SVG and can be used as a regular column chart or a stacked column chart with multiple segments per column. Use the keys prop to control which segments are drawn as layers and in which order. If not given, the keys are taken from the first data element's values object.

Usage Example (with tooltip) ​

<template>
  <ColumnChart
    :data="data"
    @hover="setTooltip"
    class="h-72 mt-8"
    style="width: 100%; height: 200px;"
  />

  <OTTooltip :info="tooltip">
    <p v-for="item in Object.keys(tooltip.data.values)" class="my-0">
      <span class="font-medium">{{ item }}: </span>
      {{ tooltip.data.values[item].value }}
    </p>
  </OTTooltip>
</template>

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

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

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 ​

Dependendencies ​

• d3

Featured in ​

• Movilidad Big Data
• WEF Nexus Index
• WIPO
• Fecyt