LineChart 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 for time series: several series (a dashed one for the previous period), a localized time axis with automatic label step, nice value ticks, gaps for null values, negative values, a tooltip on hover and tap, and keyboard navigation. Empty data shows the empty state.

Jump to API reference

Import

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

Two series, one dashed

Orders per day. Line 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
<UiLineChart
  :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 }] }]"
  label="Orders per day"
 />

90 days of revenue (UZS)

Revenue. Line 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
<UiLineChart
  :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"
 />

Empty series

No data for this period

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

Only null values

Nothing sold yet

Vue
<UiLineChart
  :series="[{ key: 'a', label: 'Orders', values: [{ x: '2026-10-12', y: null }, { x: '2026-10-13', y: null }] }]"
  empty-text="Nothing sold yet"
 />

Single point

Line chart, 1 series: Orders. Period Mon, Oct 12, 2026 to Mon, Oct 12, 2026. Minimum 42, maximum 42, last value 42.
PeriodOrders
Mon, Oct 12, 202642
Vue
<UiLineChart
  :series="[{ key: 'a', label: 'Orders', tone: 'brand', values: [{ x: '2026-10-12', y: 42 }] }]"
 />

All values equal

Line chart, 1 series: Orders. Period Mon, Oct 12, 2026 to Sun, Oct 18, 2026. Minimum 5, maximum 5, last value 5.
PeriodOrders
Mon, Oct 12, 20265
Tue, Oct 13, 20265
Wed, Oct 14, 20265
Thu, Oct 15, 20265
Fri, Oct 16, 20265
Sat, Oct 17, 20265
Sun, Oct 18, 20265
Vue
<UiLineChart
  :series="[{ key: 'a', label: 'Orders', values: [{ x: '2026-10-12', y: 5 }, { x: '2026-10-13', y: 5 }, { x: '2026-10-14', y: 5 }, { x: '2026-10-15', y: 5 }, { x: '2026-10-16', y: 5 }, { x: '2026-10-17', y: 5 }, { x: '2026-10-18', y: 5 }] }]"
 />

Negative values

Line 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, 2026$38
Mon, Jan 12, 2026$12
Mon, Jan 19, 2026-$24
Mon, Jan 26, 2026-$52
Mon, Feb 2, 2026-$18
Mon, Feb 9, 2026$27
Mon, Feb 16, 2026$44
Mon, Feb 23, 2026$61
Mon, Mar 2, 2026-$9
Mon, Mar 9, 2026-$31
Mon, Mar 16, 2026$16
Mon, Mar 23, 2026$55
Vue
<UiLineChart
  :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 }] }]"
  unit="currency"
  currency="USD"
 />

Gaps (null)

Line 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
<UiLineChart
  :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 }] }]"
 />

365 points

Line chart, 1 series: Visits. Period Thu, Jan 1, 2026 to Thu, Dec 31, 2026. Minimum 1,221, maximum 2,222, last value 2,010.
PeriodVisits
Thu, Jan 1, 20261,387
Fri, Jan 2, 20261,221
Sat, Jan 3, 20261,340
Sun, Jan 4, 20261,252
Mon, Jan 5, 20261,442
Tue, Jan 6, 20261,379
Wed, Jan 7, 20261,391
Thu, Jan 8, 20261,318
Fri, Jan 9, 20261,355
Sat, Jan 10, 20261,441
Sun, Jan 11, 20261,358
Mon, Jan 12, 20261,340
Tue, Jan 13, 20261,515
Wed, Jan 14, 20261,464
Thu, Jan 15, 20261,557
Fri, Jan 16, 20261,590
Sat, Jan 17, 20261,456
Sun, Jan 18, 20261,561
Mon, Jan 19, 20261,467
Tue, Jan 20, 20261,577
Wed, Jan 21, 20261,550
Thu, Jan 22, 20261,640
Fri, Jan 23, 20261,574
Sat, Jan 24, 20261,447
Sun, Jan 25, 20261,682
Mon, Jan 26, 20261,545
Tue, Jan 27, 20261,717
Wed, Jan 28, 20261,684
Thu, Jan 29, 20261,603
Fri, Jan 30, 20261,689
Sat, Jan 31, 20261,553
Sun, Feb 1, 20261,619
Mon, Feb 2, 20261,720
Tue, Feb 3, 20261,542
Wed, Feb 4, 20261,554
Thu, Feb 5, 20261,685
Fri, Feb 6, 20261,794
Sat, Feb 7, 20261,736
Sun, Feb 8, 20261,766
Mon, Feb 9, 20261,802
Tue, Feb 10, 20261,758
Wed, Feb 11, 20261,766
Thu, Feb 12, 20261,642
Fri, Feb 13, 20261,729
Sat, Feb 14, 20261,779
Sun, Feb 15, 20261,867
Mon, Feb 16, 20261,765
Tue, Feb 17, 20261,786
Wed, Feb 18, 20261,803
Thu, Feb 19, 20261,830
Fri, Feb 20, 20261,891
Sat, Feb 21, 20261,920
Sun, Feb 22, 20261,878
Mon, Feb 23, 20261,809
Tue, Feb 24, 20261,899
Wed, Feb 25, 20261,909
Thu, Feb 26, 20261,856
Fri, Feb 27, 20261,996
Sat, Feb 28, 20261,977
Sun, Mar 1, 20261,940
Mon, Mar 2, 20261,938
Tue, Mar 3, 20262,016
Wed, Mar 4, 20261,974
Thu, Mar 5, 20261,796
Fri, Mar 6, 20261,804
Sat, Mar 7, 20261,933
Sun, Mar 8, 20262,024
Mon, Mar 9, 20261,894
Tue, Mar 10, 20261,951
Wed, Mar 11, 20261,891
Thu, Mar 12, 20261,942
Fri, Mar 13, 20261,970
Sat, Mar 14, 20261,982
Sun, Mar 15, 20261,938
Mon, Mar 16, 20262,038
Tue, Mar 17, 20261,891
Wed, Mar 18, 20262,098
Thu, Mar 19, 20262,022
Fri, Mar 20, 20262,054
Sat, Mar 21, 20262,063
Sun, Mar 22, 20261,883
Mon, Mar 23, 20261,978
Tue, Mar 24, 20261,914
Wed, Mar 25, 20262,057
Thu, Mar 26, 20262,082
Fri, Mar 27, 20262,046
Sat, Mar 28, 20262,144
Sun, Mar 29, 20262,148
Mon, Mar 30, 20262,148
Tue, Mar 31, 20262,047
Wed, Apr 1, 20262,128
Thu, Apr 2, 20262,147
Fri, Apr 3, 20262,114
Sat, Apr 4, 20261,987
Sun, Apr 5, 20262,069
Mon, Apr 6, 20262,153
Tue, Apr 7, 20262,011
Wed, Apr 8, 20262,067
Thu, Apr 9, 20261,949
Fri, Apr 10, 20262,077
Sat, Apr 11, 20262,056
Sun, Apr 12, 20261,982
Mon, Apr 13, 20262,145
Tue, Apr 14, 20261,929
Wed, Apr 15, 20262,137
Thu, Apr 16, 20261,940
Fri, Apr 17, 20262,027
Sat, Apr 18, 20262,148
Sun, Apr 19, 20261,924
Mon, Apr 20, 20262,090
Tue, Apr 21, 20261,943
Wed, Apr 22, 20261,990
Thu, Apr 23, 20262,173
Fri, Apr 24, 20262,049
Sat, Apr 25, 20261,959
Sun, Apr 26, 20261,913
Mon, Apr 27, 20261,951
Tue, Apr 28, 20262,077
Wed, Apr 29, 20262,071
Thu, Apr 30, 20262,120
Fri, May 1, 20262,082
Sat, May 2, 20262,111
Sun, May 3, 20261,932
Mon, May 4, 20261,947
Tue, May 5, 20261,928
Wed, May 6, 20262,050
Thu, May 7, 20262,065
Fri, May 8, 20262,037
Sat, May 9, 20262,073
Sun, May 10, 20261,964
Mon, May 11, 20262,125
Tue, May 12, 20261,899
Wed, May 13, 20262,122
Thu, May 14, 20261,918
Fri, May 15, 20261,964
Sat, May 16, 20261,990
Sun, May 17, 20261,970
Mon, May 18, 20261,996
Tue, May 19, 20261,921
Wed, May 20, 20262,019
Thu, May 21, 20261,844
Fri, May 22, 20261,957
Sat, May 23, 20262,035
Sun, May 24, 20261,915
Mon, May 25, 20261,940
Tue, May 26, 20261,914
Wed, May 27, 20262,071
Thu, May 28, 20261,829
Fri, May 29, 20261,831
Sat, May 30, 20261,847
Sun, May 31, 20261,827
Mon, Jun 1, 20262,014
Tue, Jun 2, 20261,984
Wed, Jun 3, 20261,996
Thu, Jun 4, 20261,873
Fri, Jun 5, 20261,784
Sat, Jun 6, 20261,849
Sun, Jun 7, 20261,824
Mon, Jun 8, 20261,785
Tue, Jun 9, 20261,778
Wed, Jun 10, 20261,846
Thu, Jun 11, 20261,793
Fri, Jun 12, 20261,732
Sat, Jun 13, 20261,863
Sun, Jun 14, 20261,836
Mon, Jun 15, 20261,809
Tue, Jun 16, 20261,953
Wed, Jun 17, 20261,930
Thu, Jun 18, 20261,926
Fri, Jun 19, 20261,760
Sat, Jun 20, 20261,763
Sun, Jun 21, 20261,745
Mon, Jun 22, 20261,719
Tue, Jun 23, 20261,859
Wed, Jun 24, 20261,656
Thu, Jun 25, 20261,698
Fri, Jun 26, 20261,739
Sat, Jun 27, 20261,890
Sun, Jun 28, 20261,709
Mon, Jun 29, 20261,769
Tue, Jun 30, 20261,658
Wed, Jul 1, 20261,763
Thu, Jul 2, 20261,814
Fri, Jul 3, 20261,602
Sat, Jul 4, 20261,845
Sun, Jul 5, 20261,665
Mon, Jul 6, 20261,599
Tue, Jul 7, 20261,574
Wed, Jul 8, 20261,688
Thu, Jul 9, 20261,735
Fri, Jul 10, 20261,776
Sat, Jul 11, 20261,685
Sun, Jul 12, 20261,687
Mon, Jul 13, 20261,759
Tue, Jul 14, 20261,690
Wed, Jul 15, 20261,746
Thu, Jul 16, 20261,738
Fri, Jul 17, 20261,664
Sat, Jul 18, 20261,569
Sun, Jul 19, 20261,645
Mon, Jul 20, 20261,739
Tue, Jul 21, 20261,618
Wed, Jul 22, 20261,529
Thu, Jul 23, 20261,514
Fri, Jul 24, 20261,609
Sat, Jul 25, 20261,514
Sun, Jul 26, 20261,614
Mon, Jul 27, 20261,672
Tue, Jul 28, 20261,489
Wed, Jul 29, 20261,647
Thu, Jul 30, 20261,605
Fri, Jul 31, 20261,509
Sat, Aug 1, 20261,481
Sun, Aug 2, 20261,653
Mon, Aug 3, 20261,601
Tue, Aug 4, 20261,521
Wed, Aug 5, 20261,631
Thu, Aug 6, 20261,505
Fri, Aug 7, 20261,604
Sat, Aug 8, 20261,503
Sun, Aug 9, 20261,471
Mon, Aug 10, 20261,578
Tue, Aug 11, 20261,471
Wed, Aug 12, 20261,541
Thu, Aug 13, 20261,421
Fri, Aug 14, 20261,557
Sat, Aug 15, 20261,471
Sun, Aug 16, 20261,529
Mon, Aug 17, 20261,589
Tue, Aug 18, 20261,571
Wed, Aug 19, 20261,561
Thu, Aug 20, 20261,439
Fri, Aug 21, 20261,388
Sat, Aug 22, 20261,344
Sun, Aug 23, 20261,378
Mon, Aug 24, 20261,499
Tue, Aug 25, 20261,486
Wed, Aug 26, 20261,564
Thu, Aug 27, 20261,382
Fri, Aug 28, 20261,497
Sat, Aug 29, 20261,375
Sun, Aug 30, 20261,530
Mon, Aug 31, 20261,364
Tue, Sep 1, 20261,423
Wed, Sep 2, 20261,464
Thu, Sep 3, 20261,516
Fri, Sep 4, 20261,500
Sat, Sep 5, 20261,313
Sun, Sep 6, 20261,512
Mon, Sep 7, 20261,352
Tue, Sep 8, 20261,523
Wed, Sep 9, 20261,511
Thu, Sep 10, 20261,473
Fri, Sep 11, 20261,476
Sat, Sep 12, 20261,394
Sun, Sep 13, 20261,304
Mon, Sep 14, 20261,346
Tue, Sep 15, 20261,437
Wed, Sep 16, 20261,427
Thu, Sep 17, 20261,423
Fri, Sep 18, 20261,446
Sat, Sep 19, 20261,302
Sun, Sep 20, 20261,518
Mon, Sep 21, 20261,469
Tue, Sep 22, 20261,445
Wed, Sep 23, 20261,507
Thu, Sep 24, 20261,532
Fri, Sep 25, 20261,544
Sat, Sep 26, 20261,548
Sun, Sep 27, 20261,513
Mon, Sep 28, 20261,303
Tue, Sep 29, 20261,410
Wed, Sep 30, 20261,439
Thu, Oct 1, 20261,326
Fri, Oct 2, 20261,454
Sat, Oct 3, 20261,456
Sun, Oct 4, 20261,528
Mon, Oct 5, 20261,504
Tue, Oct 6, 20261,377
Wed, Oct 7, 20261,461
Thu, Oct 8, 20261,456
Fri, Oct 9, 20261,366
Sat, Oct 10, 20261,350
Sun, Oct 11, 20261,423
Mon, Oct 12, 20261,527
Tue, Oct 13, 20261,420
Wed, Oct 14, 20261,443
Thu, Oct 15, 20261,497
Fri, Oct 16, 20261,483
Sat, Oct 17, 20261,395
Sun, Oct 18, 20261,379
Mon, Oct 19, 20261,464
Tue, Oct 20, 20261,378
Wed, Oct 21, 20261,458
Thu, Oct 22, 20261,409
Fri, Oct 23, 20261,470
Sat, Oct 24, 20261,485
Sun, Oct 25, 20261,595
Mon, Oct 26, 20261,506
Tue, Oct 27, 20261,595
Wed, Oct 28, 20261,531
Thu, Oct 29, 20261,677
Fri, Oct 30, 20261,671
Sat, Oct 31, 20261,600
Sun, Nov 1, 20261,647
Mon, Nov 2, 20261,648
Tue, Nov 3, 20261,659
Wed, Nov 4, 20261,658
Thu, Nov 5, 20261,579
Fri, Nov 6, 20261,723
Sat, Nov 7, 20261,551
Sun, Nov 8, 20261,582
Mon, Nov 9, 20261,590
Tue, Nov 10, 20261,573
Wed, Nov 11, 20261,708
Thu, Nov 12, 20261,723
Fri, Nov 13, 20261,629
Sat, Nov 14, 20261,675
Sun, Nov 15, 20261,644
Mon, Nov 16, 20261,656
Tue, Nov 17, 20261,570
Wed, Nov 18, 20261,635
Thu, Nov 19, 20261,689
Fri, Nov 20, 20261,783
Sat, Nov 21, 20261,779
Sun, Nov 22, 20261,842
Mon, Nov 23, 20261,743
Tue, Nov 24, 20261,640
Wed, Nov 25, 20261,829
Thu, Nov 26, 20261,689
Fri, Nov 27, 20261,776
Sat, Nov 28, 20261,775
Sun, Nov 29, 20261,823
Mon, Nov 30, 20261,815
Tue, Dec 1, 20261,844
Wed, Dec 2, 20261,747
Thu, Dec 3, 20261,922
Fri, Dec 4, 20261,799
Sat, Dec 5, 20261,811
Sun, Dec 6, 20261,920
Mon, Dec 7, 20261,768
Tue, Dec 8, 20261,826
Wed, Dec 9, 20261,988
Thu, Dec 10, 20261,849
Fri, Dec 11, 20262,006
Sat, Dec 12, 20261,892
Sun, Dec 13, 20261,952
Mon, Dec 14, 20261,818
Tue, Dec 15, 20261,860
Wed, Dec 16, 20261,875
Thu, Dec 17, 20261,962
Fri, Dec 18, 20262,036
Sat, Dec 19, 20261,880
Sun, Dec 20, 20261,949
Mon, Dec 21, 20262,059
Tue, Dec 22, 20262,102
Wed, Dec 23, 20262,004
Thu, Dec 24, 20261,996
Fri, Dec 25, 20262,003
Sat, Dec 26, 20261,960
Sun, Dec 27, 20261,956
Mon, Dec 28, 20262,055
Tue, Dec 29, 20262,222
Wed, Dec 30, 20262,060
Thu, Dec 31, 20262,010
Vue
<UiLineChart
  :series="[{ key: 'visits', label: 'Visits', values: [{ x: '2026-01-01', y: 1387 }, { x: '2026-01-02', y: 1221 }, { x: '2026-01-03', y: 1340 }, { x: '2026-01-04', y: 1252 }, { x: '2026-01-05', y: 1442 }, { x: '2026-01-06', y: 1379 }, { x: '2026-01-07', y: 1391 }, { x: '2026-01-08', y: 1318 }, { x: '2026-01-09', y: 1355 }, { x: '2026-01-10', y: 1441 }, { x: '2026-01-11', y: 1358 }, { x: '2026-01-12', y: 1340 }, { x: '2026-01-13', y: 1515 }, { x: '2026-01-14', y: 1464 }, { x: '2026-01-15', y: 1557 }, { x: '2026-01-16', y: 1590 }, { x: '2026-01-17', y: 1456 }, { x: '2026-01-18', y: 1561 }, { x: '2026-01-19', y: 1467 }, { x: '2026-01-20', y: 1577 }, { x: '2026-01-21', y: 1550 }, { x: '2026-01-22', y: 1640 }, { x: '2026-01-23', y: 1574 }, { x: '2026-01-24', y: 1447 }, { x: '2026-01-25', y: 1682 }, { x: '2026-01-26', y: 1545 }, { x: '2026-01-27', y: 1717 }, { x: '2026-01-28', y: 1684 }, { x: '2026-01-29', y: 1603 }, { x: '2026-01-30', y: 1689 }, { x: '2026-01-31', y: 1553 }, { x: '2026-02-01', y: 1619 }, { x: '2026-02-02', y: 1720 }, { x: '2026-02-03', y: 1542 }, { x: '2026-02-04', y: 1554 }, { x: '2026-02-05', y: 1685 }, { x: '2026-02-06', y: 1794 }, { x: '2026-02-07', y: 1736 }, { x: '2026-02-08', y: 1766 }, { x: '2026-02-09', y: 1802 }, { x: '2026-02-10', y: 1758 }, { x: '2026-02-11', y: 1766 }, { x: '2026-02-12', y: 1642 }, { x: '2026-02-13', y: 1729 }, { x: '2026-02-14', y: 1779 }, { x: '2026-02-15', y: 1867 }, { x: '2026-02-16', y: 1765 }, { x: '2026-02-17', y: 1786 }, { x: '2026-02-18', y: 1803 }, { x: '2026-02-19', y: 1830 }, { x: '2026-02-20', y: 1891 }, { x: '2026-02-21', y: 1920 }, { x: '2026-02-22', y: 1878 }, { x: '2026-02-23', y: 1809 }, { x: '2026-02-24', y: 1899 }, { x: '2026-02-25', y: 1909 }, { x: '2026-02-26', y: 1856 }, { x: '2026-02-27', y: 1996 }, { x: '2026-02-28', y: 1977 }, { x: '2026-03-01', y: 1940 }, { x: '2026-03-02', y: 1938 }, { x: '2026-03-03', y: 2016 }, { x: '2026-03-04', y: 1974 }, { x: '2026-03-05', y: 1796 }, { x: '2026-03-06', y: 1804 }, { x: '2026-03-07', y: 1933 }, { x: '2026-03-08', y: 2024 }, { x: '2026-03-09', y: 1894 }, { x: '2026-03-10', y: 1951 }, { x: '2026-03-11', y: 1891 }, { x: '2026-03-12', y: 1942 }, { x: '2026-03-13', y: 1970 }, { x: '2026-03-14', y: 1982 }, { x: '2026-03-15', y: 1938 }, { x: '2026-03-16', y: 2038 }, { x: '2026-03-17', y: 1891 }, { x: '2026-03-18', y: 2098 }, { x: '2026-03-19', y: 2022 }, { x: '2026-03-20', y: 2054 }, { x: '2026-03-21', y: 2063 }, { x: '2026-03-22', y: 1883 }, { x: '2026-03-23', y: 1978 }, { x: '2026-03-24', y: 1914 }, { x: '2026-03-25', y: 2057 }, { x: '2026-03-26', y: 2082 }, { x: '2026-03-27', y: 2046 }, { x: '2026-03-28', y: 2144 }, { x: '2026-03-29', y: 2148 }, { x: '2026-03-30', y: 2148 }, { x: '2026-03-31', y: 2047 }, { x: '2026-04-01', y: 2128 }, { x: '2026-04-02', y: 2147 }, { x: '2026-04-03', y: 2114 }, { x: '2026-04-04', y: 1987 }, { x: '2026-04-05', y: 2069 }, { x: '2026-04-06', y: 2153 }, { x: '2026-04-07', y: 2011 }, { x: '2026-04-08', y: 2067 }, { x: '2026-04-09', y: 1949 }, { x: '2026-04-10', y: 2077 }, { x: '2026-04-11', y: 2056 }, { x: '2026-04-12', y: 1982 }, { x: '2026-04-13', y: 2145 }, { x: '2026-04-14', y: 1929 }, { x: '2026-04-15', y: 2137 }, { x: '2026-04-16', y: 1940 }, { x: '2026-04-17', y: 2027 }, { x: '2026-04-18', y: 2148 }, { x: '2026-04-19', y: 1924 }, { x: '2026-04-20', y: 2090 }, { x: '2026-04-21', y: 1943 }, { x: '2026-04-22', y: 1990 }, { x: '2026-04-23', y: 2173 }, { x: '2026-04-24', y: 2049 }, { x: '2026-04-25', y: 1959 }, { x: '2026-04-26', y: 1913 }, { x: '2026-04-27', y: 1951 }, { x: '2026-04-28', y: 2077 }, { x: '2026-04-29', y: 2071 }, { x: '2026-04-30', y: 2120 }, { x: '2026-05-01', y: 2082 }, { x: '2026-05-02', y: 2111 }, { x: '2026-05-03', y: 1932 }, { x: '2026-05-04', y: 1947 }, { x: '2026-05-05', y: 1928 }, { x: '2026-05-06', y: 2050 }, { x: '2026-05-07', y: 2065 }, { x: '2026-05-08', y: 2037 }, { x: '2026-05-09', y: 2073 }, { x: '2026-05-10', y: 1964 }, { x: '2026-05-11', y: 2125 }, { x: '2026-05-12', y: 1899 }, { x: '2026-05-13', y: 2122 }, { x: '2026-05-14', y: 1918 }, { x: '2026-05-15', y: 1964 }, { x: '2026-05-16', y: 1990 }, { x: '2026-05-17', y: 1970 }, { x: '2026-05-18', y: 1996 }, { x: '2026-05-19', y: 1921 }, { x: '2026-05-20', y: 2019 }, { x: '2026-05-21', y: 1844 }, { x: '2026-05-22', y: 1957 }, { x: '2026-05-23', y: 2035 }, { x: '2026-05-24', y: 1915 }, { x: '2026-05-25', y: 1940 }, { x: '2026-05-26', y: 1914 }, { x: '2026-05-27', y: 2071 }, { x: '2026-05-28', y: 1829 }, { x: '2026-05-29', y: 1831 }, { x: '2026-05-30', y: 1847 }, { x: '2026-05-31', y: 1827 }, { x: '2026-06-01', y: 2014 }, { x: '2026-06-02', y: 1984 }, { x: '2026-06-03', y: 1996 }, { x: '2026-06-04', y: 1873 }, { x: '2026-06-05', y: 1784 }, { x: '2026-06-06', y: 1849 }, { x: '2026-06-07', y: 1824 }, { x: '2026-06-08', y: 1785 }, { x: '2026-06-09', y: 1778 }, { x: '2026-06-10', y: 1846 }, { x: '2026-06-11', y: 1793 }, { x: '2026-06-12', y: 1732 }, { x: '2026-06-13', y: 1863 }, { x: '2026-06-14', y: 1836 }, { x: '2026-06-15', y: 1809 }, { x: '2026-06-16', y: 1953 }, { x: '2026-06-17', y: 1930 }, { x: '2026-06-18', y: 1926 }, { x: '2026-06-19', y: 1760 }, { x: '2026-06-20', y: 1763 }, { x: '2026-06-21', y: 1745 }, { x: '2026-06-22', y: 1719 }, { x: '2026-06-23', y: 1859 }, { x: '2026-06-24', y: 1656 }, { x: '2026-06-25', y: 1698 }, { x: '2026-06-26', y: 1739 }, { x: '2026-06-27', y: 1890 }, { x: '2026-06-28', y: 1709 }, { x: '2026-06-29', y: 1769 }, { x: '2026-06-30', y: 1658 }, { x: '2026-07-01', y: 1763 }, { x: '2026-07-02', y: 1814 }, { x: '2026-07-03', y: 1602 }, { x: '2026-07-04', y: 1845 }, { x: '2026-07-05', y: 1665 }, { x: '2026-07-06', y: 1599 }, { x: '2026-07-07', y: 1574 }, { x: '2026-07-08', y: 1688 }, { x: '2026-07-09', y: 1735 }, { x: '2026-07-10', y: 1776 }, { x: '2026-07-11', y: 1685 }, { x: '2026-07-12', y: 1687 }, { x: '2026-07-13', y: 1759 }, { x: '2026-07-14', y: 1690 }, { x: '2026-07-15', y: 1746 }, { x: '2026-07-16', y: 1738 }, { x: '2026-07-17', y: 1664 }, { x: '2026-07-18', y: 1569 }, { x: '2026-07-19', y: 1645 }, { x: '2026-07-20', y: 1739 }, { x: '2026-07-21', y: 1618 }, { x: '2026-07-22', y: 1529 }, { x: '2026-07-23', y: 1514 }, { x: '2026-07-24', y: 1609 }, { x: '2026-07-25', y: 1514 }, { x: '2026-07-26', y: 1614 }, { x: '2026-07-27', y: 1672 }, { x: '2026-07-28', y: 1489 }, { x: '2026-07-29', y: 1647 }, { x: '2026-07-30', y: 1605 }, { x: '2026-07-31', y: 1509 }, { x: '2026-08-01', y: 1481 }, { x: '2026-08-02', y: 1653 }, { x: '2026-08-03', y: 1601 }, { x: '2026-08-04', y: 1521 }, { x: '2026-08-05', y: 1631 }, { x: '2026-08-06', y: 1505 }, { x: '2026-08-07', y: 1604 }, { x: '2026-08-08', y: 1503 }, { x: '2026-08-09', y: 1471 }, { x: '2026-08-10', y: 1578 }, { x: '2026-08-11', y: 1471 }, { x: '2026-08-12', y: 1541 }, { x: '2026-08-13', y: 1421 }, { x: '2026-08-14', y: 1557 }, { x: '2026-08-15', y: 1471 }, { x: '2026-08-16', y: 1529 }, { x: '2026-08-17', y: 1589 }, { x: '2026-08-18', y: 1571 }, { x: '2026-08-19', y: 1561 }, { x: '2026-08-20', y: 1439 }, { x: '2026-08-21', y: 1388 }, { x: '2026-08-22', y: 1344 }, { x: '2026-08-23', y: 1378 }, { x: '2026-08-24', y: 1499 }, { x: '2026-08-25', y: 1486 }, { x: '2026-08-26', y: 1564 }, { x: '2026-08-27', y: 1382 }, { x: '2026-08-28', y: 1497 }, { x: '2026-08-29', y: 1375 }, { x: '2026-08-30', y: 1530 }, { x: '2026-08-31', y: 1364 }, { x: '2026-09-01', y: 1423 }, { x: '2026-09-02', y: 1464 }, { x: '2026-09-03', y: 1516 }, { x: '2026-09-04', y: 1500 }, { x: '2026-09-05', y: 1313 }, { x: '2026-09-06', y: 1512 }, { x: '2026-09-07', y: 1352 }, { x: '2026-09-08', y: 1523 }, { x: '2026-09-09', y: 1511 }, { x: '2026-09-10', y: 1473 }, { x: '2026-09-11', y: 1476 }, { x: '2026-09-12', y: 1394 }, { x: '2026-09-13', y: 1304 }, { x: '2026-09-14', y: 1346 }, { x: '2026-09-15', y: 1437 }, { x: '2026-09-16', y: 1427 }, { x: '2026-09-17', y: 1423 }, { x: '2026-09-18', y: 1446 }, { x: '2026-09-19', y: 1302 }, { x: '2026-09-20', y: 1518 }, { x: '2026-09-21', y: 1469 }, { x: '2026-09-22', y: 1445 }, { x: '2026-09-23', y: 1507 }, { x: '2026-09-24', y: 1532 }, { x: '2026-09-25', y: 1544 }, { x: '2026-09-26', y: 1548 }, { x: '2026-09-27', y: 1513 }, { x: '2026-09-28', y: 1303 }, { x: '2026-09-29', y: 1410 }, { x: '2026-09-30', y: 1439 }, { x: '2026-10-01', y: 1326 }, { x: '2026-10-02', y: 1454 }, { x: '2026-10-03', y: 1456 }, { x: '2026-10-04', y: 1528 }, { x: '2026-10-05', y: 1504 }, { x: '2026-10-06', y: 1377 }, { x: '2026-10-07', y: 1461 }, { x: '2026-10-08', y: 1456 }, { x: '2026-10-09', y: 1366 }, { x: '2026-10-10', y: 1350 }, { x: '2026-10-11', y: 1423 }, { x: '2026-10-12', y: 1527 }, { x: '2026-10-13', y: 1420 }, { x: '2026-10-14', y: 1443 }, { x: '2026-10-15', y: 1497 }, { x: '2026-10-16', y: 1483 }, { x: '2026-10-17', y: 1395 }, { x: '2026-10-18', y: 1379 }, { x: '2026-10-19', y: 1464 }, { x: '2026-10-20', y: 1378 }, { x: '2026-10-21', y: 1458 }, { x: '2026-10-22', y: 1409 }, { x: '2026-10-23', y: 1470 }, { x: '2026-10-24', y: 1485 }, { x: '2026-10-25', y: 1595 }, { x: '2026-10-26', y: 1506 }, { x: '2026-10-27', y: 1595 }, { x: '2026-10-28', y: 1531 }, { x: '2026-10-29', y: 1677 }, { x: '2026-10-30', y: 1671 }, { x: '2026-10-31', y: 1600 }, { x: '2026-11-01', y: 1647 }, { x: '2026-11-02', y: 1648 }, { x: '2026-11-03', y: 1659 }, { x: '2026-11-04', y: 1658 }, { x: '2026-11-05', y: 1579 }, { x: '2026-11-06', y: 1723 }, { x: '2026-11-07', y: 1551 }, { x: '2026-11-08', y: 1582 }, { x: '2026-11-09', y: 1590 }, { x: '2026-11-10', y: 1573 }, { x: '2026-11-11', y: 1708 }, { x: '2026-11-12', y: 1723 }, { x: '2026-11-13', y: 1629 }, { x: '2026-11-14', y: 1675 }, { x: '2026-11-15', y: 1644 }, { x: '2026-11-16', y: 1656 }, { x: '2026-11-17', y: 1570 }, { x: '2026-11-18', y: 1635 }, { x: '2026-11-19', y: 1689 }, { x: '2026-11-20', y: 1783 }, { x: '2026-11-21', y: 1779 }, { x: '2026-11-22', y: 1842 }, { x: '2026-11-23', y: 1743 }, { x: '2026-11-24', y: 1640 }, { x: '2026-11-25', y: 1829 }, { x: '2026-11-26', y: 1689 }, { x: '2026-11-27', y: 1776 }, { x: '2026-11-28', y: 1775 }, { x: '2026-11-29', y: 1823 }, { x: '2026-11-30', y: 1815 }, { x: '2026-12-01', y: 1844 }, { x: '2026-12-02', y: 1747 }, { x: '2026-12-03', y: 1922 }, { x: '2026-12-04', y: 1799 }, { x: '2026-12-05', y: 1811 }, { x: '2026-12-06', y: 1920 }, { x: '2026-12-07', y: 1768 }, { x: '2026-12-08', y: 1826 }, { x: '2026-12-09', y: 1988 }, { x: '2026-12-10', y: 1849 }, { x: '2026-12-11', y: 2006 }, { x: '2026-12-12', y: 1892 }, { x: '2026-12-13', y: 1952 }, { x: '2026-12-14', y: 1818 }, { x: '2026-12-15', y: 1860 }, { x: '2026-12-16', y: 1875 }, { x: '2026-12-17', y: 1962 }, { x: '2026-12-18', y: 2036 }, { x: '2026-12-19', y: 1880 }, { x: '2026-12-20', y: 1949 }, { x: '2026-12-21', y: 2059 }, { x: '2026-12-22', y: 2102 }, { x: '2026-12-23', y: 2004 }, { x: '2026-12-24', y: 1996 }, { x: '2026-12-25', y: 2003 }, { x: '2026-12-26', y: 1960 }, { x: '2026-12-27', y: 1956 }, { x: '2026-12-28', y: 2055 }, { x: '2026-12-29', y: 2222 }, { x: '2026-12-30', y: 2060 }, { x: '2026-12-31', y: 2010 }] }]"
  :show-points="false"
 />

Huge numbers

Line chart, 1 series: Gross volume. Period January 2026 to June 2026. Minimum $1,200,000,000,000, maximum $6,500,000,000,000, last value $6,500,000,000,000.
PeriodGross volume
January 2026$1,200,000,000,000
February 2026$1,900,000,000,000
March 2026$2,400,000,000,000
April 2026$3,100,000,000,000
May 2026$4,800,000,000,000
June 2026$6,500,000,000,000
Vue
<UiLineChart
  :series="[{ key: 'gmv', label: 'Gross volume', tone: 'brand', values: [{ x: '2026-01', y: 1200000000000 }, { x: '2026-02', y: 1900000000000 }, { x: '2026-03', y: 2400000000000 }, { x: '2026-04', y: 3100000000000 }, { x: '2026-05', y: 4800000000000 }, { x: '2026-06', y: 6500000000000 }] }]"
  unit="currency"
  currency="USD"
 />

Arabic, right to left

Line chart, 2 series: المبيعات, الأسبوع السابق. Period الاثنين، 12 أكتوبر 2026 to الأحد، 18 أكتوبر 2026. Minimum ‏31,000 ر.س.‏ (الأسبوع السابق), maximum ‏88,000 ر.س.‏ (المبيعات), last value ‏79,000 ر.س.‏ (المبيعات).
Periodالمبيعاتالأسبوع السابق
الاثنين، 12 أكتوبر 2026‏41,000 ر.س.‏‏31,000 ر.س.‏
الثلاثاء، 13 أكتوبر 2026‏52,000 ر.س.‏‏40,000 ر.س.‏
الأربعاء، 14 أكتوبر 2026‏48,000 ر.س.‏‏44,000 ر.س.‏
الخميس، 15 أكتوبر 2026‏63,000 ر.س.‏‏52,000 ر.س.‏
الجمعة، 16 أكتوبر 2026‏71,000 ر.س.‏‏58,000 ر.س.‏
السبت، 17 أكتوبر 2026‏88,000 ر.س.‏‏70,000 ر.س.‏
الأحد، 18 أكتوبر 2026‏79,000 ر.س.‏‏66,000 ر.س.‏
Vue
<UiLineChart
  locale="ar"
  :series="[{ key: 'a', label: 'المبيعات', tone: 'brand', values: [{ x: '2026-10-12', y: 41000 }, { x: '2026-10-13', y: 52000 }, { x: '2026-10-14', y: 48000 }, { x: '2026-10-15', y: 63000 }, { x: '2026-10-16', y: 71000 }, { x: '2026-10-17', y: 88000 }, { x: '2026-10-18', y: 79000 }] }, { key: 'b', label: 'الأسبوع السابق', tone: 'neutral', dashed: true, values: [{ x: '2026-10-12', y: 31000 }, { x: '2026-10-13', y: 40000 }, { x: '2026-10-14', y: 44000 }, { x: '2026-10-15', y: 52000 }, { x: '2026-10-16', y: 58000 }, { x: '2026-10-17', y: 70000 }, { x: '2026-10-18', y: 66000 }] }]"
  unit="currency"
  currency="SAR"
 />

Loading

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

Sizes

Line 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
Line 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
Line 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
Line 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
<UiLineChart
  :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 }] }]"
  size="xs"
 />

<UiLineChart
  :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 }] }]"
  size="sm"
 />

<UiLineChart
  :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 }] }]"
  size="md"
 />

<UiLineChart
  :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 }] }]"
  size="lg"
 />

API reference

Line chart for time series with several series, a localized time axis with automatic label step, "nice" value ticks, gaps for null values, tooltip and keyboard navigation.

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. x is a Date, an ISO date string (day, week, month are detected from the spacing), a number or a category string; the series share one x list, a missing x or a null y is a gap. tone is brand, success, warning, danger, info or neutral; without it the series palette (--zg-chart-1 to 6) is used. dashed draws the line dashed, for example the previous week.
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 (otherwise nice ticks from the data, from 0 unless the data stays far above it).
yMaxnumber—Fixed upper end of the value axis.
showPointsboolean—Dots on every point. Default: on up to 40 points; isolated points (between gaps) 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.