Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Stats blocks

Pro

Dual Series Area Chart Stats Block for Solid

Home-solar generation against use over one day: two overlapping areas in two weights, the surplus hours hatched, a legend and a band of three totals under the chart.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A dual-series area chart for Solid with Ark UI. A start-aligned header states the day's surplus ("Your roof made 11% more than the house used"), then one framed figure with + marks on its corners holds the chart: kilowatts the panels made against kilowatts the house used, hour by hour over one clear day. Generation is the solid line at full weight over a light fill; use is a lighter, dashed line over a fainter one; the hours where the panels out-made the house are hatched, and the hatching is clipped to the exact span between the two lines. A legend names all three marks. Under the chart a band of three totals (generated, used, sent to the grid) closes the figure, with the numbers rolling up once in view. The same hourly readings sit in a visually hidden table. Everything is computed from two lists of hourly readings. For energy, usage and capacity reports that compare two curves. On a phone the chart is 4:3 and the totals stack.

FAQ

How do I change the readings?

Edit MADE and USED at the top of the file: one reading in kilowatts for each of the 24 hours, midnight first. Every line, fill, hatched span, total and the chart's accessible name is computed from them. If your values exceed 6 kW, raise CEILING and the GRIDLINES.

How is the hatched span found?

The day is read eight times an hour and wherever generation is above use the top edge follows generation and the bottom edge follows use. A crossing inside a step is found exactly, because both lines are straight between two hours. The result is a CSS clip-path polygon in percent over a hatched layer, so the hatching keeps its angle and spacing at any width.

How are the two series told apart without colour?

By weight, width and dash: generation is a 2 px solid line at full strength over a 12% fill, use is a 1.5 px dashed line at 55% over a 6% fill, and the surplus is hatching. The legend repeats all three marks.

Is it accessible?

The chart is an image with a text name that states where generation starts, peaks and ends, the range of use and when generation is above use. The totals are a description list and the hourly table is there for screen readers. Axis labels are text, values sit in bdi elements, and the chart stays left to right in right-to-left pages.

What moves, and what happens with reduced motion?

The lines draw from the start to the end, the fills and the hatching fade in, and the totals roll up when they scroll into view. With reduced motion each of these is off and the finished chart is simply there.

How does it fit on a phone?

The chart becomes 4:3 instead of 16:6, the legend wraps under the title and the three totals stack one per row between hairlines. Nothing scrolls sideways at 320 pixels.

All 122 stats blocks