Charts

vel-src: charts.css

Pure CSS bar charts and progress rings. Bar height is driven by --vel-bar-h (a percentage value, e.g. 75%) on each fill element. Ring progress is driven by --vel-ring-pct (a bare number 0–100, no % unit) on the ring wrapper. No JavaScript required.

Class	Properties
vel-chart-bar	Bar chart container (height: 12rem)
vel-chart-axis-y	Vertical y-axis line (absolute)
vel-chart-grid	Horizontal grid lines overlay
vel-chart-grid-line	Single horizontal grid rule
vel-chart-bar-group	Column — value + fill + label
vel-chart-bar-value	Numeric label above bar
vel-chart-bar-fill	The bar — height set via --vel-bar-h (include %)
vel-chart-bar-label	Text label below bar
vel-chart-bar-fill-primary	Bar color — primary
vel-chart-bar-fill-success	Bar color — success (green)
vel-chart-bar-fill-danger	Bar color — danger (red)
vel-chart-bar-fill-warning	Bar color — warning (amber)
vel-chart-ring	Progress ring wrapper (6rem default)
vel-chart-ring-svg	SVG element — rotated -90deg for 12 o'clock start
vel-chart-ring-track	Background circle stroke
vel-chart-ring-fill	Progress arc — set --vel-ring-pct (0–100, no unit)
vel-chart-ring-label	Centered text overlay inside ring
vel-chart-ring-label-sub	Secondary smaller label line
vel-chart-ring-sm	Small ring — 4rem
vel-chart-ring-lg	Large ring — 9rem
vel-chart-ring-primary	Ring arc color — primary
vel-chart-ring-success	Ring arc color — success
vel-chart-ring-danger	Ring arc color — danger
vel-chart-ring-warning	Ring arc color — warning

Examples

Bar chart — weekly stats with mixed colors

Mon

Tue

Wed

Thu

Fri

Sat

Sun

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;">
  <div class="vel-chart-bar">
    <div class="vel-chart-axis-y"></div>
    <div class="vel-chart-grid">
      <div class="vel-chart-grid-line"></div>
      <div class="vel-chart-grid-line"></div>
      <div class="vel-chart-grid-line"></div>
      <div class="vel-chart-grid-line"></div>
    </div>
    <div class="vel-chart-bar-group">
      <span class="vel-chart-bar-value">42</span>
      <div class="vel-chart-bar-fill vel-chart-bar-fill-primary" style="--vel-bar-h:42%"></div>
      <span class="vel-chart-bar-label">Mon</span>
    </div>
    <div class="vel-chart-bar-group">
      <span class="vel-chart-bar-value">78</span>
      <div class="vel-chart-bar-fill vel-chart-bar-fill-primary" style="--vel-bar-h:78%"></div>
      <span class="vel-chart-bar-label">Tue</span>
    </div>
    <div class="vel-chart-bar-group">
      <span class="vel-chart-bar-value">55</span>
      <div class="vel-chart-bar-fill vel-chart-bar-fill-success" style="--vel-bar-h:55%"></div>
      <span class="vel-chart-bar-label">Wed</span>
    </div>
    <div class="vel-chart-bar-group">
      <span class="vel-chart-bar-value">91</span>
      <div class="vel-chart-bar-fill vel-chart-bar-fill-primary" style="--vel-bar-h:91%"></div>
      <span class="vel-chart-bar-label">Thu</span>
    </div>
    <div class="vel-chart-bar-group">
      <span class="vel-chart-bar-value">33</span>
      <div class="vel-chart-bar-fill vel-chart-bar-fill-danger" style="--vel-bar-h:33%"></div>
      <span class="vel-chart-bar-label">Fri</span>
    </div>
    <div class="vel-chart-bar-group">
      <span class="vel-chart-bar-value">67</span>
      <div class="vel-chart-bar-fill vel-chart-bar-fill-warning" style="--vel-bar-h:67%"></div>
      <span class="vel-chart-bar-label">Sat</span>
    </div>
    <div class="vel-chart-bar-group">
      <span class="vel-chart-bar-value">48</span>
      <div class="vel-chart-bar-fill vel-chart-bar-fill-success" style="--vel-bar-h:48%"></div>
      <span class="vel-chart-bar-label">Sun</span>
    </div>
  </div>
</div>

Progress rings — all sizes and colors

72%Tasks

89%Uptime

34%Storage

56%

✓

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;">
  <div class="vel-flex vel-flex-wrap vel-gap-6 vel-items-center">
    <div class="vel-chart-ring vel-chart-ring-lg vel-chart-ring-primary" style="--vel-ring-pct:72">
      <svg class="vel-chart-ring-svg" viewBox="0 0 100 100">
        <circle class="vel-chart-ring-track" cx="50" cy="50" r="42"/>
        <circle class="vel-chart-ring-fill"  cx="50" cy="50" r="42"/>
      </svg>
      <div class="vel-chart-ring-label">72%<span class="vel-chart-ring-label-sub">Tasks</span></div>
    </div>
    <div class="vel-chart-ring vel-chart-ring-lg vel-chart-ring-success" style="--vel-ring-pct:89">
      <svg class="vel-chart-ring-svg" viewBox="0 0 100 100">
        <circle class="vel-chart-ring-track" cx="50" cy="50" r="42"/>
        <circle class="vel-chart-ring-fill"  cx="50" cy="50" r="42"/>
      </svg>
      <div class="vel-chart-ring-label">89%<span class="vel-chart-ring-label-sub">Uptime</span></div>
    </div>
    <div class="vel-chart-ring vel-chart-ring-lg vel-chart-ring-danger" style="--vel-ring-pct:34">
      <svg class="vel-chart-ring-svg" viewBox="0 0 100 100">
        <circle class="vel-chart-ring-track" cx="50" cy="50" r="42"/>
        <circle class="vel-chart-ring-fill"  cx="50" cy="50" r="42"/>
      </svg>
      <div class="vel-chart-ring-label">34%<span class="vel-chart-ring-label-sub">Storage</span></div>
    </div>
    <div class="vel-chart-ring vel-chart-ring-warning" style="--vel-ring-pct:56">
      <svg class="vel-chart-ring-svg" viewBox="0 0 100 100">
        <circle class="vel-chart-ring-track" cx="50" cy="50" r="42"/>
        <circle class="vel-chart-ring-fill"  cx="50" cy="50" r="42"/>
      </svg>
      <div class="vel-chart-ring-label">56%</div>
    </div>
    <div class="vel-chart-ring vel-chart-ring-sm vel-chart-ring-primary" style="--vel-ring-pct:100">
      <svg class="vel-chart-ring-svg" viewBox="0 0 100 100">
        <circle class="vel-chart-ring-track" cx="50" cy="50" r="42"/>
        <circle class="vel-chart-ring-fill"  cx="50" cy="50" r="42"/>
      </svg>
      <div class="vel-chart-ring-label">&#10003;</div>
    </div>
  </div>
</div>