NorbieLink
search close
Press↑↓to navigate ↵to openEscto close
Home › Components › Chart

Chart

arrow_back arrow_forward

A bar chart component for visualizing quantitative data.

Bar Chart — Monthly
January – July 2025
Jan
Feb
Mar
Apr
May
Jun
Jul
Components
<div class="chart-wrap">
  <div class="chart-title">Chart title</div>
  <div class="bar-chart">
    <div class="bar-col">
      <div class="bar" style="height:60%;background:#A614C3;"></div>
      <div class="bar-label">Jan</div>
    </div>
    <!-- more bars -->
  </div>
</div>

Installation

Built with pure HTML and CSS. Include ds-shared.css in your project.

pnpm add @norbielink/ds

Examples

Line chart

Line Chart — Linear
Active users · last 7 days
100 75 50 25 Mon Tue Wed Thu Fri Sat Sun
Active users
<svg class="chart-svg" viewBox="0 0 480 180">
  <path class="line-path" stroke="#A614C3"
        d="M 60 90 L 120 70 L 180 110 ..."/>
  <circle class="point" cx="60" cy="90" stroke="#A614C3"/>
  <!-- more points -->
</svg>

Area chart

Area Chart — Stacked
New vs returning users
Mon Tue Wed Thu Fri Sat Sun
New
Returning
<svg class="chart-svg" viewBox="0 0 480 180">
  <defs>
    <linearGradient id="ar1">...</linearGradient>
  </defs>
  <path class="area-path" fill="url(#ar1)" stroke="#A614C3" d="..."/>
</svg>

Donut chart

Donut Chart — Distribution
Components by category
52 Total
Components65%
Foundations20%
Patterns15%
<svg class="donut-svg" viewBox="0 0 64 64">
  <circle class="donut-bg" cx="32" cy="32" r="26"/>
  <circle class="donut-seg" stroke="#A614C3"
          stroke-dasharray="65 100" pathLength="100"/>
</svg>

Horizontal bar chart

Horizontal Bar — Top categories
Components per category
Buttons
12
Forms
10
Overlays
8
Display
6
Navigation
4
<div class="hbar-chart">
  <div class="hbar-row">
    <span>Buttons</span>
    <div class="hbar-track">
      <div class="hbar-fill" style="width:92%;"/>
    </div>
    <span class="hbar-val">12</span>
  </div>
</div>

Stacked bar chart

Stacked Bar — Quarterly
Releases by category
Q1
Q2
Q3
Q4
Components
Foundations
Patterns
<div class="bar-col">
  <div class="bar-stack">
    <div class="bar stacked top" style="height:28%;..."/>
    <div class="bar stacked" style="height:32%;..."/>
    <div class="bar stacked" style="height:40%;..."/>
  </div>
</div>

API Reference

Classes

ClassDescription
chart-cardOuter wrapper (max-width 480px)
chart-headTitle + description block
chart-titleChart heading text
chart-descSubtitle / time range
bar-chartVertical bar container (flex, align-items:flex-end)
bar-colColumn with bar + label
barBar element — set height% via style
bar-stackStacked bar wrapper (flex-direction:column-reverse)
hbar-chartHorizontal bar container
hbar-rowRow: label + track + value
hbar-track / hbar-fillTrack + filled portion
chart-svgSVG container for line/area charts
line-path / area-pathStroke / area paths
donut-svg / donut-segDonut chart segments
chart-legend / legend-item / legend-dotBottom legend rows