ULTRAKIT · WIDGET #68

Pie, donut, gauge, rose and activity rings with gradient or glowing slices, a count-up center number, five legend styles and a smooth sweep animation. Great for dashboards, reports and pricing pages.

Section 01

5 options for color palette — all shown live below.

1
Vividpalette = vivid

Traffic Sources

Where our visitors come from this month.

2
Pastelpalette = pastel

Traffic Sources

Where our visitors come from this month.

3
Oceanpalette = ocean

Traffic Sources

Where our visitors come from this month.

4
Sunsetpalette = sunset

Traffic Sources

Where our visitors come from this month.

5
Monochromepalette = mono

Traffic Sources

Where our visitors come from this month.

Section 02

5 options for legend position — all shown live below.

1
Rightlegend_pos = right

Traffic Sources

Where our visitors come from this month.

2
Leftlegend_pos = left

Traffic Sources

Where our visitors come from this month.

3
Bottomlegend_pos = bottom

Traffic Sources

Where our visitors come from this month.

4
Toplegend_pos = top

Traffic Sources

Where our visitors come from this month.

5
Hiddenlegend_pos = hidden

Traffic Sources

Where our visitors come from this month.

Section 03

5 options for card style — all shown live below.

1
Nonecard = none

Traffic Sources

Where our visitors come from this month.

2
White Cardcard = card

Traffic Sources

Where our visitors come from this month.

3
Dark Cardcard = dark

Traffic Sources

Where our visitors come from this month.

4
Gradient Cardcard = gradient

Traffic Sources

Where our visitors come from this month.

5
Outlinedcard = outline

Traffic Sources

Where our visitors come from this month.

Section 04

6 options for chart type — all shown live below.

1
Piechart_type = pie

Traffic Sources

Where our visitors come from this month.

2
Donutchart_type = donut

Traffic Sources

Where our visitors come from this month.

3
Half Donut (gauge)chart_type = semi

Traffic Sources

Where our visitors come from this month.

4
Thin Ringchart_type = ring

Traffic Sources

Where our visitors come from this month.

5
Rose (polar area)chart_type = rose

Traffic Sources

Where our visitors come from this month.

6
Concentric Ringschart_type = rings

Traffic Sources

Where our visitors come from this month.

Section 05

4 options for labels on slices — all shown live below.

1
Nonelabel_mode = none

Traffic Sources

Where our visitors come from this month.

2
Percentagelabel_mode = percent

Traffic Sources

Where our visitors come from this month.

3
Valuelabel_mode = value

Traffic Sources

Where our visitors come from this month.

4
Namelabel_mode = label

Traffic Sources

Where our visitors come from this month.

Section 06

3 options for sort slices — all shown live below.

1
As enteredsort = none

Traffic Sources

Where our visitors come from this month.

2
Largest firstsort = desc

Traffic Sources

Where our visitors come from this month.

3
Smallest firstsort = asc

Traffic Sources

Where our visitors come from this month.

Section 07

Switch parts of the widget on or off.

1
Slice Pops Out on Hover — Offhover_pop = off

Traffic Sources

Where our visitors come from this month.

2
Tooltip — Offtooltip = off

Traffic Sources

Where our visitors come from this month.

3
Sweep Animation on Scroll — Offanimate = off

Traffic Sources

Where our visitors come from this month.

4
Hide On Desktop — Onhide_desktop = hidden-desktop

Traffic Sources

Where our visitors come from this month.

Section 08

New looks in context: a marketing report, a fitness app and a household budget.

Traffic by channel

Last 30 days (sample data)

Today's activity

Sample fitness goals

Monthly budget

Sample household · £

Section 09

The new frosted glass card sits on photos or gradients; slices glow in any palette.

Sales by region

Q3 (sample)

Plan sign-ups

This month (sample)