Skip to content
Wingtics
Components

Charts by type. Install one.

37 pieces — area through sunburst, metrics, lists, dashboard. Each page has a live Preview, Customize knobs, a Code tab, and the full props table. Colors come from --chart-1…--chart-5.

Charts

Area chart

Filled trend. Gradient, hatch, stripes, dither, glow — the drawing, not a palette.

18 variants

Line chart

Stroke only. Dashed, ping, rainbow, numbered dots, a soft glow, a dotted projection, or twin axes.

15 variants

Bar chart

Category comparison. Hatched, duotone, gradient, or a bloom.

14 variants
  • Chrome1,221
  • Safari1,059
  • Firefox986
  • Edge928

Total 4,194

Pie chart

Share of a dimension. Donut, rounded, radial, or a glow.

9 variants
Views9,799100%−51%Visits4,77549%−12%Visitors4,19443%−87%Events5636%

Funnel chart

Conversion stages. A tapering tape, discrete steps, or a vertical drop-off.

4 variants

Radar chart

Compare axes on a spider. Stroke, fill, dither, or a bloom.

5 variants

Composed chart

Two series on one axis. Bars plus a line, a highlight bloom, or a dashed overlay.

3 variants

Scatter chart

Correlation. Dots, bubbles, or a bloom on each point.

4 variants

Sankey chart

Flow between stages. A path from source to outcome.

3 variants

Candlestick chart

Open, high, low, close, and volume. Solid, hollow, wick-only, or volume pane.

4 variants
  • US776
  • GB673
  • DE626
  • ES590
  • BR559
  • FR535
  • IN435

Choropleth

Regions by intensity. Tiles, heat, or a dithered field.

3 variants

Live line

A sliding window. Stream, glow, or a dashed pulse.

3 variants
  • Chrome1,221
  • Safari1,059
  • Firefox986
  • Edge928

Ring chart

Concentric KPI rings. Stack, nest, or a thick track.

3 variants

Heatmap

A calendar of intensity. Grid, matrix, or dithered cells.

4 variants
  • Views9,799

Sunburst

Hierarchy as rings. Nested slices or a burst.

2 variants

Profit / loss

Above and below zero. Fill, stroke, or opposing bars.

3 variants
visitors4,194
pageviews9,799
visits4,775
events563
2026-08-132026-09-11

4 series over 30 points, from 2026-08-13 to 2026-09-11.

Horizon chart

Many series, folded into bands. Twenty lanes where two line charts would fit.

2 variants
US: 776 (19%)GB: 673 (16%)DE: 626 (15%)ES: 590 (14%)BR: 559 (13%)FR: 535 (13%)IN: 435 (10%)

Treemap

Share and direction at once. Squarified, so every tile stays readable.

2 variants
09-06-2309-07+8009-08+5909-09+3409-10-1409-11+4Total140

Waterfall

Where the change came from. Floating bars bridging start to end.

2 variants

Share band

One 100% band. What a donut says in 200px, in 20.

2 variants
Prev 30dLast 30d
  • US+80
  • GB-70
  • DE-108
  • ES-20
  • BR-25
  • FR+33

Slope chart

Two dates, one line each. The slope is the change.

2 variants
  • Chrome#1
  • Safari#2
  • Firefox#3
  • Edge#4

Ranks from 7d to 90d.

Bump chart

Rank over time. Which items are climbing, not how big they are.

2 variants
ChromeSafariFirefoxEdge
  • visitors4,194
  • pageviews9,798

Marimekko

Width is volume, height is share. Area is the real number.

4 variants
v0.3.02026-08-21Deploy2026-08-31

Timeline

A dated rail of deploys, releases and incidents.

4 variants
visitors348
pageviews791
visits398
events46
2026-08-13 00:002026-09-11 23:24

Strip chart

Raw events, one tick each. Bursts and gaps survive, unlike buckets.

4 variants
Thu 00:00 — 25Thu 01:00 — 18Thu 02:00 — 13Thu 03:00 — 10Thu 04:00 — 10Thu 05:00 — 15Thu 06:00 — 38Thu 07:00 — 75Thu 08:00 — 113Thu 09:00 — 125Thu 10:00 — 119Thu 11:00 — 113Thu 12:00 — 106Thu 13:00 — 113Thu 14:00 — 119Thu 15:00 — 125Thu 16:00 — 115Thu 17:00 — 100Thu 18:00 — 88Thu 19:00 — 78Thu 20:00 — 69Thu 21:00 — 56Thu 22:00 — 44Thu 23:00 — 33Fri 00:00 — 32Fri 01:00 — 22Fri 02:00 — 16Fri 03:00 — 13Fri 04:00 — 13Fri 05:00 — 19Fri 06:00 — 47Fri 07:00 — 95Fri 08:00 — 142Fri 09:00 — 158Fri 10:00 — 150Fri 11:00 — 142Fri 12:00 — 134Fri 13:00 — 142Fri 14:00 — 150Fri 15:00 — 158Fri 16:00 — 145Fri 17:00 — 126Fri 18:00 — 111Fri 19:00 — 98Fri 20:00 — 87Fri 21:00 — 71Fri 22:00 — 55Fri 23:00 — 41Sat 00:00 — 25Sat 01:00 — 17Sat 02:00 — 12Sat 03:00 — 10Sat 04:00 — 10Sat 05:00 — 15Sat 06:00 — 37Sat 07:00 — 74Sat 08:00 — 111Sat 09:00 — 123Sat 10:00 — 117Sat 11:00 — 111Sat 12:00 — 105Sat 13:00 — 111Sat 14:00 — 117Sat 15:00 — 123Sat 16:00 — 113Sat 17:00 — 98Sat 18:00 — 86Sat 19:00 — 76Sat 20:00 — 68Sat 21:00 — 55Sat 22:00 — 43Sat 23:00 — 32Sun 00:00 — 21Sun 01:00 — 15Sun 02:00 — 11Sun 03:00 — 8Sun 04:00 — 8Sun 05:00 — 13Sun 06:00 — 32Sun 07:00 — 63Sun 08:00 — 95Sun 09:00 — 105Sun 10:00 — 100Sun 11:00 — 95Sun 12:00 — 89Sun 13:00 — 95Sun 14:00 — 100Sun 15:00 — 105Sun 16:00 — 97Sun 17:00 — 84Sun 18:00 — 74Sun 19:00 — 65Sun 20:00 — 58Sun 21:00 — 47Sun 22:00 — 37Sun 23:00 — 27Mon 00:00 — 35Mon 01:00 — 24Mon 02:00 — 17Mon 03:00 — 14Mon 04:00 — 14Mon 05:00 — 21Mon 06:00 — 52Mon 07:00 — 104Mon 08:00 — 157Mon 09:00 — 174Mon 10:00 — 165Mon 11:00 — 157Mon 12:00 — 148Mon 13:00 — 157Mon 14:00 — 165Mon 15:00 — 174Mon 16:00 — 160Mon 17:00 — 139Mon 18:00 — 122Mon 19:00 — 108Mon 20:00 — 96Mon 21:00 — 78Mon 22:00 — 61Mon 23:00 — 45Tue 00:00 — 18Tue 01:00 — 12Tue 02:00 — 9Tue 03:00 — 7Tue 04:00 — 7Tue 05:00 — 11Tue 06:00 — 27Tue 07:00 — 53Tue 08:00 — 80Tue 09:00 — 89Tue 10:00 — 85Tue 11:00 — 80Tue 12:00 — 76Tue 13:00 — 80Tue 14:00 — 85Tue 15:00 — 89Tue 16:00 — 82Tue 17:00 — 71Tue 18:00 — 62Tue 19:00 — 55Tue 20:00 — 49Tue 21:00 — 40Tue 22:00 — 31Tue 23:00 — 23Wed 00:00 — 31Wed 01:00 — 22Wed 02:00 — 16Wed 03:00 — 12Wed 04:00 — 12Wed 05:00 — 19Wed 06:00 — 47Wed 07:00 — 93Wed 08:00 — 140Wed 09:00 — 155Wed 10:00 — 147Wed 11:00 — 140Wed 12:00 — 132Wed 13:00 — 140Wed 14:00 — 147Wed 15:00 — 155Wed 16:00 — 143Wed 17:00 — 124Wed 18:00 — 109Wed 19:00 — 96Wed 20:00 — 85Wed 21:00 — 70Wed 22:00 — 54Wed 23:00 — 4000061218

Busiest: Mon at 09:00

Synthetic hourly fallback

Radial time

Hours around the circle, weekdays as rings. Midnight stops being an edge.

3 variants
CohortSizeWeek 0Week 1Week 2Week 3Week 4
Week 11,049100%78%56%34%12%
Week 2839100%76%52%28%
Week 3699100%74%48%
Week 4599100%72%
Week 5524100%

Cohort grid

Retention by cohort. The one question a time series cannot answer.

2 variants

Globe

Just the globe. Country codes resolve to coordinates, markers scale with the value, and it names the shortfall without WebGL.

5 variants

Metrics

Events this cycle563 of 760
74% usedResets in 12 days

Quota bar

Usage against a ceiling, with the limit in the drawing.

4 variants

Visitors

4,194
-12%

Metric card

One number, a delta, an optional spark. Wired through useQuery.

6 variants

41%

bounceRate

Gauge

One ratio on a dial. Arc, ring, or a tick needle.

4 variants

Metric tabs

The metric cards are the chart's tabs — click one and the chart below follows.

4 variants

Lists

MetricValueTrendChange
visitors4,194+104
pageviews9,799+274
visits4,775+92
events563+8

Spark table

A real table with a trailing sparkline and a signed delta.

4 variants
VisitorsTotal
  • US21%7761,813
  • GB18%6731,572
  • DE17%6261,464
  • ES16%5901,378
  • BR15%5591,307
  • FR14%5351,250

Breakdown card

A breakdown with the panel around it: dimension tabs, two value columns, a faded overflow row and a hover toolbar.

4 variants
  • Chrome1,221
  • Safari1,059
  • Firefox986
  • Edge928

Ranked list

Breakdown rows as bars, a compact list, or a table.

5 variants

Layout

No events in this range

Events arrive once the tracking snippet fires. Widen the range, or check that the site is sending them.

Empty state

Nothing to show, said once: what is missing, why, and the way out.

4 variants

Visitors

4,194
-12%

Pageviews

9,799
-13%

Visits

4,775
-13%

Events

563
-19%

Visitors over time

Top pages

  • /1,813
  • /pricing1,572
  • /blog1,464
  • /blog/launch1,378
  • /docs1,307
  • /docs/quickstart1,250
  • /about1,017

Top referrers

  • google866
  • twitter751
  • github699
  • direct658
  • linkedin624
  • newsletter597

Devices

  • Desktop1,568
  • Mobile1,360
  • Tablet1,266

Total 4,194

Browsers

Operating systems

  • macOS1,009
  • Windows875
  • iOS815
  • Android767
  • Linux727

Countries

  • US776
  • GB673
  • DE626
  • ES590
  • BR559
  • FR535
  • IN435

Sources

  • google866
  • twitter751
  • github699
  • direct658
  • linkedin624
  • newsletter597

Daily visitors

Intensity of traffic across the range.

Dashboard

Registered widgets on a grid. Same catalog, any connector.

Layout