AreaChart Pro

Part of Pro. Versions up to 0.10 of the open source package include it under MIT; later releases keep it in Pro.

Line chart with a gradient fill built from the series color; same data, axes, gaps, tooltip and keyboard behavior as LineChart.

Jump to API reference

Import

Vue
import { UiAreaChart } from '@ziyarago/ui-pro/vue'

Revenue, 90 days (UZS)

Revenue. Area chart, 1 series: Revenue. Period Fri, Jul 24, 2026 to Wed, Oct 21, 2026. Minimum UZS 33,725,294, maximum UZS 95,091,158, last value UZS 89,727,558.
PeriodRevenue
Fri, Jul 24, 2026UZS 42,105,343
Sat, Jul 25, 2026UZS 45,060,170
Sun, Jul 26, 2026UZS 55,732,894
Mon, Jul 27, 2026UZS 55,543,216
Tue, Jul 28, 2026UZS 56,070,185
Wed, Jul 29, 2026UZS 72,912,171
Thu, Jul 30, 2026UZS 75,056,687
Fri, Jul 31, 2026UZS 58,291,556
Sat, Aug 1, 2026UZS 62,027,061
Sun, Aug 2, 2026UZS 64,153,329
Mon, Aug 3, 2026UZS 60,056,051
Tue, Aug 4, 2026UZS 58,903,820
Wed, Aug 5, 2026UZS 79,766,973
Thu, Aug 6, 2026UZS 76,592,868
Fri, Aug 7, 2026UZS 56,417,438
Sat, Aug 8, 2026UZS 56,390,237
Sun, Aug 9, 2026UZS 53,921,043
Mon, Aug 10, 2026UZS 54,120,262
Tue, Aug 11, 2026UZS 49,882,652
Wed, Aug 12, 2026UZS 69,870,516
Thu, Aug 13, 2026UZS 61,159,851
Fri, Aug 14, 2026UZS 48,769,051
Sat, Aug 15, 2026UZS 40,659,247
Sun, Aug 16, 2026UZS 38,502,615
Mon, Aug 17, 2026UZS 37,116,561
Tue, Aug 18, 2026UZS 37,152,024
Wed, Aug 19, 2026UZS 54,604,910
Thu, Aug 20, 2026UZS 56,031,442
Fri, Aug 21, 2026UZS 33,725,294
Sat, Aug 22, 2026UZS 41,538,734
Sun, Aug 23, 2026UZS 38,958,457
Mon, Aug 24, 2026UZS 40,594,528
Tue, Aug 25, 2026UZS 42,494,207
Wed, Aug 26, 2026UZS 62,756,343
Thu, Aug 27, 2026UZS 61,644,650
Fri, Aug 28, 2026UZS 50,503,192
Sat, Aug 29, 2026UZS 52,016,839
Sun, Aug 30, 2026UZS 47,392,234
Mon, Aug 31, 2026UZS 51,116,252
Tue, Sep 1, 2026UZS 55,244,509
Wed, Sep 2, 2026UZS 74,265,959
Thu, Sep 3, 2026UZS 72,880,973
Fri, Sep 4, 2026UZS 59,550,768
Sat, Sep 5, 2026UZS 67,473,476
Sun, Sep 6, 2026UZS 65,385,680
Mon, Sep 7, 2026UZS 67,072,441
Tue, Sep 8, 2026UZS 68,253,073
Wed, Sep 9, 2026UZS 88,973,006
Thu, Sep 10, 2026UZS 86,820,545
Fri, Sep 11, 2026UZS 70,335,832
Sat, Sep 12, 2026UZS 66,397,949
Sun, Sep 13, 2026UZS 65,565,830
Mon, Sep 14, 2026UZS 62,234,838
Tue, Sep 15, 2026UZS 60,545,491
Wed, Sep 16, 2026UZS 81,706,973
Thu, Sep 17, 2026UZS 74,375,411
Fri, Sep 18, 2026UZS 55,071,821
Sat, Sep 19, 2026UZS 56,897,763
Sun, Sep 20, 2026UZS 52,117,424
Mon, Sep 21, 2026UZS 47,450,706
Tue, Sep 22, 2026UZS 51,341,988
Wed, Sep 23, 2026UZS 67,812,806
Thu, Sep 24, 2026UZS 63,050,226
Fri, Sep 25, 2026UZS 48,463,457
Sat, Sep 26, 2026UZS 46,167,659
Sun, Sep 27, 2026UZS 48,162,753
Mon, Sep 28, 2026UZS 40,933,510
Tue, Sep 29, 2026UZS 45,033,771
Wed, Sep 30, 2026UZS 62,873,499
Thu, Oct 1, 2026UZS 66,183,254
Fri, Oct 2, 2026UZS 52,280,486
Sat, Oct 3, 2026UZS 52,953,799
Sun, Oct 4, 2026UZS 52,796,090
Mon, Oct 5, 2026UZS 58,366,798
Tue, Oct 6, 2026UZS 60,794,484
Wed, Oct 7, 2026UZS 75,508,608
Thu, Oct 8, 2026UZS 80,448,454
Fri, Oct 9, 2026UZS 59,604,541
Sat, Oct 10, 2026UZS 66,567,000
Sun, Oct 11, 2026UZS 67,080,922
Mon, Oct 12, 2026UZS 72,633,766
Tue, Oct 13, 2026UZS 72,778,438
Wed, Oct 14, 2026UZS 92,037,530
Thu, Oct 15, 2026UZS 95,091,158
Fri, Oct 16, 2026UZS 76,006,483
Sat, Oct 17, 2026UZS 78,702,344
Sun, Oct 18, 2026UZS 75,081,441
Mon, Oct 19, 2026UZS 76,529,693
Tue, Oct 20, 2026UZS 76,569,821
Wed, Oct 21, 2026UZS 89,727,558
Vue
<UiAreaChart
  :series="[{ key: 'rev', label: 'Revenue', tone: 'brand', values: [{ x: '2026-07-24', y: 42105343 }, { x: '2026-07-25', y: 45060170 }, { x: '2026-07-26', y: 55732894 }, { x: '2026-07-27', y: 55543216 }, { x: '2026-07-28', y: 56070185 }, { x: '2026-07-29', y: 72912171 }, { x: '2026-07-30', y: 75056687 }, { x: '2026-07-31', y: 58291556 }, { x: '2026-08-01', y: 62027061 }, { x: '2026-08-02', y: 64153329 }, { x: '2026-08-03', y: 60056051 }, { x: '2026-08-04', y: 58903820 }, { x: '2026-08-05', y: 79766973 }, { x: '2026-08-06', y: 76592868 }, { x: '2026-08-07', y: 56417438 }, { x: '2026-08-08', y: 56390237 }, { x: '2026-08-09', y: 53921043 }, { x: '2026-08-10', y: 54120262 }, { x: '2026-08-11', y: 49882652 }, { x: '2026-08-12', y: 69870516 }, { x: '2026-08-13', y: 61159851 }, { x: '2026-08-14', y: 48769051 }, { x: '2026-08-15', y: 40659247 }, { x: '2026-08-16', y: 38502615 }, { x: '2026-08-17', y: 37116561 }, { x: '2026-08-18', y: 37152024 }, { x: '2026-08-19', y: 54604910 }, { x: '2026-08-20', y: 56031442 }, { x: '2026-08-21', y: 33725294 }, { x: '2026-08-22', y: 41538734 }, { x: '2026-08-23', y: 38958457 }, { x: '2026-08-24', y: 40594528 }, { x: '2026-08-25', y: 42494207 }, { x: '2026-08-26', y: 62756343 }, { x: '2026-08-27', y: 61644650 }, { x: '2026-08-28', y: 50503192 }, { x: '2026-08-29', y: 52016839 }, { x: '2026-08-30', y: 47392234 }, { x: '2026-08-31', y: 51116252 }, { x: '2026-09-01', y: 55244509 }, { x: '2026-09-02', y: 74265959 }, { x: '2026-09-03', y: 72880973 }, { x: '2026-09-04', y: 59550768 }, { x: '2026-09-05', y: 67473476 }, { x: '2026-09-06', y: 65385680 }, { x: '2026-09-07', y: 67072441 }, { x: '2026-09-08', y: 68253073 }, { x: '2026-09-09', y: 88973006 }, { x: '2026-09-10', y: 86820545 }, { x: '2026-09-11', y: 70335832 }, { x: '2026-09-12', y: 66397949 }, { x: '2026-09-13', y: 65565830 }, { x: '2026-09-14', y: 62234838 }, { x: '2026-09-15', y: 60545491 }, { x: '2026-09-16', y: 81706973 }, { x: '2026-09-17', y: 74375411 }, { x: '2026-09-18', y: 55071821 }, { x: '2026-09-19', y: 56897763 }, { x: '2026-09-20', y: 52117424 }, { x: '2026-09-21', y: 47450706 }, { x: '2026-09-22', y: 51341988 }, { x: '2026-09-23', y: 67812806 }, { x: '2026-09-24', y: 63050226 }, { x: '2026-09-25', y: 48463457 }, { x: '2026-09-26', y: 46167659 }, { x: '2026-09-27', y: 48162753 }, { x: '2026-09-28', y: 40933510 }, { x: '2026-09-29', y: 45033771 }, { x: '2026-09-30', y: 62873499 }, { x: '2026-10-01', y: 66183254 }, { x: '2026-10-02', y: 52280486 }, { x: '2026-10-03', y: 52953799 }, { x: '2026-10-04', y: 52796090 }, { x: '2026-10-05', y: 58366798 }, { x: '2026-10-06', y: 60794484 }, { x: '2026-10-07', y: 75508608 }, { x: '2026-10-08', y: 80448454 }, { x: '2026-10-09', y: 59604541 }, { x: '2026-10-10', y: 66567000 }, { x: '2026-10-11', y: 67080922 }, { x: '2026-10-12', y: 72633766 }, { x: '2026-10-13', y: 72778438 }, { x: '2026-10-14', y: 92037530 }, { x: '2026-10-15', y: 95091158 }, { x: '2026-10-16', y: 76006483 }, { x: '2026-10-17', y: 78702344 }, { x: '2026-10-18', y: 75081441 }, { x: '2026-10-19', y: 76529693 }, { x: '2026-10-20', y: 76569821 }, { x: '2026-10-21', y: 89727558 }] }]"
  unit="currency"
  currency="UZS"
  label="Revenue"
  size="lg"
 />

Two series

Area chart, 2 series: This week, Previous week. Period Mon, Oct 12, 2026 to Sun, Oct 18, 2026. Minimum 36 (Previous week), maximum 88 (This week), last value 79 (This week).
PeriodThis weekPrevious week
Mon, Oct 12, 20264136
Tue, Oct 13, 20265247
Wed, Oct 14, 20264851
Thu, Oct 15, 20266355
Fri, Oct 16, 20267160
Sat, Oct 17, 20268874
Sun, Oct 18, 20267982
Vue
<UiAreaChart
  :series="[{ key: 'this', label: 'This week', tone: 'brand', values: [{ x: '2026-10-12', y: 41 }, { x: '2026-10-13', y: 52 }, { x: '2026-10-14', y: 48 }, { x: '2026-10-15', y: 63 }, { x: '2026-10-16', y: 71 }, { x: '2026-10-17', y: 88 }, { x: '2026-10-18', y: 79 }] }, { key: 'prev', label: 'Previous week', tone: 'neutral', dashed: true, values: [{ x: '2026-10-12', y: 36 }, { x: '2026-10-13', y: 47 }, { x: '2026-10-14', y: 51 }, { x: '2026-10-15', y: 55 }, { x: '2026-10-16', y: 60 }, { x: '2026-10-17', y: 74 }, { x: '2026-10-18', y: 82 }] }]"
 />

Gaps (null)

Area chart, 2 series: Branch A, Branch B. Period Tue, Sep 1, 2026 to Thu, Sep 10, 2026. Minimum 22 (Branch B), maximum 70 (Branch A), last value 70 (Branch A).
PeriodBranch ABranch B
Tue, Sep 1, 20263422
Wed, Sep 2, 202641No data
Thu, Sep 3, 2026No data30
Fri, Sep 4, 2026No data35
Sat, Sep 5, 20265231
Sun, Sep 6, 202658No data
Mon, Sep 7, 20264744
Tue, Sep 8, 2026No data41
Wed, Sep 9, 20266339
Thu, Sep 10, 20267048
Vue
<UiAreaChart
  :series="[{ key: 'a', label: 'Branch A', tone: 'brand', values: [{ x: '2026-09-01', y: 34 }, { x: '2026-09-02', y: 41 }, { x: '2026-09-03', y: null }, { x: '2026-09-04', y: null }, { x: '2026-09-05', y: 52 }, { x: '2026-09-06', y: 58 }, { x: '2026-09-07', y: 47 }, { x: '2026-09-08', y: null }, { x: '2026-09-09', y: 63 }, { x: '2026-09-10', y: 70 }] }, { key: 'b', label: 'Branch B', tone: 'info', values: [{ x: '2026-09-01', y: 22 }, { x: '2026-09-02', y: null }, { x: '2026-09-03', y: 30 }, { x: '2026-09-04', y: 35 }, { x: '2026-09-05', y: 31 }, { x: '2026-09-06', y: null }, { x: '2026-09-07', y: 44 }, { x: '2026-09-08', y: 41 }, { x: '2026-09-09', y: 39 }, { x: '2026-09-10', y: 48 }] }]"
 />

Negative values

Area chart, 1 series: Net cash flow. Period Mon, Jan 5, 2026 to Mon, Mar 23, 2026. Minimum -52, maximum 61, last value 55.
PeriodNet cash flow
Mon, Jan 5, 202638
Mon, Jan 12, 202612
Mon, Jan 19, 2026-24
Mon, Jan 26, 2026-52
Mon, Feb 2, 2026-18
Mon, Feb 9, 202627
Mon, Feb 16, 202644
Mon, Feb 23, 202661
Mon, Mar 2, 2026-9
Mon, Mar 9, 2026-31
Mon, Mar 16, 202616
Mon, Mar 23, 202655
Vue
<UiAreaChart
  :series="[{ key: 'net', label: 'Net cash flow', tone: 'success', values: [{ x: '2026-01-05', y: 38 }, { x: '2026-01-12', y: 12 }, { x: '2026-01-19', y: -24 }, { x: '2026-01-26', y: -52 }, { x: '2026-02-02', y: -18 }, { x: '2026-02-09', y: 27 }, { x: '2026-02-16', y: 44 }, { x: '2026-02-23', y: 61 }, { x: '2026-03-02', y: -9 }, { x: '2026-03-09', y: -31 }, { x: '2026-03-16', y: 16 }, { x: '2026-03-23', y: 55 }] }]"
 />

Empty

No data for this period

Vue
<UiAreaChart :series="[]" />

Loading

Vue
<UiAreaChart :series="[]" loading />

API reference

Line chart with a gradient fill under each line, made from the series color; same data, axes, tooltip and keyboard behavior as LineChart.

Props

PropType and valuesDefaultDescription
seriesrequired{ key: string; label: string; values: { x: string | number | Date; y: number | null }[]; tone?: 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'neutral'; dashed?: boolean }[]—Series to draw, see LineChart. The fill goes down to the zero line (or the bottom of the plot when the axis does not include 0); each run between gaps is filled separately.
unitcountcurrencypercent'count'Number format of the value axis, tooltip and legend. count: grouped digits, compact on the axis (1.2k, 1.2M, localized by Intl); currency: needs currency; percent: values are percent points (12 means 12%).
currencystring—ISO 4217 code for unit="currency", for example UZS, SAR or USD. The axis stays compact without the symbol; tooltip and legend show the full amount.
yFormat(n: number) => string—Custom formatter for every number (axis, tooltip). Overrides unit and currency.
localestring—BCP 47 tag for numbers and dates, for example "ar" or "uz-UZ". Defaults to the kit locale (en ru uz ar tr and the rest). An RTL language also mirrors the chart.
dirltrrtl—Text direction. Defaults to the direction of the page (RTL mirrors the axis, the plot and the tooltip).
labelstring—Accessible name, for example "Revenue". The generated summary (series, period, minimum, maximum, last value) follows it in the aria-label.
heightnumber—Chart height in px (without the legend). Overrides size. Horizontal bars grow with the number of categories when it is not set.
sizexssmmdlgxl'md'Preset height: xs 140, sm 180, md 240, lg 320, xl 400 px.
loadingbooleanfalseShows a skeleton in the shape of the chart.
emptyTextstring—Text of the empty state. Default is the translated "No data for this period".
emptyIconstring—Icon name shown above the empty text. None by default.
legendboolean'true when there is more than one series'Text legend of toggle buttons (aria-pressed). A button hides and shows its series; the scale is recomputed.
yMinnumber—Fixed lower end of the value axis.
yMaxnumber—Fixed upper end of the value axis.
showPointsboolean—Dots on every point. Default: on up to 40 points; isolated points always get a dot.

Events

Vue: @name. React: onName.

pointClickClick or Enter on a point. Called with { seriesKey, series, index, x, label, y }: the series under the pointer (or the keyboard series), the index in the shared x list, the original x value, its formatted label and y.
legendToggleA legend button was pressed. Called with { key, label, hidden } where hidden is the new state.

Notes

  • Pure inline SVG, no dependencies. Colors come from the --zg-chart-* tokens (light, dark, gold and tamam), so there is nothing to configure per theme.
  • Empty data (no points, only null values, or only zeros for bars and donut) shows the empty state instead of an axis of zeros. A null y is a gap in the line, never a zero. All values equal: the axis starts at 0 and leaves headroom.
  • Accessibility: the plot is one focusable role="img" with a generated aria-label, a visually hidden data table, and a live region that reads the point while you move. Keys: Left and Right (mirrored in RTL) move between points, Up and Down between series, Home and End jump, Escape hides the tooltip, Enter fires pointClick.
  • The chart fills the width of its container (ResizeObserver, client only) and renders at 640 px on the server.