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,160
  • Safari1,158
  • Firefox1,085
  • Edge966

Total 4,369

Pie chart

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

9 variants
Views10,240100%−51%Visits4,98749%−12%Visitors4,36843%−85%Events6727%

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
  • US748
  • GB746
  • DE700
  • ES623
  • BR583
  • FR523
  • IN445

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,160
  • Safari1,158
  • Firefox1,085
  • Edge966

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
  • Views10,240

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,368
pageviews10,240
visits4,987
events672
2026-08-062026-09-04

4 series over 30 points, from 2026-08-06 to 2026-09-04.

Horizon chart

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

2 variants
US: 748 (17%)GB: 746 (17%)DE: 700 (16%)ES: 623 (14%)BR: 583 (13%)FR: 523 (12%)IN: 445 (10%)

Treemap

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

2 variants
08-30-7208-31+11809-01-9309-02+7409-03-10209-04+141Total66

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+10
  • GB+18
  • DE+22
  • ES+21
  • BR+101
  • FR+38

Slope chart

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

2 variants
  • Chrome#1
  • Safari#2
  • Firefox#3 (+1)
  • Edge#4 (-1)

Ranks from 7d to 90d.

Bump chart

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

2 variants
ChromeSafariFirefoxEdge
  • visitors4,369
  • pageviews10,241

Marimekko

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

4 variants
v0.3.02026-08-14Deploy2026-08-24

Timeline

A dated rail of deploys, releases and incidents.

4 variants
visitors365
pageviews840
visits416
events55
2026-08-06 00:002026-09-04 23:24

Strip chart

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

4 variants
Thu 00:00 — 21Thu 01:00 — 15Thu 02:00 — 10Thu 03:00 — 8Thu 04:00 — 8Thu 05:00 — 12Thu 06:00 — 31Thu 07:00 — 62Thu 08:00 — 94Thu 09:00 — 104Thu 10:00 — 99Thu 11:00 — 94Thu 12:00 — 88Thu 13:00 — 94Thu 14:00 — 99Thu 15:00 — 104Thu 16:00 — 96Thu 17:00 — 83Thu 18:00 — 73Thu 19:00 — 64Thu 20:00 — 57Thu 21:00 — 47Thu 22:00 — 36Thu 23:00 — 27Fri 00:00 — 31Fri 01:00 — 22Fri 02:00 — 16Fri 03:00 — 13Fri 04:00 — 13Fri 05:00 — 19Fri 06:00 — 47Fri 07:00 — 94Fri 08:00 — 141Fri 09:00 — 157Fri 10:00 — 149Fri 11:00 — 141Fri 12:00 — 133Fri 13:00 — 141Fri 14:00 — 149Fri 15:00 — 157Fri 16:00 — 144Fri 17:00 — 126Fri 18:00 — 110Fri 19:00 — 97Fri 20:00 — 86Fri 21:00 — 71Fri 22:00 — 55Fri 23:00 — 41Sat 00:00 — 13Sat 01:00 — 9Sat 02:00 — 6Sat 03:00 — 5Sat 04:00 — 5Sat 05:00 — 8Sat 06:00 — 19Sat 07:00 — 38Sat 08:00 — 57Sat 09:00 — 63Sat 10:00 — 60Sat 11:00 — 57Sat 12:00 — 54Sat 13:00 — 57Sat 14:00 — 60Sat 15:00 — 63Sat 16:00 — 58Sat 17:00 — 50Sat 18:00 — 44Sat 19:00 — 39Sat 20:00 — 35Sat 21:00 — 28Sat 22:00 — 22Sat 23:00 — 16Sun 00:00 — 27Sun 01:00 — 19Sun 02:00 — 14Sun 03:00 — 11Sun 04:00 — 11Sun 05:00 — 16Sun 06:00 — 41Sun 07:00 — 81Sun 08:00 — 122Sun 09:00 — 135Sun 10:00 — 128Sun 11:00 — 122Sun 12:00 — 115Sun 13:00 — 122Sun 14:00 — 128Sun 15:00 — 135Sun 16:00 — 124Sun 17:00 — 108Sun 18:00 — 95Sun 19:00 — 84Sun 20:00 — 74Sun 21:00 — 61Sun 22:00 — 47Sun 23:00 — 35Mon 00:00 — 30Mon 01:00 — 21Mon 02:00 — 15Mon 03:00 — 12Mon 04:00 — 12Mon 05:00 — 18Mon 06:00 — 45Mon 07:00 — 89Mon 08:00 — 134Mon 09:00 — 149Mon 10:00 — 142Mon 11:00 — 134Mon 12:00 — 127Mon 13:00 — 134Mon 14:00 — 142Mon 15:00 — 149Mon 16:00 — 137Mon 17:00 — 119Mon 18:00 — 104Mon 19:00 — 92Mon 20:00 — 82Mon 21:00 — 67Mon 22:00 — 52Mon 23:00 — 39Tue 00:00 — 21Tue 01:00 — 14Tue 02:00 — 10Tue 03:00 — 8Tue 04:00 — 8Tue 05:00 — 12Tue 06:00 — 31Tue 07:00 — 62Tue 08:00 — 93Tue 09:00 — 103Tue 10:00 — 98Tue 11:00 — 93Tue 12:00 — 88Tue 13:00 — 93Tue 14:00 — 98Tue 15:00 — 103Tue 16:00 — 95Tue 17:00 — 82Tue 18:00 — 72Tue 19:00 — 64Tue 20:00 — 57Tue 21:00 — 46Tue 22:00 — 36Tue 23:00 — 27Wed 00:00 — 36Wed 01:00 — 25Wed 02:00 — 18Wed 03:00 — 15Wed 04:00 — 15Wed 05:00 — 22Wed 06:00 — 55Wed 07:00 — 109Wed 08:00 — 164Wed 09:00 — 182Wed 10:00 — 173Wed 11:00 — 164Wed 12:00 — 155Wed 13:00 — 164Wed 14:00 — 173Wed 15:00 — 182Wed 16:00 — 167Wed 17:00 — 146Wed 18:00 — 127Wed 19:00 — 113Wed 20:00 — 100Wed 21:00 — 82Wed 22:00 — 64Wed 23:00 — 4700061218

Busiest: Wed 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,092100%78%56%34%12%
Week 2874100%76%52%28%
Week 3728100%74%48%
Week 4624100%72%
Week 5546100%

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 cycle672 of 907
74% usedResets in 12 days

Quota bar

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

4 variants

Visitors

4,368
+10.0%

Metric card

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

6 variants

42%

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,368+133
pageviews10,240+345
visits4,987+135
events672+14

Spark table

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

4 variants
VisitorsTotal
  • US19%7481,753
  • GB19%7461,750
  • DE18%7001,640
  • ES16%6231,460
  • BR15%5831,367
  • FR13%5231,226

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,160
  • Safari1,158
  • Firefox1,085
  • Edge966

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,368
+10.0%

Pageviews

10.2k
+9.6%

Visits

4,987
+7.9%

Events

672
+22%

Visitors over time

Top pages

  • /1,753
  • /pricing1,750
  • /blog1,640
  • /blog/launch1,460
  • /docs1,367
  • /docs/quickstart1,226
  • /about1,043

Top referrers

  • google833
  • twitter831
  • github779
  • direct693
  • linkedin649
  • newsletter582

Devices

  • Desktop1,489
  • Mobile1,486
  • Tablet1,393

Total 4,368

Browsers

Operating systems

  • macOS961
  • Windows959
  • iOS899
  • Android800
  • Linux749

Countries

  • US748
  • GB746
  • DE700
  • ES623
  • BR583
  • FR523
  • IN445

Sources

  • google833
  • twitter831
  • github779
  • direct693
  • linkedin649
  • newsletter582

Daily visitors

Intensity of traffic across the range.

Dashboard

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

Layout