Charts > Histogram ​

A histogram is a graphical representation of the distribution of numerical data, where bars of varying heights depict the frequency of values within specified ranges.

The Chart ​

Randomize dataUpload data

Download example CSV

Copy HTML

Playground ​

Data

Style

Component API ​

This chart is built using SVG and d3. The d3 bin function is used to group data points in buckets of equal width. Use the thresholds prop to change the number of bins (not guaranteed, only an approximation).

Usage Example (with tooltip) ​

<template>
  <Histogram
    :key="key"
    :data="data"
    :color="color"
    :thresholds="20"
    @hover="setTooltip"
  />

  <OTTooltip :info="tooltip">
    <p class="font-semibold my-0">
      {{
        `${tooltip.data.length} (${(tooltip.data.length * data.length) / 100}%)`
      }}
    </p>
  </OTTooltip>
</template>

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

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

Data ​

[
        { id: "data1", name: "Data 1", value: 1 },
        { id: "data2", name: "Data 2", value: 1 },
        { id: "data3", name: "Data 3", value: 1 },
        { id: "data4", name: "Data 4", value: 3 },
...
      ]

Props ​

Dependencies ​

• d3