# Data visualization — CSS charts Source: https://ui.barua.tz/docs/data-viz.html Rules and conventions: https://ui.barua.tz/llms.txt ## Chart Anatomy .b-chart is the frame: a titled column that stacks .b-chart__title , a .b-chart__canvas (position-relative, so gridlines and tooltips can float inside it), and a .b-legend . Axes sit beside or below the canvas. Everything below is this one recipe, swapping the middle. - Documentation: https://ui.barua.tz/docs/data-viz.html#chart-anatomy - Classes: `b-axis` `b-axis--y` `b-chart` `b-chart__canvas` `b-chart__title` `b-columns` `b-columns__bar` `b-gridlines` `b-legend` `b-legend__swatch` ```html ``` ```tsx import { Axis, Chart, Columns, GridLines, Legend } from "barua-ui";
Messages delivered — last 7 days
  • Delivered
    • ``` ## Column Chart .b-columns lays vertical bars on a flex baseline. Each .b-columns__bar takes its height from --v (a percentage of the chart height, --b-chart-h , default 10rem) and its x-label from data-label . Recolor any bar with --b-chart-color — here Thursday's peak. - Documentation: https://ui.barua.tz/docs/data-viz.html#column-chart - Classes: `b-chart` `b-columns` `b-columns--rounded` `b-columns__bar` `b-legend` `b-legend__swatch` ```html
    ``` ```tsx import { Columns } from "barua-ui";
    ``` ## Bar Chart Horizontal bars for ranked categories with long labels. Each .b-bars__row is a three-column grid: label, track, value. Fill width comes from --v ; widen the label column with --b-bars-label-w when city names need room. - Documentation: https://ui.barua.tz/docs/data-viz.html#bar-chart - Classes: `b-bars` `b-bars__label` `b-bars__row` `b-bars__track` `b-bars__value` ```html
    Dar es Salaam
    $120k
    Nairobi
    $100k
    Kampala
    $72k
    Kigali
    $56k
    Zanzibar
    $36k
    ``` ```tsx import { Bars } from "barua-ui";
    Dar es Salaam
    $120k
    Nairobi
    $100k
    Kampala
    $72k
    Kigali
    $56k
    Zanzibar
    $36k
    ``` ## Line Chart Lines are plain inline SVG — you own the coordinates, the stylesheet owns the look. Give the polyline path class="b-series" inside an svg.b-line-svg ; add dashed .b-svg-grid lines and .b-svg-axis-label texts. The stroke stays 2px at any size thanks to vector-effect: non-scaling-stroke . - Documentation: https://ui.barua.tz/docs/data-viz.html#line-chart - Classes: `b-chart` `b-chart__title` `b-line-svg` `b-series` `b-svg-axis-label` `b-svg-grid` ```html
    New subscribers — six months
    Mar Apr May Jun Jul Aug
    ``` ```tsx import { Chart, LineChart } from "barua-ui";
    New subscribers — six months
    Mar Apr May Jun Jul Aug     ``` ## Area Chart An svg.b-area-svg with two paths: a closed .b-area-fill underneath (same points, dropped to the baseline) and the .b-series stroke on top. The fill is an 18% tint of the series color, so one --b-chart-color on the retints both. - Documentation: https://ui.barua.tz/docs/data-viz.html#area-chart - Classes: `b-area-fill` `b-area-svg` `b-chart` `b-chart__title` `b-series` `b-svg-axis-label` `b-svg-grid` ```html
    Weekly active readers
    Mar May Jul
    ``` ```tsx import { AreaChart, Chart } from "barua-ui";
    Weekly active readers
    Mar May Jul     ``` ## Pie Chart A single div and a conic-gradient . Pass color stops through --b-pie as color start end triplets covering 0–100%; size it with --b-pie-size (default 9rem). Always pair with a legend — the wedges carry no text of their own. - Documentation: https://ui.barua.tz/docs/data-viz.html#pie-chart - Classes: `b-legend` `b-legend__swatch` `b-pie` ```html ``` ```tsx import { Legend } from "barua-ui";
  • Mobile · 45%
  • Desktop · 33%
  • Tablet · 22%
    • ``` ## Donut Chart Wrap a .b-pie in .b-donut : a radial mask punches the hole and .b-donut__center stacks on the same grid cell for a headline stat. The hole radius is --b-donut-hole , default 62% — raise it for a thinner ring. - Documentation: https://ui.barua.tz/docs/data-viz.html#donut-chart - Classes: `b-donut` `b-donut__center` `b-legend` `b-legend__swatch` `b-pie` `b-stat__label` `b-stat__value` ```html
    18.2k
    sends
    ``` ```tsx import { Donut, Legend } from "barua-ui";
    18.2k
    sends
  • Newsletter · 52%
  • Product updates · 29%
  • Digests · 19%
    • ``` ## Scatter Plot An svg.b-scatter-svg full of circle.b-dot elements — you supply cx , cy and r . Dots default to --b-chart-1 ; put --b-chart-color on individual circles for a second series. Session length against pages read, mobile vs desktop: - Documentation: https://ui.barua.tz/docs/data-viz.html#scatter-plot - Classes: `b-chart` `b-chart__title` `b-dot` `b-legend` `b-legend__swatch` `b-scatter-svg` `b-svg-axis-label` `b-svg-grid` ```html
    Session length vs pages read
    0 min ``` ```tsx import { Chart, ScatterChart } from "barua-ui";
    Session length vs pages read
    0 min ``` ## Radar Chart Concentric polygon.b-web rings and line.b-web spokes form the web; the filled polygon.b-series plots the values. Five axes on a 200×200 viewBox, center (100,100), outer radius 80. - Documentation: https://ui.barua.tz/docs/data-viz.html#radar-chart - Classes: `b-radar-svg` `b-series` `b-svg-axis-label` `b-web` ```html Design Code Data Ops Docs ``` ```tsx import { RadarChart, Web } from "barua-ui"; Design Code Data Ops Docs ``` ## Heatmap A CSS grid of cells. Column count comes from --b-heatmap-cols ; each cell's --v is an intensity from 0 to 1, mixed into the series color with color-mix() — 0 renders the empty fill, 1 the full --b-chart-color . Twelve months of commits, one row per week of the month: - Documentation: https://ui.barua.tz/docs/data-viz.html#heatmap - Classes: `b-axis` `b-chart` `b-heatmap` ```html
    JanJunDec
    ``` ```tsx import { Axis, Chart, Heatmap } from "barua-ui"; Jan Jun Dec ``` ## Gauge A half-donut for a single 0–100 reading. Set --b-progress as a unitless number (here 68 — note the linear progress bar takes a percentage instead), size with --b-gauge-size , and recolor with --b-chart-color . The label hangs below the arc, so leave it some room. - Documentation: https://ui.barua.tz/docs/data-viz.html#gauge - Classes: `b-gauge` `b-gauge__label` `b-gauge__value` ```html ``` ```tsx import { Gauge } from "barua-ui";
    68%
    Storage used
     ``` ## Sparkline A word-sized trend for stat cards and table cells: svg.b-sparkline stretches its single path across a 2rem-tall box ( preserveAspectRatio="none" lets it fill; the stroke never distorts). Purely decorative — keep it aria-hidden and let the stat carry the numbers. - Documentation: https://ui.barua.tz/docs/data-viz.html#sparkline - Classes: `b-card` `b-card__body` `b-sparkline` `b-stat` `b-stat__delta` `b-stat__label` `b-stat__value` ```html
    Messages sent 12,480 ↑ 8.2% this week
    Open rate 38.4% ↓ 2.1 pts this week
    ``` ```tsx import { Card, CardBody, Sparkline, Stat } from "barua-ui"; Messages sent 12,480 ↑ 8.2% this week Open rate 38.4% ↓ 2.1 pts this week ``` ## Progress Chart Stacked .b-progress-chart__row s, each a __head (label left, value right) over a standard .b-progress bar from Feedback . Here --b-progress is a width percentage on the fill — 96% , unit included. - Documentation: https://ui.barua.tz/docs/data-viz.html#progress-chart - Classes: `b-progress` `b-progress-chart` `b-progress-chart__head` `b-progress-chart__row` `b-progress__fill` ```html
    Newsletter96%
    Product updates88%
    Onboarding series72%
    Win-back41%
    ``` ```tsx import { Progress } from "barua-ui";
    Newsletter 96%
    Product updates 88%
    Onboarding series 72%
    Win-back 41%
    ``` ## Legend A wrapping ul.b-legend of swatch + label pairs. The .b-legend__swatch defaults to --b-chart-1 ; set the others inline. The six series tokens resolve to accent blue, teal, purple, orange, pink and green — and re-tune automatically in dark mode. - Documentation: https://ui.barua.tz/docs/data-viz.html#legend - Classes: `b-legend` `b-legend__swatch` ```html ``` ```tsx import { Legend } from "barua-ui";
  • Email
  • Push
  • In-app
  • SMS
  • Social
  • Webhooks
    • ``` ## Axis & Gridlines .b-axis spreads tick labels across a row in tabular figures; .b-axis--y stacks them beside a canvas. .b-gridlines floats dashed rules through a position-relative canvas — one per line. Columns reserve a 1.4rem label strip at the bottom, so give the gridlines inset-block-end: 1.4rem and the y-axis the same bottom padding to keep “0” on the baseline. - Documentation: https://ui.barua.tz/docs/data-viz.html#axis-gridlines - Classes: `b-axis` `b-axis--y` `b-chart` `b-chart__canvas` `b-columns` `b-columns__bar` `b-gridlines` ```html
    ``` ```tsx import { Axis, Chart, Columns, GridLines } from "barua-ui";
    ``` ## Chart Tooltip .b-chart-tip is a floating value bubble for the nearest data point: absolutely positioned inside the relative .b-chart__canvas , self-centered above its anchor via translate , with a small caret. Barua ships the look only — tracking the pointer, picking the point and setting left / top is app-side JavaScript. Shown pinned over Thursday: - Documentation: https://ui.barua.tz/docs/data-viz.html#chart-tooltip - Classes: `b-chart` `b-chart-tip` `b-chart__canvas` `b-columns` `b-columns__bar` ```html
    Thu · 4,120
    ``` ```tsx import { Chart, ChartTip, Columns } from "barua-ui";
    Thu · 4,120
    ``` ## Rule Mark Swift Charts' RuleMark : a dashed goal or threshold line laid over any chart canvas. Position with bottom as a percentage of the scale; --accent recolors it for targets rather than limits. - Documentation: https://ui.barua.tz/docs/data-viz.html#rule-mark - Classes: `b-columns` `b-columns__bar` `b-rule` `b-rule__label` ```html
    SLA 70%
    ``` ```tsx import { Columns } from "barua-ui";
    SLA 70%
    ``` ## Linear Gauge SwiftUI's linear Gauge style: a graded track with a marker at the current value ( --v ) and min/max labels beneath. Use __track--plain for a neutral track. - Documentation: https://ui.barua.tz/docs/data-viz.html#linear-gauge - Classes: `b-gauge-linear` `b-gauge-linear__labels` `b-gauge-linear__marker` `b-gauge-linear__track` `b-gauge-linear__track--plain` ```html
    0 GB15 GB
    MinMax
    ``` ```tsx import { LinearGauge } from "barua-ui";
    0 GB 15 GB
    Min Max
    ```