-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathoptions.html
73 lines (73 loc) · 37.3 KB
/
options.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Options | Chart.js</title>
<meta name="generator" content="VuePress 1.8.2">
<link rel="icon" href="/docs/3.1.0/favicon.ico">
<meta name="description" content="Open source HTML5 Charts for your website">
<link rel="preload" href="/docs/3.1.0/assets/css/0.styles.1623ef7a.css" as="style"><link rel="preload" href="/docs/3.1.0/assets/js/app.0ddc5917.js" as="script"><link rel="preload" href="/docs/3.1.0/assets/js/2.47b832b0.js" as="script"><link rel="preload" href="/docs/3.1.0/assets/js/167.eff2831d.js" as="script"><link rel="prefetch" href="/docs/3.1.0/assets/js/10.ceebed1f.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/100.eee663a2.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/101.b9b1b068.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/102.479c4581.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/103.53ead1e1.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/104.5c7d8858.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/105.1d68e09a.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/106.92da18bd.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/107.6f10ac74.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/108.1e45abeb.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/109.a738a660.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/11.f705aaa7.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/110.e0faa63f.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/111.7354a214.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/112.6ca1a838.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/113.625030ba.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/114.3a9c0bc2.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/115.10b47ecd.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/116.bb2a90dc.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/117.38671888.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/118.5761cc61.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/119.3b5f344b.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/12.09150dfc.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/120.0e595569.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/121.97e3bd5c.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/122.d96fa0b5.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/123.1638a563.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/124.76f2c8c1.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/125.2a9384bc.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/126.f39ed9b5.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/127.787b00cf.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/128.e9a4c541.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/129.cdd55064.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/13.854ba43a.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/130.b0e9a64a.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/131.33f2cf0f.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/132.144a5acb.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/133.3b4bce40.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/134.dc5ffe9b.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/135.5c63beb8.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/136.ac5c4228.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/137.d8e51241.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/138.fdf11c55.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/139.990fd19a.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/14.081adf03.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/140.6046865f.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/141.eeadecc8.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/142.85d7ca48.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/143.a5488c00.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/144.0aead3ec.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/145.5a75acb9.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/146.f3118c3f.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/147.21dc728b.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/148.ce54af98.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/149.bdcfdade.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/15.aaf10464.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/150.62d02d68.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/151.9548d02d.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/152.48f8570e.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/153.c769f486.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/154.fcb3d380.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/155.4b834ca6.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/156.88c22218.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/157.6b66074e.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/158.bfde7069.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/159.f33bb4c1.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/16.f65d25ae.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/160.e9680c69.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/161.9f1e28ab.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/162.fc3983a6.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/163.9e832dc0.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/164.3cc163f4.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/165.bfde4011.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/166.e764b73e.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/168.e618654e.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/169.9e5b7a91.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/17.9899e86e.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/170.ac0288f3.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/171.6b973c39.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/172.856e7c8a.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/173.d8445d26.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/174.ade5be43.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/175.ba3b8841.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/176.10bb64a2.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/177.39202147.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/178.55369968.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/179.801e181f.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/18.8259392d.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/180.4dbdd10b.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/181.66862476.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/182.1750aec1.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/183.a8ac6c4a.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/184.879d3753.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/185.6c8fa5a8.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/186.f6109ecf.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/187.24f55f38.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/188.9625ad8d.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/189.2785e485.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/19.59e65df3.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/190.6e8c7e8f.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/191.75063460.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/192.710f6faa.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/193.10f1ee73.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/194.98945737.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/195.b35e6ac4.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/196.a373af9e.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/197.0951760f.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/198.3eaf762c.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/199.e2df0be6.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/20.e8fa3191.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/200.1b76db29.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/201.1f3b8d0d.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/202.da641c48.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/203.58eb5db9.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/204.d13f1881.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/205.471d40f8.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/206.9d293c71.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/207.8219847c.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/208.7b13d4e9.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/209.28467871.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/21.fee6e631.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/210.53598657.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/211.d9c2da28.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/212.2e9df0fb.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/213.016ba575.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/214.9581b08a.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/215.903d226f.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/216.35952ef4.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/217.9d5607f9.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/218.d6c62cbb.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/219.fffb530f.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/22.5703057f.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/220.6fcc9be7.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/221.0badbc01.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/222.d26db47d.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/223.97b2025d.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/224.5757c412.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/225.4a17da2d.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/226.9aa0a8fc.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/227.1ae5f133.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/228.cc4dbf95.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/229.251d8765.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/23.134ecae5.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/230.2695cca3.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/231.ec9b28e6.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/232.f27f6418.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/233.155ff8a1.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/234.abea39d7.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/235.6160b7ca.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/236.8449bd12.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/237.39e18457.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/238.a35df5d4.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/239.ecf8e4da.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/24.266144a9.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/240.96c3a582.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/241.898273af.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/242.2ce1e199.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/25.5f549319.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/26.353585cd.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/27.b322463a.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/28.ba867bf5.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/29.f82ad649.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/3.f47fb655.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/30.c6424404.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/31.c150cc00.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/32.5ba19999.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/33.886e86c0.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/34.e6a38b20.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/35.2bc7aed5.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/36.a4911720.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/37.b47c5714.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/38.cd9de92b.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/39.804db20b.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/4.02ebacaa.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/40.2b5bc944.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/41.ffdbe277.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/42.861beeb2.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/43.eaeffe1e.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/44.a272b2bf.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/45.1c977b10.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/46.e4570fef.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/47.888e1be0.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/48.3d2b6dae.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/49.a9354155.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/5.3ebaf703.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/50.ece980c4.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/51.4ce2ec8a.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/52.44c00e86.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/53.df736d99.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/54.3cb944cc.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/55.49c0fd5c.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/56.8beb8892.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/57.62b24161.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/58.a738cc24.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/59.faa2f5d2.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/6.66c3a69e.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/60.4b0ad5e2.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/61.0c94f87a.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/62.1955e3ef.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/63.a2c68d92.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/64.61e33bb7.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/65.3ed92966.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/66.85ebdcec.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/67.7fdf739f.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/68.9ba7535b.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/69.e5b7dac5.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/7.444ac8c1.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/70.5f575655.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/71.e6886a7d.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/72.3cbbf440.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/73.7e0c7b18.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/74.26bae493.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/75.9641c3e4.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/76.a2eb57f4.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/77.aa12d9c5.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/78.5b5597b6.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/79.a436a5a4.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/8.213592ca.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/80.98082ae7.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/81.3c4dfdab.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/82.847186b1.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/83.1464037a.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/84.6c883a62.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/85.ce19abc2.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/86.44f69d78.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/87.3639bc16.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/88.14645b1d.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/89.f6686130.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/9.97a769a4.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/90.71dfc67f.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/91.2a2bd3d2.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/92.1906a5fc.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/93.040a325e.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/94.e69ba595.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/95.9d59b30f.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/96.281b52d0.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/97.5181339d.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/98.c10d3dd8.js"><link rel="prefetch" href="/docs/3.1.0/assets/js/99.43c1ef40.js">
<link rel="stylesheet" href="/docs/3.1.0/assets/css/0.styles.1623ef7a.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs/3.1.0/" class="home-link router-link-active"><img src="/docs/3.1.0/favicon.ico" alt="Chart.js" class="logo"> <span class="site-name can-hide">Chart.js</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/3.1.0/" class="nav-link">
Home
</a></div><div class="nav-item"><a href="/docs/3.1.0/api/" class="nav-link">
API
</a></div><div class="nav-item"><a href="/docs/3.1.0/samples/" class="nav-link">
Samples
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Community Menu" class="dropdown-title"><span class="title">Ecosystem</span> <span class="arrow down"></span></button> <button type="button" aria-label="Community Menu" class="mobile-dropdown-title"><span class="title">Ecosystem</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/chartjs/awesome" target="_blank" rel="noopener noreferrer" class="nav-link external">
Awesome
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://chartjs-slack.herokuapp.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Slack
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://stackoverflow.com/questions/tagged/chart.js" target="_blank" rel="noopener noreferrer" class="nav-link external">
Stack Overflow
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <a href="https://github.com/chartjs/Chart.js" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/3.1.0/" class="nav-link">
Home
</a></div><div class="nav-item"><a href="/docs/3.1.0/api/" class="nav-link">
API
</a></div><div class="nav-item"><a href="/docs/3.1.0/samples/" class="nav-link">
Samples
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Community Menu" class="dropdown-title"><span class="title">Ecosystem</span> <span class="arrow down"></span></button> <button type="button" aria-label="Community Menu" class="mobile-dropdown-title"><span class="title">Ecosystem</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/chartjs/awesome" target="_blank" rel="noopener noreferrer" class="nav-link external">
Awesome
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://chartjs-slack.herokuapp.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Slack
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://stackoverflow.com/questions/tagged/chart.js" target="_blank" rel="noopener noreferrer" class="nav-link external">
Stack Overflow
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <a href="https://github.com/chartjs/Chart.js" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><a href="/docs/3.1.0/" aria-current="page" class="sidebar-link">Chart.js</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Getting Started</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>General</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/3.1.0/general/data-structures.html" class="sidebar-link">Data structures</a></li><li><a href="/docs/3.1.0/general/accessibility.html" class="sidebar-link">Accessibility</a></li><li><a href="/docs/3.1.0/general/options.html" aria-current="page" class="active sidebar-link">Options</a></li><li><a href="/docs/3.1.0/general/colors.html" class="sidebar-link">Colors</a></li><li><a href="/docs/3.1.0/general/fonts.html" class="sidebar-link">Fonts</a></li><li><a href="/docs/3.1.0/general/padding.html" class="sidebar-link">Padding</a></li><li><a href="/docs/3.1.0/general/performance.html" class="sidebar-link">Performance</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Configuration</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Chart Types</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Axes</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Developers</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="options"><a href="#options" class="header-anchor">#</a> Options</h1> <h2 id="option-resolution"><a href="#option-resolution" class="header-anchor">#</a> Option resolution</h2> <p>Options are resolved from top to bottom, using a context dependent route.</p> <h3 id="chart-level-options"><a href="#chart-level-options" class="header-anchor">#</a> Chart level options</h3> <ul><li>options</li> <li>overrides[<code>config.type</code>]</li> <li>defaults</li></ul> <h3 id="dataset-level-options"><a href="#dataset-level-options" class="header-anchor">#</a> Dataset level options</h3> <p><code>dataset.type</code> defaults to <code>config.type</code>, if not specified.</p> <ul><li>dataset</li> <li>options.datasets[<code>dataset.type</code>]</li> <li>options</li> <li>overrides[<code>config.type</code>].datasets[<code>dataset.type</code>]</li> <li>defaults.datasets[<code>dataset.type</code>]</li> <li>defaults</li></ul> <h3 id="dataset-animation-options"><a href="#dataset-animation-options" class="header-anchor">#</a> Dataset animation options</h3> <ul><li>dataset.animation</li> <li>options.datasets[<code>dataset.type</code>].animation</li> <li>options.animation</li> <li>overrides[<code>config.type</code>].datasets[<code>dataset.type</code>].animation</li> <li>defaults.datasets[<code>dataset.type</code>].animation</li> <li>defaults.animation</li></ul> <h3 id="dataset-element-level-options"><a href="#dataset-element-level-options" class="header-anchor">#</a> Dataset element level options</h3> <p>Each scope is looked up with <code>elementType</code> prefix in the option name first, then wihtout the prefix. For example, <code>radius</code> for <code>point</code> element is looked up using <code>pointRadius</code> and if that does not hit, then <code>radius</code>.</p> <ul><li>dataset</li> <li>options.datasets[<code>dataset.type</code>]</li> <li>options.datasets[<code>dataset.type</code>].elements[<code>elementType</code>]</li> <li>options.elements[<code>elementType</code>]</li> <li>options</li> <li>overrides[<code>config.type</code>].datasets[<code>dataset.type</code>]</li> <li>overrides[<code>config.type</code>].datasets[<code>dataset.type</code>].elements[<code>elementType</code>]</li> <li>defaults.datasets[<code>dataset.type</code>]</li> <li>defaults.datasets[<code>dataset.type</code>].elements[<code>elementType</code>]</li> <li>defaults.elements[<code>elementType</code>]</li> <li>defaults</li></ul> <h3 id="scale-options"><a href="#scale-options" class="header-anchor">#</a> Scale options</h3> <ul><li>options.scales</li> <li>overrides[<code>config.type</code>].scales</li> <li>defaults.scales</li> <li>defaults.scale</li></ul> <h3 id="plugin-options"><a href="#plugin-options" class="header-anchor">#</a> Plugin options</h3> <p>A plugin can provide <code>additionalOptionScopes</code> array of paths to additionally look for its options in. For root scope, use empty string: <code>''</code>. Most core plugins also take options from root scope.</p> <ul><li>options.plugins[<code>plugin.id</code>]</li> <li>(options.[<code>...plugin.additionalOptionScopes</code>])</li> <li>overrides[<code>config.type</code>].plugins[<code>plugin.id</code>]</li> <li>defaults.plugins[<code>plugin.id</code>]</li> <li>(defaults.[<code>...plugin.additionalOptionScopes</code>])</li></ul> <h2 id="scriptable-options"><a href="#scriptable-options" class="header-anchor">#</a> Scriptable Options</h2> <p>Scriptable options also accept a function which is called for each of the underlying data values and that takes the unique argument <code>context</code> representing contextual information (see <a href="/docs/3.1.0/general/options.html#option-context">option context</a>).
A resolver is passed as second parameter, that can be used to access other options in the same context.</p> <div class="custom-block tip"><p class="custom-block-title">Note</p> <p>The <code>context</code> argument should be validated in the scriptable function, because the function can be invoked in different contexts. The <code>type</code> field is a good candidate for this validation.</p></div> <p>Example:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function-variable function">color</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">context</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> index <span class="token operator">=</span> context<span class="token punctuation">.</span>dataIndex<span class="token punctuation">;</span>
<span class="token keyword">var</span> value <span class="token operator">=</span> context<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>data<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> value <span class="token operator"><</span> <span class="token number">0</span> <span class="token operator">?</span> <span class="token string">'red'</span> <span class="token operator">:</span> <span class="token comment">// draw negative values in red</span>
index <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">?</span> <span class="token string">'blue'</span> <span class="token operator">:</span> <span class="token comment">// else, alternate values in blue and green</span>
<span class="token string">'green'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function-variable function">borderColor</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">context<span class="token punctuation">,</span> options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> color <span class="token operator">=</span> options<span class="token punctuation">.</span>color<span class="token punctuation">;</span> <span class="token comment">// resolve the value of another scriptable option: 'red', 'blue' or 'green'</span>
<span class="token keyword">return</span> Chart<span class="token punctuation">.</span>helpers<span class="token punctuation">.</span><span class="token function">color</span><span class="token punctuation">(</span>color<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">lighten</span><span class="token punctuation">(</span><span class="token number">0.2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="indexable-options"><a href="#indexable-options" class="header-anchor">#</a> Indexable Options</h2> <p>Indexable options also accept an array in which each item corresponds to the element at the same index. Note that if there are less items than data, the items are looped over. In many cases, using a <a href="#scriptable-options">function</a> is more appropriate if supported.</p> <p>Example:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>color<span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token string">'red'</span><span class="token punctuation">,</span> <span class="token comment">// color for data at index 0</span>
<span class="token string">'blue'</span><span class="token punctuation">,</span> <span class="token comment">// color for data at index 1</span>
<span class="token string">'green'</span><span class="token punctuation">,</span> <span class="token comment">// color for data at index 2</span>
<span class="token string">'black'</span><span class="token punctuation">,</span> <span class="token comment">// color for data at index 3</span>
<span class="token comment">//...</span>
<span class="token punctuation">]</span>
</code></pre></div><h2 id="option-context"><a href="#option-context" class="header-anchor">#</a> Option Context</h2> <p>The option context is used to give contextual information when resolving options and currently only applies to <a href="#scriptable-options">scriptable options</a>.
The object is preserved, so it can be used to store and pass information between calls.</p> <p>There are multiple levels of context objects:</p> <ul><li><code>chart</code> <ul><li><code>dataset</code> <ul><li><code>data</code></li></ul></li> <li><code>scale</code> <ul><li><code>tick</code></li></ul></li> <li><code>tooltip</code></li></ul></li></ul> <p>Each level inherits its parent(s) and any contextual information stored in the parent is available through the child.</p> <p>The context object contains the following properties:</p> <h3 id="chart"><a href="#chart" class="header-anchor">#</a> chart</h3> <ul><li><code>chart</code>: the associated chart</li> <li><code>type</code>: <code>'chart'</code></li></ul> <h3 id="dataset"><a href="#dataset" class="header-anchor">#</a> dataset</h3> <p>In addition to <a href="#chart">chart</a></p> <ul><li><code>active</code>: true if element is active (hovered)</li> <li><code>dataset</code>: dataset at index <code>datasetIndex</code></li> <li><code>datasetIndex</code>: index of the current dataset</li> <li><code>index</code>: same as <code>datasetIndex</code></li> <li><code>mode</code>: the update mode</li> <li><code>type</code>: <code>'dataset'</code></li></ul> <h3 id="data"><a href="#data" class="header-anchor">#</a> data</h3> <p>In addition to <a href="#dataset">dataset</a></p> <ul><li><code>active</code>: true if element is active (hovered)</li> <li><code>dataIndex</code>: index of the current data</li> <li><code>parsed</code>: the parsed data values for the given <code>dataIndex</code> and <code>datasetIndex</code></li> <li><code>raw</code>: the raw data values for the given <code>dataIndex</code> and <code>datasetIndex</code></li> <li><code>element</code>: the element (point, arc, bar, etc.) for this data</li> <li><code>index</code>: same as <code>dataIndex</code></li> <li><code>type</code>: <code>'data'</code></li></ul> <h3 id="scale"><a href="#scale" class="header-anchor">#</a> scale</h3> <p>In addition to <a href="#chart">chart</a></p> <ul><li><code>scale</code>: the associated scale</li> <li><code>type</code>: <code>'scale'</code></li></ul> <h3 id="tick"><a href="#tick" class="header-anchor">#</a> tick</h3> <p>In addition to <a href="#scale">scale</a></p> <ul><li><code>tick</code>: the associated tick object</li> <li><code>index</code>: tick index</li> <li><code>type</code>: <code>'tick'</code></li></ul> <h3 id="tooltip"><a href="#tooltip" class="header-anchor">#</a> tooltip</h3> <p>In addition to <a href="#chart">chart</a></p> <ul><li><code>tooltip</code>: the tooltip object</li> <li><code>tooltipItems</code>: the items the tooltip is displaying</li></ul></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">3/30/2021, 6:19:45 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/docs/3.1.0/general/accessibility.html" class="prev">
Accessibility
</a></span> <span class="next"><a href="/docs/3.1.0/general/colors.html">
Colors
</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/docs/3.1.0/assets/js/app.0ddc5917.js" defer></script><script src="/docs/3.1.0/assets/js/2.47b832b0.js" defer></script><script src="/docs/3.1.0/assets/js/167.eff2831d.js" defer></script>
</body>
</html>