Components

Bar chart

A minimal flat bar chart — no library. The default is vertical: a flex-end row of columns whose heights are set inline as a percentage of the max. A horizontal modifier lays the same data out as rows. Bars fill with the accent or a status color.

Vertical

Each __bar height is set with an inline style="height: …%" (value ÷ max).

Columns

<div class="ds-barchart" role="img" aria-label="Weekly volume">
  <div class="ds-barchart__col">
    <div class="ds-barchart__track">
      <div class="ds-barchart__bar" style="height:40%"></div>
    </div>
    <span class="ds-barchart__value">12</span>
  </div>
  <!-- …more columns… -->
</div>

With labels & status

A small faint __label sits under each column; a bar can take a status color via .is-success / .is-warning / .is-danger.

Labels + status bars

EMEA

AMER

APAC

LATAM

<div class="ds-barchart" role="img" aria-label="Status by region">
  <div class="ds-barchart__col">
    <span class="ds-barchart__label">EMEA</span>
    <div class="ds-barchart__track">
      <div class="ds-barchart__bar is-success" style="height:80%"></div>
    </div>
    <span class="ds-barchart__value">80</span>
  </div>
  <!-- …more columns… -->
</div>

Horizontal

The --horizontal modifier turns the chart into rows: label · track · value, with the bar width as the data dimension.

.ds-barchart--horizontal

Design

Engineering

Sales

<div class="ds-barchart ds-barchart--horizontal" role="img" aria-label="Spend by team">
  <div class="ds-barchart__col">
    <span class="ds-barchart__label">Design</span>
    <div class="ds-barchart__track">
      <div class="ds-barchart__bar" style="width:72%"></div>
    </div>
    <span class="ds-barchart__value">72</span>
  </div>
  <!-- …more rows… -->
</div>

React

The <BarChart> component takes data={label, value, status?}[] and derives each bar length from value / max.

import { BarChart } from "@diametral/design-system/react";

<BarChart data={[
  { label: "EMEA", value: 80, status: "success" },
  { label: "AMER", value: 55, status: "warning" },
  { label: "APAC", value: 30, status: "danger" },
]} />

<BarChart horizontal max={100} data={[
  { label: "Design", value: 72 },
  { label: "Engineering", value: 98 },
]} />