Scalar UI
Marketing UIApp UIAIChartsBackgrounds
Sign inGet started
Scalar UI
Scalar UI© 2026 Scalar Limited

React · Tailwind CSS · Motion

Browse

HomeAll components 213

Collections

Marketing UI 107App UI 94AI 16Charts 45Backgrounds 2Text 43

More

Text 43

Charts

All Charts 45
Bar chart 2
Stacked bar 2
Horizontal bar 2
Line chart 3
Area chart 3
Spark chart 1
Pie chart 2
Donut & semi-donut 2
Radial chart 1
Hexagon chart 3
Heatmap 2
Funnel chart 3
Category bar 2
Segmented progress 1
Scatter & bubble 2
Combo chart 2
Waterfall 2
Diverging bar 2
Candlestick 2
Treemap 2
Waffle chart 2
Sankey 2

Resources

Docs & installScalar Design

Charts

Data visualisation in gradient and outlined finishes, with sparkle where it suits — tooltips and entrance motion throughout.

45 results

45 results

Sparkle Line Chart preview

Sparkle Line Chart

Chart

Smooth lines that draw in from the left, with a crosshair tooltip across every series — an electrified dot grid with twinkling four-point sparks.

Sparkle Area Chart preview

Sparkle Area Chart

Chart

Filled trends that sweep in from the left, overlapping or stacked, with a crosshair tooltip — an electrified dot grid with twinkling four-point sparks.

Sparkle Hexagon Chart preview

Sparkle Hexagon Chart

Chart

A radar chart on a hexagonal grid; each series grows out of the centre — an electrified dot grid with twinkling four-point sparks.

Sparkle Heatmap preview

Sparkle Heatmap

Chart

A grid shaded by value that cascades in diagonally, with a row-and-column crosshair on hover — an electrified dot grid with twinkling four-point sparks.

Sparkle Funnel Chart preview

Sparkle Funnel Chart

Chart

One band that narrows stage by stage, with counts, shares and step-conversion pills — an electrified dot grid with twinkling four-point sparks.

Gradient Bar Chart preview

Gradient Bar Chart

Chart

Columns that spring up on a dashed grid, with a pointer-following tooltip — soft gradient fills that fade into the floor.

Outlined Bar Chart preview

Outlined Bar Chart

Chart

Columns that spring up on a dashed grid, with a pointer-following tooltip — hairline outlines over a faint tint.

Gradient Stacked Bar Chart preview

Gradient Stacked Bar Chart

Chart

Columns of stacked segments that rise together, with every series and the total in the tooltip — soft gradient fills that fade into the floor.

Outlined Stacked Bar Chart preview

Outlined Stacked Bar Chart

Chart

Columns of stacked segments that rise together, with every series and the total in the tooltip — hairline outlines over a faint tint.

Gradient Horizontal Bar Chart preview

Gradient Horizontal Bar Chart

Chart

A ranked list of bars that slide out one after another, label inside and value at the end — soft gradient fills that fade into the floor.

Outlined Horizontal Bar Chart preview

Outlined Horizontal Bar Chart

Chart

A ranked list of bars that slide out one after another, label inside and value at the end — hairline outlines over a faint tint.

Gradient Line Chart preview

Gradient Line Chart

Chart

Smooth lines that draw in from the left, with a crosshair tooltip across every series — soft gradient fills that fade into the floor.

Outlined Line Chart preview

Outlined Line Chart

Chart

Smooth lines that draw in from the left, with a crosshair tooltip across every series — hairline outlines over a faint tint.

Gradient Area Chart preview

Gradient Area Chart

Chart

Filled trends that sweep in from the left, overlapping or stacked, with a crosshair tooltip — soft gradient fills that fade into the floor.

Outlined Area Chart preview

Outlined Area Chart

Chart

Filled trends that sweep in from the left, overlapping or stacked, with a crosshair tooltip — hairline outlines over a faint tint.

Gradient Spark Chart preview

Gradient Spark Chart

Chart

Word-sized line, area or bar trends for stat cards and table rows — soft gradient fills that fade into the floor.

Gradient Pie Chart preview

Gradient Pie Chart

Chart

Wedges with thin gaps that sweep in clockwise; hovering pops a wedge outward — soft gradient fills that fade into the floor.

Outlined Pie Chart preview

Outlined Pie Chart

Chart

Wedges with thin gaps that sweep in clockwise; hovering pops a wedge outward — hairline outlines over a faint tint.

Gradient Donut Chart preview

Gradient Donut Chart

Chart

A ring or semi-circle gauge of rounded segments that sweep in one after another, with the hovered value in the middle — soft gradient fills that fade into the floor.

Outlined Donut Chart preview

Outlined Donut Chart

Chart

A ring or semi-circle gauge of rounded segments that sweep in one after another, with the hovered value in the middle — hairline outlines over a faint tint.

Gradient Radial Chart preview

Gradient Radial Chart

Chart

Concentric progress rings that fill clockwise one after another, with a centre readout and legend — soft gradient fills that fade into the floor.

Gradient Hexagon Chart preview

Gradient Hexagon Chart

Chart

A radar chart on a hexagonal grid; each series grows out of the centre — soft gradient fills that fade into the floor.

Outlined Hexagon Chart preview

Outlined Hexagon Chart

Chart

A radar chart on a hexagonal grid; each series grows out of the centre — hairline outlines over a faint tint.

Gradient Heatmap preview

Gradient Heatmap

Chart

A grid shaded by value that cascades in diagonally, with a row-and-column crosshair on hover — soft gradient fills that fade into the floor.

Gradient Funnel Chart preview

Gradient Funnel Chart

Chart

One band that narrows stage by stage, with counts, shares and step-conversion pills — soft gradient fills that fade into the floor.

Outlined Funnel Chart preview

Outlined Funnel Chart

Chart

One band that narrows stage by stage, with counts, shares and step-conversion pills — hairline outlines over a faint tint.

Gradient Category Bar preview

Gradient Category Bar

Chart

One bar divided into coloured ranges, with a marker that slides to the current value — soft gradient fills that fade into the floor.

Outlined Category Bar preview

Outlined Category Bar

Chart

One bar divided into coloured ranges, with a marker that slides to the current value — hairline outlines over a faint tint.

Gradient Segmented Progress preview

Gradient Segmented Progress

Chart

A row of status blocks — uptime, streaks, steps — that pop up left to right with tooltips — soft gradient fills that fade into the floor.

Gradient Scatter Chart preview

Gradient Scatter Chart

Chart

Points or bubbles that pop in left to right on a dashed grid; hovering finds the nearest point and drops guides to both axes — soft gradient fills that fade into the floor.

Outlined Scatter Chart preview

Outlined Scatter Chart

Chart

Points or bubbles that pop in left to right on a dashed grid; hovering finds the nearest point and drops guides to both axes — hairline outlines over a faint tint.

Gradient Combo Chart preview

Gradient Combo Chart

Chart

Columns and a smooth line on their own axes; columns spring up, then the line draws across them, and hovering lists both — soft gradient fills that fade into the floor.

Outlined Combo Chart preview

Outlined Combo Chart

Chart

Columns and a smooth line on their own axes; columns spring up, then the line draws across them, and hovering lists both — hairline outlines over a faint tint.

Gradient Waterfall Chart preview

Gradient Waterfall Chart

Chart

Changes that float from the running total, joined by dashed connectors, with totals on the floor; columns grow in one after another — soft gradient fills that fade into the floor.

Outlined Waterfall Chart preview

Outlined Waterfall Chart

Chart

Changes that float from the running total, joined by dashed connectors, with totals on the floor; columns grow in one after another — hairline outlines over a faint tint.

Gradient Diverging Bar Chart preview

Gradient Diverging Bar Chart

Chart

Columns that grow up or down from a zero line in their own colours, with signed values at their ends — soft gradient fills that fade into the floor.

Outlined Diverging Bar Chart preview

Outlined Diverging Bar Chart

Chart

Columns that grow up or down from a zero line in their own colours, with signed values at their ends — hairline outlines over a faint tint.

Gradient Candlestick Chart preview

Gradient Candlestick Chart

Chart

Open, high, low and close per period with volume underneath; candles open from their midpoint, and hovering draws a crosshair and tags the close — soft gradient fills that fade into the floor.

Outlined Candlestick Chart preview

Outlined Candlestick Chart

Chart

Open, high, low and close per period with volume underneath; candles open from their midpoint, and hovering draws a crosshair and tags the close — hairline outlines over a faint tint.

Gradient Treemap preview

Gradient Treemap

Chart

Tiles sized by value and laid out squarified, settling in largest first with labels where they fit; hovering shows the value and share — soft gradient fills that fade into the floor.

Outlined Treemap preview

Outlined Treemap

Chart

Tiles sized by value and laid out squarified, settling in largest first with labels where they fit; hovering shows the value and share — hairline outlines over a faint tint.

Gradient Waffle Chart preview

Gradient Waffle Chart

Chart

Shares of a whole as a grid of squares, one per percent, filling column by column with a legend beside; hovering lifts one category — soft gradient fills that fade into the floor.

Outlined Waffle Chart preview

Outlined Waffle Chart

Chart

Shares of a whole as a grid of squares, one per percent, filling column by column with a legend beside; hovering lifts one category — hairline outlines over a faint tint.

Gradient Sankey Chart preview

Gradient Sankey Chart

Chart

Nodes stacked in columns by what flows through them, with ribbons revealed left to right; hovering a ribbon or node picks out its flows — soft gradient fills that fade into the floor.

Outlined Sankey Chart preview

Outlined Sankey Chart

Chart

Nodes stacked in columns by what flows through them, with ribbons revealed left to right; hovering a ribbon or node picks out its flows — hairline outlines over a faint tint.

AllMarketing UIApp UIAIChartsBackgroundsText
Bar chartStacked barHorizontal barLine chartArea chartSpark chartPie chartDonut & semi-donutRadial chartHexagon chartHeatmapFunnel chartCategory barSegmented progressScatter & bubbleCombo chartWaterfallDiverging barCandlestickTreemapWaffle chartSankey