CINXE.COM

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Chart.js | Chart.js</title> <meta name="generator" content="VuePress 1.9.9"> <link rel="icon" href="/docs/latest/favicon.ico"> <meta name="description" content="Open source HTML5 Charts for your website"> <link rel="preload" href="/docs/latest/assets/css/0.styles.6dc2f403.css" as="style"><link rel="preload" href="/docs/latest/assets/js/app.c38b3990.js" as="script"><link rel="preload" href="/docs/latest/assets/js/2.2c2b1036.js" as="script"><link rel="preload" href="/docs/latest/assets/js/185.cc5cd307.js" as="script"><link rel="prefetch" href="/docs/latest/assets/js/10.273b2ce1.js"><link rel="prefetch" href="/docs/latest/assets/js/100.77c79c5a.js"><link rel="prefetch" href="/docs/latest/assets/js/101.b3839049.js"><link rel="prefetch" href="/docs/latest/assets/js/102.51d44c63.js"><link rel="prefetch" href="/docs/latest/assets/js/103.f3359b6e.js"><link rel="prefetch" href="/docs/latest/assets/js/104.d686bde4.js"><link rel="prefetch" href="/docs/latest/assets/js/105.49406888.js"><link rel="prefetch" href="/docs/latest/assets/js/106.c28f367d.js"><link rel="prefetch" href="/docs/latest/assets/js/107.273da406.js"><link rel="prefetch" href="/docs/latest/assets/js/108.172e8941.js"><link rel="prefetch" href="/docs/latest/assets/js/109.b2462eb0.js"><link rel="prefetch" href="/docs/latest/assets/js/11.d1a995d1.js"><link rel="prefetch" href="/docs/latest/assets/js/110.f1b88e8b.js"><link rel="prefetch" href="/docs/latest/assets/js/111.2d75e128.js"><link rel="prefetch" href="/docs/latest/assets/js/112.73281fcb.js"><link rel="prefetch" href="/docs/latest/assets/js/113.47457c22.js"><link rel="prefetch" href="/docs/latest/assets/js/114.e4e190d5.js"><link rel="prefetch" href="/docs/latest/assets/js/115.c3a4f82d.js"><link rel="prefetch" href="/docs/latest/assets/js/116.2f4fc295.js"><link rel="prefetch" href="/docs/latest/assets/js/117.c470138b.js"><link rel="prefetch" href="/docs/latest/assets/js/118.748debc5.js"><link rel="prefetch" href="/docs/latest/assets/js/119.ea381e4b.js"><link rel="prefetch" href="/docs/latest/assets/js/12.0051c6b2.js"><link rel="prefetch" href="/docs/latest/assets/js/120.f38ced51.js"><link rel="prefetch" href="/docs/latest/assets/js/121.2f242c20.js"><link rel="prefetch" href="/docs/latest/assets/js/122.ef463458.js"><link rel="prefetch" href="/docs/latest/assets/js/123.25640a39.js"><link rel="prefetch" href="/docs/latest/assets/js/124.90130431.js"><link rel="prefetch" href="/docs/latest/assets/js/125.49015f81.js"><link rel="prefetch" href="/docs/latest/assets/js/126.beb0d514.js"><link rel="prefetch" href="/docs/latest/assets/js/127.baf1df8c.js"><link rel="prefetch" href="/docs/latest/assets/js/128.5e1b5594.js"><link rel="prefetch" href="/docs/latest/assets/js/129.87ae30f7.js"><link rel="prefetch" href="/docs/latest/assets/js/13.e94ee9fe.js"><link rel="prefetch" href="/docs/latest/assets/js/130.3cf61a90.js"><link rel="prefetch" href="/docs/latest/assets/js/131.26b61521.js"><link rel="prefetch" href="/docs/latest/assets/js/132.fb5aa4eb.js"><link rel="prefetch" href="/docs/latest/assets/js/133.0a5990ed.js"><link rel="prefetch" href="/docs/latest/assets/js/134.731b48e4.js"><link rel="prefetch" href="/docs/latest/assets/js/135.e0912725.js"><link rel="prefetch" href="/docs/latest/assets/js/136.2fcb138e.js"><link rel="prefetch" href="/docs/latest/assets/js/137.7957c478.js"><link rel="prefetch" href="/docs/latest/assets/js/138.698eb6a9.js"><link rel="prefetch" href="/docs/latest/assets/js/139.1b391196.js"><link rel="prefetch" href="/docs/latest/assets/js/14.684f596c.js"><link rel="prefetch" href="/docs/latest/assets/js/140.1b495101.js"><link rel="prefetch" href="/docs/latest/assets/js/141.809e6040.js"><link rel="prefetch" href="/docs/latest/assets/js/142.46c50b29.js"><link rel="prefetch" href="/docs/latest/assets/js/143.b32099d8.js"><link rel="prefetch" href="/docs/latest/assets/js/144.5bed54c5.js"><link rel="prefetch" href="/docs/latest/assets/js/145.82d0a865.js"><link rel="prefetch" href="/docs/latest/assets/js/146.c6c4f8b8.js"><link rel="prefetch" href="/docs/latest/assets/js/147.d725d898.js"><link rel="prefetch" href="/docs/latest/assets/js/148.0d730d6b.js"><link rel="prefetch" href="/docs/latest/assets/js/149.7c8a1c07.js"><link rel="prefetch" href="/docs/latest/assets/js/15.64cee8a1.js"><link rel="prefetch" href="/docs/latest/assets/js/150.d3d183cf.js"><link rel="prefetch" href="/docs/latest/assets/js/151.1b2eb7c7.js"><link rel="prefetch" href="/docs/latest/assets/js/152.5fbac3ce.js"><link rel="prefetch" href="/docs/latest/assets/js/153.73ec8332.js"><link rel="prefetch" href="/docs/latest/assets/js/154.58e4168e.js"><link rel="prefetch" href="/docs/latest/assets/js/155.219899bf.js"><link rel="prefetch" href="/docs/latest/assets/js/156.9db60f71.js"><link rel="prefetch" href="/docs/latest/assets/js/157.beb746f9.js"><link rel="prefetch" href="/docs/latest/assets/js/158.9be5529b.js"><link rel="prefetch" href="/docs/latest/assets/js/159.5665388d.js"><link rel="prefetch" href="/docs/latest/assets/js/16.de50a3c9.js"><link rel="prefetch" href="/docs/latest/assets/js/160.9e1ae630.js"><link rel="prefetch" href="/docs/latest/assets/js/161.8b2955f3.js"><link rel="prefetch" href="/docs/latest/assets/js/162.b8f3900a.js"><link rel="prefetch" href="/docs/latest/assets/js/163.684e6dbd.js"><link rel="prefetch" href="/docs/latest/assets/js/164.21a1e28a.js"><link rel="prefetch" href="/docs/latest/assets/js/165.2021010a.js"><link rel="prefetch" href="/docs/latest/assets/js/166.abbfe5a1.js"><link rel="prefetch" href="/docs/latest/assets/js/167.9e300ac1.js"><link rel="prefetch" href="/docs/latest/assets/js/168.714edf6c.js"><link rel="prefetch" href="/docs/latest/assets/js/169.5f5dbf48.js"><link rel="prefetch" href="/docs/latest/assets/js/17.931e81c2.js"><link rel="prefetch" href="/docs/latest/assets/js/170.ba396ed9.js"><link rel="prefetch" href="/docs/latest/assets/js/171.80b8a56d.js"><link rel="prefetch" href="/docs/latest/assets/js/172.622e3c9c.js"><link rel="prefetch" href="/docs/latest/assets/js/173.d3664bfd.js"><link rel="prefetch" href="/docs/latest/assets/js/174.a617c8ab.js"><link rel="prefetch" href="/docs/latest/assets/js/175.95eb7ffb.js"><link rel="prefetch" href="/docs/latest/assets/js/176.fac0280b.js"><link rel="prefetch" href="/docs/latest/assets/js/177.50ce93c5.js"><link rel="prefetch" href="/docs/latest/assets/js/178.23b9baa1.js"><link rel="prefetch" href="/docs/latest/assets/js/179.76713dec.js"><link rel="prefetch" href="/docs/latest/assets/js/18.e0127dbf.js"><link rel="prefetch" href="/docs/latest/assets/js/180.649de464.js"><link rel="prefetch" href="/docs/latest/assets/js/181.441580f6.js"><link rel="prefetch" href="/docs/latest/assets/js/182.475ab195.js"><link rel="prefetch" href="/docs/latest/assets/js/183.4af08f02.js"><link rel="prefetch" href="/docs/latest/assets/js/184.67dee573.js"><link rel="prefetch" href="/docs/latest/assets/js/186.b2471650.js"><link rel="prefetch" href="/docs/latest/assets/js/187.105ec896.js"><link rel="prefetch" href="/docs/latest/assets/js/188.50401256.js"><link rel="prefetch" href="/docs/latest/assets/js/189.4a831846.js"><link rel="prefetch" href="/docs/latest/assets/js/19.66c57525.js"><link rel="prefetch" href="/docs/latest/assets/js/190.52502351.js"><link rel="prefetch" href="/docs/latest/assets/js/191.1e4cc205.js"><link rel="prefetch" href="/docs/latest/assets/js/192.39415525.js"><link rel="prefetch" href="/docs/latest/assets/js/193.ba84e13c.js"><link rel="prefetch" href="/docs/latest/assets/js/194.76252ca2.js"><link rel="prefetch" href="/docs/latest/assets/js/195.dc7a552a.js"><link rel="prefetch" href="/docs/latest/assets/js/196.6bfcb485.js"><link rel="prefetch" href="/docs/latest/assets/js/197.0bc59228.js"><link rel="prefetch" href="/docs/latest/assets/js/198.3ffa3d83.js"><link rel="prefetch" href="/docs/latest/assets/js/199.d2be7312.js"><link rel="prefetch" href="/docs/latest/assets/js/20.8e1a94f6.js"><link rel="prefetch" href="/docs/latest/assets/js/200.106eea9d.js"><link rel="prefetch" href="/docs/latest/assets/js/201.4431bf80.js"><link rel="prefetch" href="/docs/latest/assets/js/202.6bda45a4.js"><link rel="prefetch" href="/docs/latest/assets/js/203.c4d6e606.js"><link rel="prefetch" href="/docs/latest/assets/js/204.6c66e670.js"><link rel="prefetch" href="/docs/latest/assets/js/205.a455ae4b.js"><link rel="prefetch" href="/docs/latest/assets/js/206.653eb93b.js"><link rel="prefetch" href="/docs/latest/assets/js/207.03394990.js"><link rel="prefetch" href="/docs/latest/assets/js/208.2a10194c.js"><link rel="prefetch" href="/docs/latest/assets/js/209.a2ca9ca1.js"><link rel="prefetch" href="/docs/latest/assets/js/21.a79919e3.js"><link rel="prefetch" href="/docs/latest/assets/js/210.0028caab.js"><link rel="prefetch" href="/docs/latest/assets/js/211.24455be0.js"><link rel="prefetch" href="/docs/latest/assets/js/212.0b0e479a.js"><link rel="prefetch" href="/docs/latest/assets/js/213.03d71b4c.js"><link rel="prefetch" href="/docs/latest/assets/js/214.64744f00.js"><link rel="prefetch" href="/docs/latest/assets/js/215.cbef0d8c.js"><link rel="prefetch" href="/docs/latest/assets/js/216.f0ba6c6f.js"><link rel="prefetch" href="/docs/latest/assets/js/217.f7cdc217.js"><link rel="prefetch" href="/docs/latest/assets/js/218.73add515.js"><link rel="prefetch" href="/docs/latest/assets/js/219.d17ad0bb.js"><link rel="prefetch" href="/docs/latest/assets/js/22.e2ad694c.js"><link rel="prefetch" href="/docs/latest/assets/js/220.7bb9f54c.js"><link rel="prefetch" href="/docs/latest/assets/js/221.91facae7.js"><link rel="prefetch" href="/docs/latest/assets/js/222.86ed3f93.js"><link rel="prefetch" href="/docs/latest/assets/js/223.25a54129.js"><link rel="prefetch" href="/docs/latest/assets/js/224.0c619d74.js"><link rel="prefetch" href="/docs/latest/assets/js/225.453b6db6.js"><link rel="prefetch" href="/docs/latest/assets/js/226.ad7dea9c.js"><link rel="prefetch" href="/docs/latest/assets/js/227.ea959e07.js"><link rel="prefetch" href="/docs/latest/assets/js/228.76ac36cb.js"><link rel="prefetch" href="/docs/latest/assets/js/229.4f964bcf.js"><link rel="prefetch" href="/docs/latest/assets/js/23.0cc8a344.js"><link rel="prefetch" href="/docs/latest/assets/js/230.f50cb6f4.js"><link rel="prefetch" href="/docs/latest/assets/js/231.41b058d8.js"><link rel="prefetch" href="/docs/latest/assets/js/232.34d9b415.js"><link rel="prefetch" href="/docs/latest/assets/js/233.70687d28.js"><link rel="prefetch" href="/docs/latest/assets/js/234.1526ab65.js"><link rel="prefetch" href="/docs/latest/assets/js/235.083f4e7f.js"><link rel="prefetch" href="/docs/latest/assets/js/236.1a7d3dc5.js"><link rel="prefetch" href="/docs/latest/assets/js/237.e2830be6.js"><link rel="prefetch" href="/docs/latest/assets/js/238.4ea7d381.js"><link rel="prefetch" href="/docs/latest/assets/js/239.bb2aade0.js"><link rel="prefetch" href="/docs/latest/assets/js/24.143bae96.js"><link rel="prefetch" href="/docs/latest/assets/js/240.3dfbcf22.js"><link rel="prefetch" href="/docs/latest/assets/js/241.83071afa.js"><link rel="prefetch" href="/docs/latest/assets/js/242.ee76f6fa.js"><link rel="prefetch" href="/docs/latest/assets/js/243.6131c19d.js"><link rel="prefetch" href="/docs/latest/assets/js/244.60192333.js"><link rel="prefetch" href="/docs/latest/assets/js/245.1a60d48a.js"><link rel="prefetch" href="/docs/latest/assets/js/246.7c297e9d.js"><link rel="prefetch" href="/docs/latest/assets/js/247.fb8d29b9.js"><link rel="prefetch" href="/docs/latest/assets/js/248.7189371a.js"><link rel="prefetch" href="/docs/latest/assets/js/249.053a6131.js"><link rel="prefetch" href="/docs/latest/assets/js/25.5a3ab0de.js"><link rel="prefetch" href="/docs/latest/assets/js/250.2f92db81.js"><link rel="prefetch" href="/docs/latest/assets/js/251.498f8991.js"><link rel="prefetch" href="/docs/latest/assets/js/252.c9a8f1fa.js"><link rel="prefetch" href="/docs/latest/assets/js/253.0d225ad8.js"><link rel="prefetch" href="/docs/latest/assets/js/254.e2f60c26.js"><link rel="prefetch" href="/docs/latest/assets/js/255.5c482617.js"><link rel="prefetch" href="/docs/latest/assets/js/256.53f901f7.js"><link rel="prefetch" href="/docs/latest/assets/js/257.b79ed2f4.js"><link rel="prefetch" href="/docs/latest/assets/js/258.6acb31c1.js"><link rel="prefetch" href="/docs/latest/assets/js/259.0cb2f8ab.js"><link rel="prefetch" href="/docs/latest/assets/js/26.3c40c1f5.js"><link rel="prefetch" href="/docs/latest/assets/js/260.98f79fd0.js"><link rel="prefetch" href="/docs/latest/assets/js/261.1ff316ff.js"><link rel="prefetch" href="/docs/latest/assets/js/262.b41ffe41.js"><link rel="prefetch" href="/docs/latest/assets/js/263.935295bb.js"><link rel="prefetch" href="/docs/latest/assets/js/264.a79a65b2.js"><link rel="prefetch" href="/docs/latest/assets/js/27.4604b6ba.js"><link rel="prefetch" href="/docs/latest/assets/js/28.e0658285.js"><link rel="prefetch" href="/docs/latest/assets/js/29.06337e39.js"><link rel="prefetch" href="/docs/latest/assets/js/3.bb127fce.js"><link rel="prefetch" href="/docs/latest/assets/js/30.e1754253.js"><link rel="prefetch" href="/docs/latest/assets/js/31.cbb7a846.js"><link rel="prefetch" href="/docs/latest/assets/js/32.57c25e26.js"><link rel="prefetch" href="/docs/latest/assets/js/33.0cc87b45.js"><link rel="prefetch" href="/docs/latest/assets/js/34.1f83a9be.js"><link rel="prefetch" href="/docs/latest/assets/js/35.49ec4e74.js"><link rel="prefetch" href="/docs/latest/assets/js/36.a1192247.js"><link rel="prefetch" href="/docs/latest/assets/js/37.1a948ba9.js"><link rel="prefetch" href="/docs/latest/assets/js/38.f0659317.js"><link rel="prefetch" href="/docs/latest/assets/js/39.3779fffb.js"><link rel="prefetch" href="/docs/latest/assets/js/4.59b319d2.js"><link rel="prefetch" href="/docs/latest/assets/js/40.16277b30.js"><link rel="prefetch" href="/docs/latest/assets/js/41.97245bac.js"><link rel="prefetch" href="/docs/latest/assets/js/42.d399238f.js"><link rel="prefetch" href="/docs/latest/assets/js/43.00cfed1a.js"><link rel="prefetch" href="/docs/latest/assets/js/44.022b848e.js"><link rel="prefetch" href="/docs/latest/assets/js/45.c0412f61.js"><link rel="prefetch" href="/docs/latest/assets/js/46.8aa7309f.js"><link rel="prefetch" href="/docs/latest/assets/js/47.b6cd7056.js"><link rel="prefetch" href="/docs/latest/assets/js/48.e6596d1d.js"><link rel="prefetch" href="/docs/latest/assets/js/49.fa84c7cc.js"><link rel="prefetch" href="/docs/latest/assets/js/5.c5c6bf77.js"><link rel="prefetch" href="/docs/latest/assets/js/50.38a43792.js"><link rel="prefetch" href="/docs/latest/assets/js/51.2828658e.js"><link rel="prefetch" href="/docs/latest/assets/js/52.39899928.js"><link rel="prefetch" href="/docs/latest/assets/js/53.fe306a4c.js"><link rel="prefetch" href="/docs/latest/assets/js/54.1d685ce2.js"><link rel="prefetch" href="/docs/latest/assets/js/55.6698f30d.js"><link rel="prefetch" href="/docs/latest/assets/js/56.a7c86e30.js"><link rel="prefetch" href="/docs/latest/assets/js/57.09155a05.js"><link rel="prefetch" href="/docs/latest/assets/js/58.33718ae9.js"><link rel="prefetch" href="/docs/latest/assets/js/59.2a93e0e0.js"><link rel="prefetch" href="/docs/latest/assets/js/6.8648f13d.js"><link rel="prefetch" href="/docs/latest/assets/js/60.a05abe90.js"><link rel="prefetch" href="/docs/latest/assets/js/61.ab3c9bdb.js"><link rel="prefetch" href="/docs/latest/assets/js/62.a0ee5c19.js"><link rel="prefetch" href="/docs/latest/assets/js/63.6be7dd78.js"><link rel="prefetch" href="/docs/latest/assets/js/64.a69c78b8.js"><link rel="prefetch" href="/docs/latest/assets/js/65.da969f72.js"><link rel="prefetch" href="/docs/latest/assets/js/66.e980c205.js"><link rel="prefetch" href="/docs/latest/assets/js/67.3a921d92.js"><link rel="prefetch" href="/docs/latest/assets/js/68.07f6bb6c.js"><link rel="prefetch" href="/docs/latest/assets/js/69.06628093.js"><link rel="prefetch" href="/docs/latest/assets/js/7.2b9bb0cc.js"><link rel="prefetch" href="/docs/latest/assets/js/70.38679400.js"><link rel="prefetch" href="/docs/latest/assets/js/71.b82c1d18.js"><link rel="prefetch" href="/docs/latest/assets/js/72.0e082af1.js"><link rel="prefetch" href="/docs/latest/assets/js/73.df9e9dad.js"><link rel="prefetch" href="/docs/latest/assets/js/74.84f44a42.js"><link rel="prefetch" href="/docs/latest/assets/js/75.bf88ccb2.js"><link rel="prefetch" href="/docs/latest/assets/js/76.86e9b133.js"><link rel="prefetch" href="/docs/latest/assets/js/77.87e4dd18.js"><link rel="prefetch" href="/docs/latest/assets/js/78.fb9b3525.js"><link rel="prefetch" href="/docs/latest/assets/js/79.71172fa3.js"><link rel="prefetch" href="/docs/latest/assets/js/8.e267e498.js"><link rel="prefetch" href="/docs/latest/assets/js/80.5a10d955.js"><link rel="prefetch" href="/docs/latest/assets/js/81.548508b8.js"><link rel="prefetch" href="/docs/latest/assets/js/82.29d3f589.js"><link rel="prefetch" href="/docs/latest/assets/js/83.929c7ef1.js"><link rel="prefetch" href="/docs/latest/assets/js/84.5defb1ba.js"><link rel="prefetch" href="/docs/latest/assets/js/85.a740d0ca.js"><link rel="prefetch" href="/docs/latest/assets/js/86.637dc111.js"><link rel="prefetch" href="/docs/latest/assets/js/87.0ba4c921.js"><link rel="prefetch" href="/docs/latest/assets/js/88.93375303.js"><link rel="prefetch" href="/docs/latest/assets/js/89.33e7d66e.js"><link rel="prefetch" href="/docs/latest/assets/js/9.b7779339.js"><link rel="prefetch" href="/docs/latest/assets/js/90.0a60899e.js"><link rel="prefetch" href="/docs/latest/assets/js/91.9e69d654.js"><link rel="prefetch" href="/docs/latest/assets/js/92.7e623e24.js"><link rel="prefetch" href="/docs/latest/assets/js/93.af090503.js"><link rel="prefetch" href="/docs/latest/assets/js/94.c88a695a.js"><link rel="prefetch" href="/docs/latest/assets/js/95.d6922ac6.js"><link rel="prefetch" href="/docs/latest/assets/js/96.a8892169.js"><link rel="prefetch" href="/docs/latest/assets/js/97.90f15d30.js"><link rel="prefetch" href="/docs/latest/assets/js/98.1009e6f8.js"><link rel="prefetch" href="/docs/latest/assets/js/99.a3f0c2b4.js"> <link rel="stylesheet" href="/docs/latest/assets/css/0.styles.6dc2f403.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/latest/" aria-current="page" class="home-link router-link-exact-active router-link-active"><img src="/docs/latest/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/latest/" aria-current="page" class="nav-link router-link-exact-active router-link-active"> Home </a></div><div class="nav-item"><a href="/docs/latest/api/" class="nav-link"> API </a></div><div class="nav-item"><a href="/docs/latest/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://discord.gg/HxEguTK6av" target="_blank" rel="noopener noreferrer" class="nav-link external"> Discord <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/latest/" aria-current="page" class="nav-link router-link-exact-active router-link-active"> Home </a></div><div class="nav-item"><a href="/docs/latest/api/" class="nav-link"> API </a></div><div class="nav-item"><a href="/docs/latest/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://discord.gg/HxEguTK6av" target="_blank" rel="noopener noreferrer" class="nav-link external"> Discord <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/latest/" aria-current="page" class="active 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"><span>General</span> <span class="arrow right"></span></p> </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><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Migration</span> <span class="arrow right"></span></p> </section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="chart-js"><a href="#chart-js" class="header-anchor">#</a> Chart.js</h1> <p>Welcome to Chart.js!</p> <ul><li><strong><a href="/docs/latest/getting-started/">Get started with Chart.js</a> — best if you're new to Chart.js</strong></li> <li>Migrate from <a href="/docs/latest/migration/v4-migration.html">Chart.js v3</a> or <a href="/docs/latest/migration/v3-migration.html">Chart.js v2</a></li> <li>Join the community on <a href="https://discord.gg/HxEguTK6av" target="_blank" rel="noopener noreferrer">Discord<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> and <a href="https://twitter.com/chartjs" target="_blank" rel="noopener noreferrer">Twitter<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>Post a question tagged with <code>chart.js</code> on <a href="https://stackoverflow.com/questions/tagged/chart.js" target="_blank" rel="noopener noreferrer">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> <li><a href="/docs/latest/developers/contributing.html">Contribute to Chart.js</a></li></ul> <h2 id="why-chart-js"><a href="#why-chart-js" class="header-anchor">#</a> Why Chart.js</h2> <p>Among <a href="https://awesome.cube.dev/?tools=charts&ref=eco-chartjs" target="_blank" rel="noopener noreferrer">many charting libraries<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> for JavaScript application developers, Chart.js is currently the most popular one according to <a href="https://github.com/chartjs/Chart.js" target="_blank" rel="noopener noreferrer">GitHub stars<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> (~60,000) and <a href="https://www.npmjs.com/package/chart.js" target="_blank" rel="noopener noreferrer">npm downloads<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> (~2,400,000 weekly).</p> <p>Chart.js was created and <a href="https://twitter.com/_nnnick/status/313599208387137536" target="_blank" rel="noopener noreferrer">announced<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> in 2013 but has come a long way since then. It’s open-source, licensed under the very permissive <a href="https://github.com/chartjs/Chart.js/blob/master/LICENSE.md" target="_blank" rel="noopener noreferrer">MIT license<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>, and maintained by an active community.</p> <h3 id="features"><a href="#features" class="header-anchor">#</a> Features</h3> <p>Chart.js provides a set of frequently used chart types, plugins, and customization options. In addition to a reasonable set of <a href="/docs/latest/charts/area.html">built-in chart types</a>, you can use additional community-maintained <a href="https://github.com/chartjs/awesome#charts" target="_blank" rel="noopener noreferrer">chart types<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>. On top of that, it’s possible to combine several chart types into a <a href="/docs/latest/charts/mixed.html">mixed chart</a> (essentially, blending multiple chart types into one on the same canvas).</p> <p>Chart.js is highly customizable with <a href="https://github.com/chartjs/awesome#plugins" target="_blank" rel="noopener noreferrer">custom plugins<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> to create annotations, zoom, or drag-and-drop functionalities to name a few things.</p> <h3 id="defaults"><a href="#defaults" class="header-anchor">#</a> Defaults</h3> <p>Chart.js comes with a sound default configuration, making it very easy to start with and get an app that is ready for production. Chances are you will get a very appealing chart even if you don’t specify any options at all. For instance, Chart.js has animations turned on by default, so you can instantly bring attention to the story you’re telling with the data.</p> <h3 id="integrations"><a href="#integrations" class="header-anchor">#</a> Integrations</h3> <p>Chart.js comes with built-in TypeScript typings and is compatible with all popular <a href="https://github.com/chartjs/awesome#javascript" target="_blank" rel="noopener noreferrer">JavaScript frameworks<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> including <a href="https://github.com/reactchartjs/react-chartjs-2" target="_blank" rel="noopener noreferrer">React<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>, <a href="https://github.com/apertureless/vue-chartjs/" target="_blank" rel="noopener noreferrer">Vue<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>, <a href="https://github.com/SauravKanchan/svelte-chartjs" target="_blank" rel="noopener noreferrer">Svelte<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>, and <a href="https://github.com/valor-software/ng2-charts" target="_blank" rel="noopener noreferrer">Angular<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>. You can use Chart.js directly or leverage well-maintained wrapper packages that allow for a more native integration with your frameworks of choice.</p> <h3 id="developer-experience"><a href="#developer-experience" class="header-anchor">#</a> Developer experience</h3> <p>Chart.js has very thorough documentation (yes, you're reading it), <a href="/docs/latest/api/">API reference</a>, and <a href="/docs/latest/samples/information.html">examples</a>. Maintainers and community members eagerly engage in conversations on <a href="https://discord.gg/HxEguTK6av" target="_blank" rel="noopener noreferrer">Discord<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>, <a href="https://github.com/chartjs/Chart.js/discussions" target="_blank" rel="noopener noreferrer">GitHub Discussions<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>, and <a href="https://stackoverflow.com/questions/tagged/chart.js" target="_blank" rel="noopener noreferrer">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> where more than 11,000 questions are tagged with <code>chart.js</code>.</p> <h3 id="canvas-rendering"><a href="#canvas-rendering" class="header-anchor">#</a> Canvas rendering</h3> <p>Chart.js renders chart elements on an HTML5 canvas unlike several others, mostly D3.js-based, charting libraries that render as SVG. Canvas rendering makes Chart.js very performant, especially for large datasets and complex visualizations that would otherwise require thousands of SVG nodes in the DOM tree. At the same time, canvas rendering disallows CSS styling, so you will have to use built-in options for that, or create a custom plugin or chart type to render everything to your liking.</p> <h3 id="performance"><a href="#performance" class="header-anchor">#</a> Performance</h3> <p>Chart.js is very well suited for large datasets. Such datasets can be efficiently ingested using the internal format, so you can skip data <a href="/docs/latest/general/performance.html#parsing">parsing</a> and <a href="/docs/latest/general/performance.html#data-normalization">normalization</a>. Alternatively, <a href="/docs/latest/configuration/decimation.html">data decimation</a> can be configured to sample the dataset and reduce its size before rendering.</p> <p>In the end, the canvas rendering that Chart.js uses reduces the toll on your DOM tree in comparison to SVG rendering. Also, tree-shaking support allows you to include minimal parts of Chart.js code in your bundle, reducing bundle size and page load time.</p> <h3 id="community"><a href="#community" class="header-anchor">#</a> Community</h3> <p>Chart.js is <a href="https://github.com/chartjs/Chart.js/pulls?q=is%3Apr+is%3Aclosed" target="_blank" rel="noopener noreferrer">actively developed<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> and maintained by the community. With minor <a href="https://github.com/chartjs/Chart.js/releases" target="_blank" rel="noopener noreferrer">releases<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> on an approximately bi-monthly basis and major releases with breaking changes every couple of years, Chart.js keeps the balance between adding new features and making it a hassle to keep up with them.</p></div> <footer class="page-edit"> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">10/28/2024, 1:36:05 PM</span></div></footer> <div class="page-nav"><p class="inner"> <span class="next"><a href="/docs/latest/getting-started/"> Getting Started </a> → </span></p></div> </main></div><div class="global-ui"></div></div> <script src="/docs/latest/assets/js/app.c38b3990.js" defer></script><script src="/docs/latest/assets/js/2.2c2b1036.js" defer></script><script src="/docs/latest/assets/js/185.cc5cd307.js" defer></script> </body> </html>