CINXE.COM

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Colors | 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/9.b7779339.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/185.cc5cd307.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/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/" class="home-link 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/" class="nav-link"> 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/" class="nav-link"> 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="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/latest/general/accessibility.html" class="sidebar-link">Accessibility</a></li><li><a href="/docs/latest/general/colors.html" aria-current="page" class="active sidebar-link">Colors</a></li><li><a href="/docs/latest/general/data-structures.html" class="sidebar-link">Data structures</a></li><li><a href="/docs/latest/general/fonts.html" class="sidebar-link">Fonts</a></li><li><a href="/docs/latest/general/options.html" class="sidebar-link">Options</a></li><li><a href="/docs/latest/general/padding.html" class="sidebar-link">Padding</a></li><li><a href="/docs/latest/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><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="colors"><a href="#colors" class="header-anchor">#</a> Colors</h1> <p>Charts support three color options:</p> <ul><li>for geometric elements, you can change <em>background</em> and <em>border</em> colors;</li> <li>for textual elements, you can change the <em>font</em> color.</li></ul> <p>Also, you can change the whole <a href="/docs/latest/configuration/canvas-background.html">canvas background</a>.</p> <h2 id="default-colors"><a href="#default-colors" class="header-anchor">#</a> Default colors</h2> <p>If a color is not specified, a global default color from <code>Chart.defaults</code> is used:</p> <table><thead><tr><th>Name</th> <th>Type</th> <th>Description</th> <th>Default value</th></tr></thead> <tbody><tr><td><code>backgroundColor</code></td> <td><a href="/docs/latest/api/#color"><code>Color</code></a></td> <td>Background color</td> <td><code>rgba(0, 0, 0, 0.1)</code></td></tr> <tr><td><code>borderColor</code></td> <td><a href="/docs/latest/api/#color"><code>Color</code></a></td> <td>Border color</td> <td><code>rgba(0, 0, 0, 0.1)</code></td></tr> <tr><td><code>color</code></td> <td><a href="/docs/latest/api/#color"><code>Color</code></a></td> <td>Font color</td> <td><code>#666</code></td></tr></tbody></table> <p>You can reset default colors by updating these properties of <code>Chart.defaults</code>:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>Chart<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">'#9BD0F5'</span><span class="token punctuation">;</span> Chart<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>borderColor <span class="token operator">=</span> <span class="token string">'#36A2EB'</span><span class="token punctuation">;</span> Chart<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">'#000'</span><span class="token punctuation">;</span> </code></pre></div><h3 id="per-dataset-color-settings"><a href="#per-dataset-color-settings" class="header-anchor">#</a> Per-dataset color settings</h3> <p>If your chart has multiple datasets, using default colors would make individual datasets indistinguishable. In that case, you can set <code>backgroundColor</code> and <code>borderColor</code> for each dataset:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">labels</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'A'</span><span class="token punctuation">,</span> <span class="token string">'B'</span><span class="token punctuation">,</span> <span class="token string">'C'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token literal-property property">datasets</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'Dataset 1'</span><span class="token punctuation">,</span> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token literal-property property">borderColor</span><span class="token operator">:</span> <span class="token string">'#36A2EB'</span><span class="token punctuation">,</span> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'#9BD0F5'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'Dataset 2'</span><span class="token punctuation">,</span> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token literal-property property">borderColor</span><span class="token operator">:</span> <span class="token string">'#FF6384'</span><span class="token punctuation">,</span> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'#FFB1C1'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre></div><p>However, setting colors for each dataset might require additional work that you'd rather not do. In that case, consider using the following plugins with pre-defined or generated palettes.</p> <h3 id="default-color-palette"><a href="#default-color-palette" class="header-anchor">#</a> Default color palette</h3> <p>If you don't have any preference for colors, you can use the built-in <code>Colors</code> plugin. It will cycle through a palette of seven Chart.js brand colors:</p> <div style="max-width:500px;"><p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAzQAAABkCAYAAABQFHUdAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKPSURBVHgB7dexSQVBAEXRXXuwEsF4c3NDQQRtwtAmFEQwNDffVEUsxCL2NzHBXDinhccL7nr5/n8sTOP75nxdBjrunuw7kfX1cei+V/tu34l8btvY/75t9p3IersP3ff5/rDvRB5e1rH//b2270TWi4+h+379/Nl3ImcLAABAlKABAACyBA0AAJAlaAAAgCxBAwAAZAkaAAAgS9AAAABZggYAAMgSNAAAQJagAQAAsgQNAACQJWgAAIAsQQMAAGQJGgAAIEvQAAAAWYIGAADIEjQAAECWoAEAALIEDQAAkCVoAACALEEDAABkCRoAACBL0AAAAFmCBgAAyBI0AABAlqABAACyBA0AAJAlaAAAgCxBAwAAZAkaAAAgS9AAAABZggYAAMgSNAAAQJagAQAAsgQNAACQJWgAAIAsQQMAAGQJGgAAIEvQAAAAWYIGAADIEjQAAECWoAEAALIEDQAAkCVoAACALEEDAABkCRoAACBL0AAAAFmCBgAAyBI0AABAlqABAACyBA0AAJAlaAAAgCxBAwAAZAkaAAAgS9AAAABZggYAAMgSNAAAQJagAQAAsgQNAACQJWgAAIAsQQMAAGQJGgAAIEvQAAAAWYIGAADIEjQAAECWoAEAALIEDQAAkCVoAACALEEDAABkCRoAACBL0AAAAFmCBgAAyBI0AABAlqABAACyBA0AAJAlaAAAgCxBAwAAZAkaAAAgS9AAAABZggYAAMgSNAAAQJagAQAAsgQNAACQJWgAAIAsQQMAAGQJGgAAIEvQAAAAWYIGAADIEjQAAECWoAEAALIEDQAAkCVoAACALEEDAABkCRoAACBL0AAAAFmCBgAAyBI0AABAlqABAACyBA0AAJB1ApTtHCpW5m3yAAAAAElFTkSuQmCC" alt="Colors plugin palette"></p></div> <p>All you need is to import and register the plugin:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Colors <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'chart.js'</span><span class="token punctuation">;</span> Chart<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span>Colors<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre></div><div class="custom-block tip"><p class="custom-block-title">Note</p> <p>If you are using the UMD version of Chart.js, this plugin will be enabled by default. You can disable it by setting the <code>enabled</code> option to <code>false</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> options <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">colors</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">enabled</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre></div></div> <h3 id="dynamic-datasets-at-runtime"><a href="#dynamic-datasets-at-runtime" class="header-anchor">#</a> Dynamic datasets at runtime</h3> <p>By default, the colors plugin only works when you initialize the chart without any colors for the border or background specified. If you want to force the colors plugin to always color your datasets, for example, when using dynamic datasets at runtime you will need to set the <code>forceOverride</code> option to true:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> options <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">colors</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">forceOverride</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre></div><h3 id="advanced-color-palettes"><a href="#advanced-color-palettes" class="header-anchor">#</a> Advanced color palettes</h3> <p>See the <a href="https://github.com/chartjs/awesome#plugins" target="_blank" rel="noopener noreferrer">awesome list<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 plugins that would give you more flexibility defining color palettes.</p> <h2 id="color-formats"><a href="#color-formats" class="header-anchor">#</a> Color formats</h2> <p>You can specify the color as a string in either of the following notations:</p> <table><thead><tr><th>Notation</th> <th>Example</th> <th>Example with transparency</th></tr></thead> <tbody><tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color" target="_blank" rel="noopener noreferrer">Hexadecimal<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></td> <td><code>#36A2EB</code></td> <td><code>#36A2EB80</code></td></tr> <tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb" target="_blank" rel="noopener noreferrer">RGB<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> or <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgba" target="_blank" rel="noopener noreferrer">RGBA<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></td> <td><code>rgb(54, 162, 235)</code></td> <td><code>rgba(54, 162, 235, 0.5)</code></td></tr> <tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl" target="_blank" rel="noopener noreferrer">HSL<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> or <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsla" target="_blank" rel="noopener noreferrer">HSLA<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></td> <td><code>hsl(204, 82%, 57%)</code></td> <td><code>hsla(204, 82%, 57%, 0.5)</code></td></tr></tbody></table> <p>Alternatively, you can pass a <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern" target="_blank" rel="noopener noreferrer">CanvasPattern<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> or <a href="https://developer.mozilla.org/en/docs/Web/API/CanvasGradient" target="_blank" rel="noopener noreferrer">CanvasGradient<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> object instead of a string color to achieve some interesting effects.</p> <h2 id="patterns-and-gradients"><a href="#patterns-and-gradients" class="header-anchor">#</a> Patterns and Gradients</h2> <p>For example, you can fill a dataset with a pattern from an image.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> img <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Image</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> img<span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token string">'https://example.com/my_image.png'</span><span class="token punctuation">;</span> img<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> ctx <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'canvas'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getContext</span><span class="token punctuation">(</span><span class="token string">'2d'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> fillPattern <span class="token operator">=</span> ctx<span class="token punctuation">.</span><span class="token function">createPattern</span><span class="token punctuation">(</span>img<span class="token punctuation">,</span> <span class="token string">'repeat'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> chart <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Chart</span><span class="token punctuation">(</span>ctx<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">labels</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Item 1'</span><span class="token punctuation">,</span> <span class="token string">'Item 2'</span><span class="token punctuation">,</span> <span class="token string">'Item 3'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token literal-property property">datasets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> fillPattern <span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre></div><p>Pattern fills can help viewers with vision deficiencies (e.g., color-blindness or partial sight) <a href="http://betweentwobrackets.com/data-graphics-and-colour-vision/" target="_blank" rel="noopener noreferrer">more easily understand your data<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>.</p> <p>You can use the <a href="https://github.com/ashiguruma/patternomaly" target="_blank" rel="noopener noreferrer">Patternomaly<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> library to generate patterns to fill datasets:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> chartData <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">datasets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">45</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token punctuation">[</span> pattern<span class="token punctuation">.</span><span class="token function">draw</span><span class="token punctuation">(</span><span class="token string">'square'</span><span class="token punctuation">,</span> <span class="token string">'#ff6384'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> pattern<span class="token punctuation">.</span><span class="token function">draw</span><span class="token punctuation">(</span><span class="token string">'circle'</span><span class="token punctuation">,</span> <span class="token string">'#36a2eb'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> pattern<span class="token punctuation">.</span><span class="token function">draw</span><span class="token punctuation">(</span><span class="token string">'diamond'</span><span class="token punctuation">,</span> <span class="token string">'#cc65fe'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> pattern<span class="token punctuation">.</span><span class="token function">draw</span><span class="token punctuation">(</span><span class="token string">'triangle'</span><span class="token punctuation">,</span> <span class="token string">'#ffce56'</span><span class="token punctuation">)</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token literal-property property">labels</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Red'</span><span class="token punctuation">,</span> <span class="token string">'Blue'</span><span class="token punctuation">,</span> <span class="token string">'Purple'</span><span class="token punctuation">,</span> <span class="token string">'Yellow'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre></div></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="prev"> ← <a href="/docs/latest/general/accessibility.html" class="prev"> Accessibility </a></span> <span class="next"><a href="/docs/latest/general/data-structures.html"> Data structures </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/9.b7779339.js" defer></script> </body> </html>