CINXE.COM

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Layout | 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/163.684e6dbd.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/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/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/" 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"><span>General</span> <span class="arrow right"></span></p> </section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Configuration</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/latest/configuration/" aria-current="page" class="sidebar-link">Configuration</a></li><li><a href="/docs/latest/configuration/animations.html" class="sidebar-link">Animations</a></li><li><a href="/docs/latest/configuration/canvas-background.html" class="sidebar-link">Canvas background</a></li><li><a href="/docs/latest/configuration/decimation.html" class="sidebar-link">Data Decimation</a></li><li><a href="/docs/latest/configuration/device-pixel-ratio.html" class="sidebar-link">Device Pixel Ratio</a></li><li><a href="/docs/latest/configuration/elements.html" class="sidebar-link">Elements</a></li><li><a href="/docs/latest/configuration/interactions.html" class="sidebar-link">Interactions</a></li><li><a href="/docs/latest/configuration/layout.html" aria-current="page" class="active sidebar-link">Layout</a></li><li><a href="/docs/latest/configuration/legend.html" class="sidebar-link">Legend</a></li><li><a href="/docs/latest/configuration/locale.html" class="sidebar-link">Locale</a></li><li><a href="/docs/latest/configuration/responsive.html" class="sidebar-link">Responsive Charts</a></li><li><a href="/docs/latest/configuration/subtitle.html" class="sidebar-link">Subtitle</a></li><li><a href="/docs/latest/configuration/title.html" class="sidebar-link">Title</a></li><li><a href="/docs/latest/configuration/tooltip.html" class="sidebar-link">Tooltip</a></li></ul></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="layout"><a href="#layout" class="header-anchor">#</a> Layout</h1> <p>Namespace: <code>options.layout</code>, the global options for the chart layout is defined in <code>Chart.defaults.layout</code>.</p> <table><thead><tr><th>Name</th> <th>Type</th> <th>Default</th> <th style="text-align:center;"><a href="/docs/latest/general/options.html#scriptable-options">Scriptable</a></th> <th>Description</th></tr></thead> <tbody><tr><td><code>autoPadding</code></td> <td><code>boolean</code></td> <td><code>true</code></td> <td style="text-align:center;">No</td> <td>Apply automatic padding so visible elements are completely drawn.</td></tr> <tr><td><code>padding</code></td> <td><a href="/docs/latest/general/padding.html"><code>Padding</code></a></td> <td><code>0</code></td> <td style="text-align:center;">Yes</td> <td>The padding to add inside the chart.</td></tr></tbody></table></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/configuration/interactions.html" class="prev"> Interactions </a></span> <span class="next"><a href="/docs/latest/configuration/legend.html"> Legend </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/163.684e6dbd.js" defer></script> </body> </html>