Charts
Every chart and graph in the Felix palette, on one page. Each one has a live preview with its motion, and a short note on when to use it. Synthetic data only.
All charts
Trends over time
- Spline line · single / dual
- Gradient spline area
- Step progression
- Stream wave
- Min/max range band
- Pill bars + spline
- Dual-axis · revenue / occupancy
- Financial candlesticks
- Telemetry sparklines
- Line
- Area
- Sparkline
- Series filter + bars + trend
Comparison
- Pill bars · column / row
- Stacked tones
- Dumbbell · plan / actual
- Bullet targets
- Waterfall steps
- Polar radial pillars
- Radar web
- Grouped radial arcs
- Column bar
- Horizontal bar
- Grouped bar
- Stacked bar
- Waterfall
- Radar
Parts of a whole
Distribution and relationships
- Scatter matrix
- Bubble clusters
- Histogram · attendance distribution
- Box plot · revenue spread
- Scatter
- Bubble
- Histogram
Activity and time grids
- Activity heatmap · Emerald
- Activity heatmap · Sky
- Activity heatmap · Violet
- Dot-matrix heatmap
- Day × hour · studio occupancy
- Cohort · member retention
- Gantt · studio timeline
- Heatmap
KPIs and progress
Flows and funnels
- Sankey flow
- Stage funnel
- Funnel
- Dependent task cards
- Process graph
- Animated Mermaid
- Conversion funnel (Sankey)
Looking for dashboards built from these charts? See the Reports example.
Chart gallery
Includes 30 patterns adapted from the Amicro reference, plus eight dashboard patterns (histogram, Gantt, day/hour heatmap, cohort retention, box plot, dual-axis combo, dumbbell and sunburst). Each card has synthetic data, hover/focus readouts, keyboard buttons and reduced-motion support. Dataset A/B updates time-series charts; allocation, target and flow examples use their own labeled fixtures. Existing chart examples remain below.
Hover or focus a mark to read its value. Use the readout buttons for a keyboard and touch readout. Motion follows your reduced-motion setting. These are Vue/SVG demos, not the reference's React package.
Activity heatmap · Emerald
Calendar-style grid of daily activity. Darker cells mean more events; use it for habits and streaks.
Cell 1: 12 events
Activity heatmap · Sky
The same activity grid in a cool tone, for a second metric on the same page.
Cell 1: 9 events
Activity heatmap · Violet
The activity grid in a violet tone, for secondary or comparison data.
Cell 1: 15 events
Spline line · single / dual
Smooth trend over time. Switch to dual to compare two series on one scale.
Jan: 35 units · secondary 20
Pill bars · column / row
Rounded bars that grow from zero. Flip between columns and rows for long labels.
Jan: 35 units · secondary 20
Gradient spline area
Trend with a soft gradient fill under the line, good for volume over time.
Jan: 35 units · secondary 20
Rounded donut
Share of a whole with a total in the middle. Keep it to five slices or fewer.
Core: 40%
Pill bars + spline
Bars for totals with a line for the trend, sharing one axis.
Jan: 35 units · secondary 20
Scatter matrix
Dots on two axes to spot clusters and outliers between two measures.
Node 1: x 20, y 35
Financial candlesticks
Open, high, low and close for each period, as used in price charts.
Jan: open 135, high 150, low 120, close 144
KPI with sparkline
One headline number with its change and a small trend line behind it.
$48,920+14.2% · monthly revenue
Jan: 35 units · secondary 20
Tier pyramid
Stacked tiers from base to top, for plans, levels or rankings.
Tier 4: 24 units
Grouped radial arcs
Grouped arcs on a circle so you can compare a few goals at a glance.
Ring 1: 35%
Speedometer
Dial with a needle that sweeps to the current value against a range.
84% of a 100% scale
Bullet targets
A value against its target, with bands for poor, fair and good.
Throughput: 82%, target 75%
Sankey flow
Flow between stages. Band width shows how much moves from one step to the next.
Source A: 60 units
Step progression
Value that holds and then jumps, such as plan tiers or inventory levels.
Jan: 35 units · secondary 20
Stacked tones
Bars split into parts so you can see the total and what it is made of.
Jan: base 20, top 15, total 35
Radar web
Several scores on one web, to compare the shape of two profiles.
Jan: 35 units · secondary 20
Concentric progress rings
Concentric progress rings, one per goal, that fill to their percent.
Ring 1: 35%
Stage funnel
Stages that narrow as people drop off, with the share kept at each step.
Stage 1: 100%
Dot-matrix heatmap
Grid of dots whose fill shows intensity, a lighter alternative to a heatmap.
Cell 1: 0 events
Telemetry sparklines
Rows of tiny live-style sparklines for many signals at once.
CPU Temp: 42°C
Bubble clusters
Bubbles sized by a third value, to compare three measures in one view.
Node 1: x 20, y 35, size 10
Tile treemap
Nested tiles sized by value, for parts of a budget or catalog.
Storage: 45%
Stream wave
Flowing layered wave that shows how categories change over time.
Jan: lower 23, middle 41, upper 48
Arc meter
Half-circle meter that fills to a single value.
84% of a 100% scale
Waterfall steps
Start, inflow, outflow and net, so you can see how a total was reached.
Opening 60
Polar radial pillars
Pillars radiating from a center, one per category.
Ring 1: 35%
Min/max range band
Band between a minimum and a maximum, with both edges drawn.
Jan: min 20, max 50
Histogram · attendance distribution
Counts per bucket to show how values are distributed.
Classes grouped into equal 10-attendee bins. Bar height = class count.
0–9 attendees: 3 classes
Gantt · studio timeline
Tasks as bars on a timeline, with start, length and overlap.
Coach shifts on a 06:00–22:00 timeline. Bar length = duration.
Coach A: 6:00–10:00
Day × hour · studio occupancy
Day by hour grid showing when things are busiest.
Rows = day, columns = hour. Darker cells = higher occupancy (0–100%).
Mon 6:00: 23% occupied
Cohort · member retention
Retention by signup group, read left to right as time passes.
Signup month × months since signup. Blank future months are not zero.
Jan, month 0: 100% retained
Box plot · revenue spread
Median, quartiles and spread for each group.
Whiskers = min/max; box = Q1–Q3; line = median. Revenue in dollars.
Ride revenue: min $20, Q1 $40, median $55, Q3 $70, max $90
Dual-axis · revenue / occupancy
Two measures with their own axes, one as bars and one as a line.
Bars use the left dollar axis; dashed line uses the right occupancy axis (%).
Jan: revenue $3500, occupancy 62%
Dumbbell · plan / actual
Plan against actual for each item, joined by a line to show the gap.
Outlined dot = planned; filled dot = actual attendees.
Ride: plan 25, actual 21 attendees
Sunburst · expense hierarchy
Rings for each level of a hierarchy, such as expense categories.
Inner ring = category; outer ring = subcategory. Angle = share of total.
Operations: 60% of total expenses
Integration notes
Import ChartGallery.vue for a demo or extract a single card into your application. Replace the synthetic arrays, label units, handle missing data, and use the Ready/Loading/Empty selector to preview chart states, and add error handling before live use. Sankey band width encodes flow; treemap tile area encodes share; waterfall bars encode signed deltas; candlesticks expose open/high/low/close in the readout. Charts should supplement, not replace, accessible data tables. The three colored activity grids are variants of one chart family.
Series filter + bars + trend
Bars per month with a segmented filter ("All" sums the series). The trend is a least-squares line over complete months only, so the current month is left out, and it needs 3 or more months with data. A missing month shows a dash and no bar. Fictitious data. Motion replays when the filter changes and stops with reduced motion.
Rises about $8 per month (complete months only). Sep is the current month and is left out.
| Mar | $158 |
|---|---|
| Apr | $152 |
| May | $164 |
| Jun | $190 |
| Jul | $192 |
| Aug | $188 |
| Sep (current) | $136 |
Chart types
Data graphics in the Felix palette. Series order: turquoise #2bf2f1, cactus #42b552, mango #f19d38, blueberry #6e58d8, papaya #f77b42, lime #dcff00. Numbers below are a sample of monthly transfers, not live data.
Line
Trend over time with a draw-in line and a dot at each point.
Area
A line with a filled area, for volume that builds over time.
Column bar
Vertical bars that grow from zero, for comparing categories.
Horizontal bar
Horizontal bars for long labels and ranked lists.
Grouped bar
Two or more bars per category, side by side.
Envíos Recepciones
Stacked bar
Bars split into parts that add up to the total.
Principal Comisión
Pie
Slices of one whole, each with a label.
Donut
A pie with a hole, with the total in the middle.
Scatter
Dots on two axes to show how two values relate.
Bubble
Dots sized by a third value.
Sparkline
A tiny trend line with no axes, for tables and cards.
80 jun
Radar
Several scores on one web, to compare shapes.
Heatmap
A grid where color shows how much happened.
EneFebMarAbrLunMiéVie
Gauge
One value against a target, on a half dial.
Histogram
Counts per range, to show how values spread.
Funnel
Stages that narrow as people drop off.
Waterfall
How a total is built from gains and losses.
Start every bar and area at zero. Pie and donut slices must sum to one whole. Status colors stay semantic: do not use papaya or cactus as a brand series when the mark means error or success.
Graphs and flows
A dependency is a line between two pieces of work. Status uses the Felix semantic colors: completed, in progress, pending, and blocked. Turquoise stays on the action. An edge animates only while that dependency is in progress, and the animation stops when motion is reduced.
Dependent task cards
The card is the task. The line is the dependency, and the same dependency is written on the card. Hover or focus a card to light up what it waits on and what it unblocks. Press Avanzar on the task in progress, or Bloquear to stop it; a blocked task keeps everything after it waiting until you press Reanudar. Tags name the teams involved. The next task starts once every card that points to it is complete.
Identity and destination can finish on their own. Creating the transfer waits for both.
Verificar identidad y Elegir destino están completadas. Crear envío está en curso.
Process graph
The same kind of dependency, drawn as objects. Use it when the label is a system or a step, such as a background job. Six states: Completado, En curso, Pendiente, Con error, Inactivo and Desconocido. Objects place themselves in rows from their links, so a graph needs no coordinates. Select an object to see its detail table. Completar and Reintentar are demo actions on the selected object.
Cotización y KYC están completados. Ledger está en curso.
Layout rules: a node sits one row below its deepest dependency, and nodes in a row are ordered by where their dependencies sit. Edges follow the target state: solid and animated into a running node, solid into a completed one, dotted into a pending, idle or unknown one, and papaya into a failed one. Color is never the only signal; every object carries its state in text. A real list view is the same data in a table, for screen readers and long graphs.
Animated Mermaid
Mermaid stays the source of the diagram. Theme variables apply the Felix palette, and a dash runs along each edge. Pausar holds the labels in place. The flowchart matches the transfer above. The state diagram adds Bloqueado, in papaya, and that state stays still.
Dependency flowchart
Loading diagram…
Mermaid source
flowchart TD
identity[Verificar identidad] --> transfer[Crear envío]
destination[Elegir destino] --> transfer
transfer --> confirm[Confirmar monto]
confirm --> deliver[Entregar]
classDef ok fill:#eefbf0,stroke:#60d06f,color:#1b7a29
classDef run fill:#fffce0,stroke:#ffd200,color:#665500
classDef wait fill:#fefcf9,stroke:#cfcabf,color:#35605f
class identity,destination ok
class transfer run
class confirm,deliver waitStatus states
Loading diagram…
Mermaid source
stateDiagram-v2
[*] --> pending
pending --> running: dependencias listas
running --> done: confirmar
running --> blocked: falla
blocked --> running: reintentar
state "Pendiente" as pending
state "En curso" as running
state "Completado" as done
state "Bloqueado" as blocked
classDef wait fill:#fefcf9,stroke:#cfcabf,color:#35605f
classDef run fill:#fffce0,stroke:#ffd200,color:#665500
classDef ok fill:#eefbf0,stroke:#60d06f,color:#1b7a29
classDef bad fill:#fff5ef,stroke:#f26629,color:#a03808
class pending wait
class running run
class done ok
class blocked badA short diagram can live in Mermaid. A board of real tasks keeps each label in HTML, as the cards and objects above do, and draws only the edges in SVG so every step can take focus.
Conversion funnel (Sankey)
Multi-stage conversion flow with drop-offs, date ranges, play/pause and keyboard focus. It inherits this template's colors and works with synthetic data. Replace the stage counts with your own source of truth.
Conversion funnel 20,400 trials
Where new trials convert or drop off. Sample data, local interactions only.
Signed up20,400100%
Activated13,26065.0%
Team invited7,82338.3%
Converted14.4%2,934 upgraded
Signed up20,400 trials · 100.0% of sign-ups
UpgradedDropped offParticle density follows trial volume. Fictitious data, no analytics service connected.
Status gauge and funnel
A weighted-progress gauge next to a by-status funnel. Hover or focus a gauge color or a funnel bar to see which status it is, how many cards it holds and what it counts for. The gap between gauge slices is drawn inside each slice, so the filled arc always ends exactly at the progress value.
Gauge
Progress
Weighted by status: completed 100%, in review 75%, in progress 25%, ready and blocked 0%. Hover a color to see what it is.
11%1 of 9 cards
Funnel
By status
Each bar width is the share of cards in that status. Hover a bar to see what it means.