Charts > Tree map ​

A tree map is a data visualization technique that represents hierarchical structures or nested data through nested rectangles, with each branch subdivided into smaller rectangles proportional to the values they represent.

The Chart ​

Randomize dataSample datasetUpload data

Download example CSV

Copy HTML

Playground ​

Style

Usage Example (with tooltip) ​

<template>
  <TreeMap :data="data" class="h-full" @hover="setTooltip" />

  <OTTooltip :info="tooltip">
    <div>
      <p class="font-semibold my-0">{{ tooltip.name }}</p>
      <p class="my-0">{{ tooltip.value }}%</p>
    </div>
  </OTTooltip>
</template>

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

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

Component API ​

This chart is built using SVG and d3. It displays each category as a percentage of the total area.

Data ​

Data is given in hierarchical tree structure.

{
  name: "root",
  children: [
    {
      id: "data1",
      name: "Data 1",
      value: 30,
      color: "#d97706"
    },
    ...
  ]
};

Props ​

Events ​

Dependencies ​

• d3
• number formatter from utils/helpers.js

Featured in ​

• Odismet ONCE