37 cards · 14 chart types · MIT License

Dashboard cards
with an analyst’s judgment built in

Copy a card into your HTML and change only its JSON. The card computes changes, shares and attainment, and its colors and emphasis follow the rules of the Vizney chart guide.

Browse cardsView on GitHub

Working with an AI? Give it a card link or llms.txt, or install the skill in a coding agent.

Sales Overview

A dashboard made by pasting 5 cards into a grid

Pick by purpose

Decide what to show first. Each purpose has a base card; pick another card only when its condition fits.

  1. StatusWhat is the number now?

    BaseKPI - NumberJust the number and its baseline

  2. TrendHow has it changed?

    BaseLine - BasicThe course of one metric

  3. TargetHow far to the target?

    BaseKPI - GaugeOne metric against its target or limit

  4. CompareWhich is bigger or smaller?

    BaseBar - RankingSize and rank per item

  5. CompositionWhat is it made of?

    BaseDonut - BasicShares at one point in time

  6. TableExactly how much, per item?

    BaseGrid - BasicSeveral metrics and a total per item

  7. ChangeWhy did it go up or down?

    BaseWaterfall - BasicThe change between two points, by factor

  8. FlowWhere does it drop off, and where does it go?

    BaseFunnel - FlowHow much drops out at each step

  9. RelationHow do two values relate?

    BaseScatter - BasicWhether two measures move together

Pick by chart

37 cards in 14 chart types, grouped by the chart names of the Vizney chart guide. Pick a chart to see all of its cards.

KPI Cards5 Bar Chart8 Line Chart6 Grid Chart4 Donut Chart1 Scatter Chart3 Treemap Chart1 Heatmap Chart1 Waterfall Chart2 Funnel Chart1 Waffle Chart1 Bump Chart1 Sankey Chart2New Radar Chart1New

How to use

Nothing to install. One card is an HTML snippet that carries its own styles, data and script.

  1. Copy and paste

    Press Copy on a card and paste it anywhere inside the <body> of your HTML.

    <div class="vzb-card"
     data-vzb="bar-basic">
  …
</div>

  2. Change only the JSON

    Edit the values in the card’s JSON. The card computes changes, shares and attainment.

    "title": "Orders by Quarter",
"format": "count",
"labels": ["1Q26", "2Q26", "3Q26"],
"values": [2561, 2654, 2750]

  3. Tune with variables

    Set colors and the font with :root variables; they apply to every card at once. The list is in tokens.css.

    :root {
  --vzb-primary: #0f766e;
  --vzb-font: 'Pretendard';
}

  4. Hand it to an AI

    Give a chat AI the card’s AI link; install the skill in a coding agent.

    blocks.vizney.com/en/cards/
  bar-basic.txt
Draw our monthly sales by
branch with this card

npx skills add
  yehwanhwang/vizney-blocks
Common fields and layout
title
Metric name
subtitle
Period subtitle: what is measured, and as of when.
value
The headline figure of a KPI card. KPI - Line and KPI - Bar use the last value when it is omitted.
format
usd dollar amounts, shortened to $745.6K · $1.2M; count a count (its unit in unit); pct a percentage (changes in pp); days a number of days; eok and krw are Korean won notations
better
up, down, neutral. Decides whether a change is colored green or red.
compare
{ "label", "value" }. The baseline a KPI card computes its change against.
labels
Period names, the same length as values; use null for a period without a value.
series
[{ "name", "values" }], for several lines or groups of bars.
rows
Rows of a table or list, each with a name and its values. The card computes the total row, shares, change rates and attainment.
curve
Line shape: smooth (default), linear, step. Used by the line cards and KPI - Line.
lang
en makes the words the card prints itself English (Total, Other, Met…). Omit it for Korean.

Several cards in a row

Cards do not lay themselves out. Give the wrapper a grid and the rows wrap to the width. Keep each card at least 340px wide; narrower, the text in tables and donuts clips. Cards in a row stretch to the tallest one, so a row of equal-height cards leaves no gaps.

<div style="display:grid;
  grid-template-columns:
    repeat(auto-fit,
      minmax(min(100%, 340px), 1fr));
  gap:16px;">
  <!-- several cards -->
</div>