CINXE.COM
Responsive Charts | Chart.js
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Responsive Charts | 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.6105dd9c.js" as="script"><link rel="preload" href="/docs/latest/assets/js/2.2c2b1036.js" as="script"><link rel="preload" href="/docs/latest/assets/js/166.177f8b06.js" as="script"><link rel="prefetch" href="/docs/latest/assets/js/10.deabbf79.js"><link rel="prefetch" href="/docs/latest/assets/js/100.b38c31f5.js"><link rel="prefetch" href="/docs/latest/assets/js/101.07af4961.js"><link rel="prefetch" href="/docs/latest/assets/js/102.0630d4f4.js"><link rel="prefetch" href="/docs/latest/assets/js/103.6dbd849b.js"><link rel="prefetch" href="/docs/latest/assets/js/104.ddbccec2.js"><link rel="prefetch" href="/docs/latest/assets/js/105.f739939f.js"><link rel="prefetch" href="/docs/latest/assets/js/106.e3e0f75b.js"><link rel="prefetch" href="/docs/latest/assets/js/107.e00f22a8.js"><link rel="prefetch" href="/docs/latest/assets/js/108.024e9400.js"><link rel="prefetch" href="/docs/latest/assets/js/109.dd21220b.js"><link rel="prefetch" href="/docs/latest/assets/js/11.d1a995d1.js"><link rel="prefetch" href="/docs/latest/assets/js/110.d25ab0f8.js"><link rel="prefetch" href="/docs/latest/assets/js/111.5f2d7f4d.js"><link rel="prefetch" href="/docs/latest/assets/js/112.5543bad7.js"><link rel="prefetch" href="/docs/latest/assets/js/113.95e6f2f6.js"><link rel="prefetch" href="/docs/latest/assets/js/114.2bcf0cce.js"><link rel="prefetch" href="/docs/latest/assets/js/115.f254d9e5.js"><link rel="prefetch" href="/docs/latest/assets/js/116.93598d41.js"><link rel="prefetch" href="/docs/latest/assets/js/117.002aaa80.js"><link rel="prefetch" href="/docs/latest/assets/js/118.80c19b21.js"><link rel="prefetch" href="/docs/latest/assets/js/119.60efcb20.js"><link rel="prefetch" href="/docs/latest/assets/js/12.f73318d5.js"><link rel="prefetch" href="/docs/latest/assets/js/120.ddc08823.js"><link rel="prefetch" href="/docs/latest/assets/js/121.9a40012f.js"><link rel="prefetch" href="/docs/latest/assets/js/122.11ddd8fa.js"><link rel="prefetch" href="/docs/latest/assets/js/123.993d1bfd.js"><link rel="prefetch" href="/docs/latest/assets/js/124.4578caaf.js"><link rel="prefetch" href="/docs/latest/assets/js/125.81d3b101.js"><link rel="prefetch" href="/docs/latest/assets/js/126.f2dd0c28.js"><link rel="prefetch" href="/docs/latest/assets/js/127.944a54bc.js"><link rel="prefetch" href="/docs/latest/assets/js/128.6043dfbb.js"><link rel="prefetch" href="/docs/latest/assets/js/129.3ce9d9ce.js"><link rel="prefetch" href="/docs/latest/assets/js/13.8bf561bd.js"><link rel="prefetch" href="/docs/latest/assets/js/130.7c2ef903.js"><link rel="prefetch" href="/docs/latest/assets/js/131.801809d6.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.b712a133.js"><link rel="prefetch" href="/docs/latest/assets/js/135.e0912725.js"><link rel="prefetch" href="/docs/latest/assets/js/136.2edd49ed.js"><link rel="prefetch" href="/docs/latest/assets/js/137.d40c9db4.js"><link rel="prefetch" href="/docs/latest/assets/js/138.698eb6a9.js"><link rel="prefetch" href="/docs/latest/assets/js/139.409483fb.js"><link rel="prefetch" href="/docs/latest/assets/js/14.29326be2.js"><link rel="prefetch" href="/docs/latest/assets/js/140.77fb12ab.js"><link rel="prefetch" href="/docs/latest/assets/js/141.3c68786f.js"><link rel="prefetch" href="/docs/latest/assets/js/142.ddde443a.js"><link rel="prefetch" href="/docs/latest/assets/js/143.21ca424a.js"><link rel="prefetch" href="/docs/latest/assets/js/144.002acfcc.js"><link rel="prefetch" href="/docs/latest/assets/js/145.8ab5598f.js"><link rel="prefetch" href="/docs/latest/assets/js/146.0996b2e2.js"><link rel="prefetch" href="/docs/latest/assets/js/147.f9403dc8.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.78fe68e1.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.be38a979.js"><link rel="prefetch" href="/docs/latest/assets/js/154.d3fbf465.js"><link rel="prefetch" href="/docs/latest/assets/js/155.6b495496.js"><link rel="prefetch" href="/docs/latest/assets/js/156.7c5f12d9.js"><link rel="prefetch" href="/docs/latest/assets/js/157.e290075b.js"><link rel="prefetch" href="/docs/latest/assets/js/158.84d2c51c.js"><link rel="prefetch" href="/docs/latest/assets/js/159.09f4ff92.js"><link rel="prefetch" href="/docs/latest/assets/js/16.d998e87f.js"><link rel="prefetch" href="/docs/latest/assets/js/160.f2c5cca8.js"><link rel="prefetch" href="/docs/latest/assets/js/161.8b2955f3.js"><link rel="prefetch" href="/docs/latest/assets/js/162.92d71b56.js"><link rel="prefetch" href="/docs/latest/assets/js/163.7805558a.js"><link rel="prefetch" href="/docs/latest/assets/js/164.629aa385.js"><link rel="prefetch" href="/docs/latest/assets/js/165.76f67ed1.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.2fd9434c.js"><link rel="prefetch" href="/docs/latest/assets/js/17.f17621da.js"><link rel="prefetch" href="/docs/latest/assets/js/170.ab1e8ba9.js"><link rel="prefetch" href="/docs/latest/assets/js/171.f291670f.js"><link rel="prefetch" href="/docs/latest/assets/js/172.b21548fa.js"><link rel="prefetch" href="/docs/latest/assets/js/173.14f0c90e.js"><link rel="prefetch" href="/docs/latest/assets/js/174.59db39d4.js"><link rel="prefetch" href="/docs/latest/assets/js/175.fdf714ab.js"><link rel="prefetch" href="/docs/latest/assets/js/176.3826ec68.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.de6a65fe.js"><link rel="prefetch" href="/docs/latest/assets/js/18.55bb14b2.js"><link rel="prefetch" href="/docs/latest/assets/js/180.649de464.js"><link rel="prefetch" href="/docs/latest/assets/js/181.839537f4.js"><link rel="prefetch" href="/docs/latest/assets/js/182.a751b055.js"><link rel="prefetch" href="/docs/latest/assets/js/183.081ee60c.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.532d7427.js"><link rel="prefetch" href="/docs/latest/assets/js/187.0d7633a5.js"><link rel="prefetch" href="/docs/latest/assets/js/188.50401256.js"><link rel="prefetch" href="/docs/latest/assets/js/189.da921971.js"><link rel="prefetch" href="/docs/latest/assets/js/19.a3b37955.js"><link rel="prefetch" href="/docs/latest/assets/js/190.52502351.js"><link rel="prefetch" href="/docs/latest/assets/js/191.0d9f9a3c.js"><link rel="prefetch" href="/docs/latest/assets/js/192.39415525.js"><link rel="prefetch" href="/docs/latest/assets/js/193.977bfc16.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.b7e99567.js"><link rel="prefetch" href="/docs/latest/assets/js/199.6a4d697b.js"><link rel="prefetch" href="/docs/latest/assets/js/20.62d4a53e.js"><link rel="prefetch" href="/docs/latest/assets/js/200.1e2fb56d.js"><link rel="prefetch" href="/docs/latest/assets/js/201.b061af67.js"><link rel="prefetch" href="/docs/latest/assets/js/202.dc2b13b3.js"><link rel="prefetch" href="/docs/latest/assets/js/203.c4d6e606.js"><link rel="prefetch" href="/docs/latest/assets/js/204.cfab928f.js"><link rel="prefetch" href="/docs/latest/assets/js/205.051a45c6.js"><link rel="prefetch" href="/docs/latest/assets/js/206.fa1aa288.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.7ca528e5.js"><link rel="prefetch" href="/docs/latest/assets/js/21.50502aa4.js"><link rel="prefetch" href="/docs/latest/assets/js/210.e19dbba5.js"><link rel="prefetch" href="/docs/latest/assets/js/211.2c1c0a30.js"><link rel="prefetch" href="/docs/latest/assets/js/212.d270c1e5.js"><link rel="prefetch" href="/docs/latest/assets/js/213.66c6c322.js"><link rel="prefetch" href="/docs/latest/assets/js/214.1fab9d08.js"><link rel="prefetch" href="/docs/latest/assets/js/215.07393167.js"><link rel="prefetch" href="/docs/latest/assets/js/216.062f1e22.js"><link rel="prefetch" href="/docs/latest/assets/js/217.66cfbafe.js"><link rel="prefetch" href="/docs/latest/assets/js/218.70178462.js"><link rel="prefetch" href="/docs/latest/assets/js/219.0363cabe.js"><link rel="prefetch" href="/docs/latest/assets/js/22.9832b0f4.js"><link rel="prefetch" href="/docs/latest/assets/js/220.4e37aa28.js"><link rel="prefetch" href="/docs/latest/assets/js/221.723fb691.js"><link rel="prefetch" href="/docs/latest/assets/js/222.d643a2c4.js"><link rel="prefetch" href="/docs/latest/assets/js/223.5f024eca.js"><link rel="prefetch" href="/docs/latest/assets/js/224.93c0614b.js"><link rel="prefetch" href="/docs/latest/assets/js/225.453b6db6.js"><link rel="prefetch" href="/docs/latest/assets/js/226.e9ad8c83.js"><link rel="prefetch" href="/docs/latest/assets/js/227.699b0aaa.js"><link rel="prefetch" href="/docs/latest/assets/js/228.b37ae597.js"><link rel="prefetch" href="/docs/latest/assets/js/229.d9d21407.js"><link rel="prefetch" href="/docs/latest/assets/js/23.a8008a4f.js"><link rel="prefetch" href="/docs/latest/assets/js/230.78b9b3db.js"><link rel="prefetch" href="/docs/latest/assets/js/231.8f97cb1b.js"><link rel="prefetch" href="/docs/latest/assets/js/232.735b9ff0.js"><link rel="prefetch" href="/docs/latest/assets/js/233.27cbbaaa.js"><link rel="prefetch" href="/docs/latest/assets/js/234.cf3a778a.js"><link rel="prefetch" href="/docs/latest/assets/js/235.b2f6f75f.js"><link rel="prefetch" href="/docs/latest/assets/js/236.50523431.js"><link rel="prefetch" href="/docs/latest/assets/js/237.86ca3e25.js"><link rel="prefetch" href="/docs/latest/assets/js/238.a6303485.js"><link rel="prefetch" href="/docs/latest/assets/js/239.ae757195.js"><link rel="prefetch" href="/docs/latest/assets/js/24.3d169946.js"><link rel="prefetch" href="/docs/latest/assets/js/240.6629b99b.js"><link rel="prefetch" href="/docs/latest/assets/js/241.83071afa.js"><link rel="prefetch" href="/docs/latest/assets/js/242.9e4ba0ee.js"><link rel="prefetch" href="/docs/latest/assets/js/243.e619e550.js"><link rel="prefetch" href="/docs/latest/assets/js/244.adfce418.js"><link rel="prefetch" href="/docs/latest/assets/js/245.b3953579.js"><link rel="prefetch" href="/docs/latest/assets/js/246.60a29eb8.js"><link rel="prefetch" href="/docs/latest/assets/js/247.1fb7f068.js"><link rel="prefetch" href="/docs/latest/assets/js/248.6c69050b.js"><link rel="prefetch" href="/docs/latest/assets/js/249.89b31537.js"><link rel="prefetch" href="/docs/latest/assets/js/25.d1f9b1ed.js"><link rel="prefetch" href="/docs/latest/assets/js/250.4fd83f1b.js"><link rel="prefetch" href="/docs/latest/assets/js/251.498f8991.js"><link rel="prefetch" href="/docs/latest/assets/js/252.6b733f3e.js"><link rel="prefetch" href="/docs/latest/assets/js/253.adfc90a1.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.61bb23e8.js"><link rel="prefetch" href="/docs/latest/assets/js/260.88956806.js"><link rel="prefetch" href="/docs/latest/assets/js/261.20c2e9fa.js"><link rel="prefetch" href="/docs/latest/assets/js/262.24cb7602.js"><link rel="prefetch" href="/docs/latest/assets/js/263.770c9a48.js"><link rel="prefetch" href="/docs/latest/assets/js/264.a79a65b2.js"><link rel="prefetch" href="/docs/latest/assets/js/27.e5601261.js"><link rel="prefetch" href="/docs/latest/assets/js/28.eb29551f.js"><link rel="prefetch" href="/docs/latest/assets/js/29.29c7de0c.js"><link rel="prefetch" href="/docs/latest/assets/js/3.bb127fce.js"><link rel="prefetch" href="/docs/latest/assets/js/30.82e0b214.js"><link rel="prefetch" href="/docs/latest/assets/js/31.812eb145.js"><link rel="prefetch" href="/docs/latest/assets/js/32.2976e165.js"><link rel="prefetch" href="/docs/latest/assets/js/33.2cdec8e7.js"><link rel="prefetch" href="/docs/latest/assets/js/34.9f7f1999.js"><link rel="prefetch" href="/docs/latest/assets/js/35.a4c6b1ec.js"><link rel="prefetch" href="/docs/latest/assets/js/36.0d2a2f2c.js"><link rel="prefetch" href="/docs/latest/assets/js/37.261e86b3.js"><link rel="prefetch" href="/docs/latest/assets/js/38.78431a67.js"><link rel="prefetch" href="/docs/latest/assets/js/39.bb0a1a20.js"><link rel="prefetch" href="/docs/latest/assets/js/4.9b7ef1e0.js"><link rel="prefetch" href="/docs/latest/assets/js/40.dac50ed7.js"><link rel="prefetch" href="/docs/latest/assets/js/41.846cb659.js"><link rel="prefetch" href="/docs/latest/assets/js/42.9234de55.js"><link rel="prefetch" href="/docs/latest/assets/js/43.291d6073.js"><link rel="prefetch" href="/docs/latest/assets/js/44.1901cc08.js"><link rel="prefetch" href="/docs/latest/assets/js/45.893a6444.js"><link rel="prefetch" href="/docs/latest/assets/js/46.ebc002ce.js"><link rel="prefetch" href="/docs/latest/assets/js/47.2ad206a1.js"><link rel="prefetch" href="/docs/latest/assets/js/48.636475ba.js"><link rel="prefetch" href="/docs/latest/assets/js/49.1927ddd4.js"><link rel="prefetch" href="/docs/latest/assets/js/5.009c4708.js"><link rel="prefetch" href="/docs/latest/assets/js/50.73f0ba16.js"><link rel="prefetch" href="/docs/latest/assets/js/51.7b6eff5d.js"><link rel="prefetch" href="/docs/latest/assets/js/52.c16e7e5a.js"><link rel="prefetch" href="/docs/latest/assets/js/53.6f47ed0c.js"><link rel="prefetch" href="/docs/latest/assets/js/54.29b53c16.js"><link rel="prefetch" href="/docs/latest/assets/js/55.9e184fd9.js"><link rel="prefetch" href="/docs/latest/assets/js/56.a3c0566c.js"><link rel="prefetch" href="/docs/latest/assets/js/57.06e27577.js"><link rel="prefetch" href="/docs/latest/assets/js/58.3279791a.js"><link rel="prefetch" href="/docs/latest/assets/js/59.021fea87.js"><link rel="prefetch" href="/docs/latest/assets/js/6.8648f13d.js"><link rel="prefetch" href="/docs/latest/assets/js/60.609e0a1b.js"><link rel="prefetch" href="/docs/latest/assets/js/61.2ad4fa9b.js"><link rel="prefetch" href="/docs/latest/assets/js/62.cb6f0270.js"><link rel="prefetch" href="/docs/latest/assets/js/63.23f29261.js"><link rel="prefetch" href="/docs/latest/assets/js/64.0ac398d6.js"><link rel="prefetch" href="/docs/latest/assets/js/65.21918d76.js"><link rel="prefetch" href="/docs/latest/assets/js/66.55ae4f89.js"><link rel="prefetch" href="/docs/latest/assets/js/67.87a4d582.js"><link rel="prefetch" href="/docs/latest/assets/js/68.a11f859b.js"><link rel="prefetch" href="/docs/latest/assets/js/69.1bac6784.js"><link rel="prefetch" href="/docs/latest/assets/js/7.2b9bb0cc.js"><link rel="prefetch" href="/docs/latest/assets/js/70.8d05a849.js"><link rel="prefetch" href="/docs/latest/assets/js/71.81c5709e.js"><link rel="prefetch" href="/docs/latest/assets/js/72.669834ff.js"><link rel="prefetch" href="/docs/latest/assets/js/73.8793093a.js"><link rel="prefetch" href="/docs/latest/assets/js/74.08b8a2b6.js"><link rel="prefetch" href="/docs/latest/assets/js/75.11a9e090.js"><link rel="prefetch" href="/docs/latest/assets/js/76.b5b695f7.js"><link rel="prefetch" href="/docs/latest/assets/js/77.1d4c0517.js"><link rel="prefetch" href="/docs/latest/assets/js/78.7d8c4a09.js"><link rel="prefetch" href="/docs/latest/assets/js/79.1ba7b82e.js"><link rel="prefetch" href="/docs/latest/assets/js/8.e267e498.js"><link rel="prefetch" href="/docs/latest/assets/js/80.89f9bc9b.js"><link rel="prefetch" href="/docs/latest/assets/js/81.e44b68fd.js"><link rel="prefetch" href="/docs/latest/assets/js/82.51a708c2.js"><link rel="prefetch" href="/docs/latest/assets/js/83.fde54c71.js"><link rel="prefetch" href="/docs/latest/assets/js/84.6c6c8d66.js"><link rel="prefetch" href="/docs/latest/assets/js/85.8d126809.js"><link rel="prefetch" href="/docs/latest/assets/js/86.8afb8bc7.js"><link rel="prefetch" href="/docs/latest/assets/js/87.3801e3ba.js"><link rel="prefetch" href="/docs/latest/assets/js/88.f49b648f.js"><link rel="prefetch" href="/docs/latest/assets/js/89.8e9bec9c.js"><link rel="prefetch" href="/docs/latest/assets/js/9.216da25e.js"><link rel="prefetch" href="/docs/latest/assets/js/90.02056031.js"><link rel="prefetch" href="/docs/latest/assets/js/91.b9195932.js"><link rel="prefetch" href="/docs/latest/assets/js/92.f1479405.js"><link rel="prefetch" href="/docs/latest/assets/js/93.29e5dd39.js"><link rel="prefetch" href="/docs/latest/assets/js/94.4098301a.js"><link rel="prefetch" href="/docs/latest/assets/js/95.1793e1a2.js"><link rel="prefetch" href="/docs/latest/assets/js/96.851e85f9.js"><link rel="prefetch" href="/docs/latest/assets/js/97.624d46a5.js"><link rel="prefetch" href="/docs/latest/assets/js/98.442a4729.js"><link rel="prefetch" href="/docs/latest/assets/js/99.81e3e2da.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" class="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" aria-current="page" class="active 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="responsive-charts"><a href="#responsive-charts" class="header-anchor">#</a> Responsive Charts</h1> <p>When it comes to changing the chart size based on the window size, a major limitation is that the canvas <em>render</em> size (<code>canvas.width</code> and <code>.height</code>) can <strong>not</strong> be expressed with relative values, contrary to the <em>display</em> size (<code>canvas.style.width</code> and <code>.height</code>). Furthermore, these sizes are independent of each other and thus the canvas <em>render</em> size does not adjust automatically based on the <em>display</em> size, making the rendering inaccurate.</p> <p>The following examples <strong>do not work</strong>:</p> <ul><li><code><canvas height="40vh" width="80vw"></code>: <strong>invalid</strong> values, the canvas doesn't resize (<a href="https://codepen.io/chartjs/pen/oWLZaR" target="_blank" rel="noopener noreferrer">example<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><code><canvas style="height:40vh; width:80vw"></code>: <strong>invalid</strong> behavior, the canvas is resized but becomes blurry (<a href="https://codepen.io/chartjs/pen/WjxpmO" target="_blank" rel="noopener noreferrer">example<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><code><canvas style="margin: 0 auto;"></code>: <strong>invalid</strong> behavior, the canvas continually shrinks. Chart.js needs a dedicated container for each canvas and this styling should be applied there.</li></ul> <p>Chart.js provides a <a href="#configuration-options">few options</a> to enable responsiveness and control the resize behavior of charts by detecting when the canvas <em>display</em> size changes and update the <em>render</em> size accordingly.</p> <h2 id="configuration-options"><a href="#configuration-options" class="header-anchor">#</a> Configuration Options</h2> <p>Namespace: <code>options</code></p> <table><thead><tr><th>Name</th> <th>Type</th> <th>Default</th> <th>Description</th></tr></thead> <tbody><tr><td><code>responsive</code></td> <td><code>boolean</code></td> <td><code>true</code></td> <td>Resizes the chart canvas when its container does (<a href="#important-note">important note...</a>).</td></tr> <tr><td><code>maintainAspectRatio</code></td> <td><code>boolean</code></td> <td><code>true</code></td> <td>Maintain the original canvas aspect ratio <code>(width / height)</code> when resizing.</td></tr> <tr><td><code>aspectRatio</code></td> <td><code>number</code></td> <td><code>1</code>|<code>2</code></td> <td>Canvas aspect ratio (i.e. <code>width / height</code>, a value of 1 representing a square canvas). Note that this option is ignored if the height is explicitly defined either as attribute or via the style. The default value varies by chart type; Radial charts (doughnut, pie, polarArea, radar) default to <code>1</code> and others default to <code>2</code>.</td></tr> <tr><td><code>onResize</code></td> <td><code>function</code></td> <td><code>null</code></td> <td>Called when a resize occurs. Gets passed two arguments: the chart instance and the new size.</td></tr> <tr><td><code>resizeDelay</code></td> <td><code>number</code></td> <td><code>0</code></td> <td>Delay the resize update by the given amount of milliseconds. This can ease the resize process by debouncing the update of the elements.</td></tr></tbody></table> <h2 id="important-note"><a href="#important-note" class="header-anchor">#</a> Important Note</h2> <p>Detecting when the canvas size changes can not be done directly from the <code>canvas</code> element. Chart.js uses its parent container to update the canvas <em>render</em> and <em>display</em> sizes. However, this method requires the container to be <strong>relatively positioned</strong> and <strong>dedicated to the chart canvas only</strong>. Responsiveness can then be achieved by setting relative values for the container size (<a href="https://codepen.io/chartjs/pen/YVWZbz" target="_blank" rel="noopener noreferrer">example<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> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chart-container<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>40vh<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>80vw</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>canvas</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chart<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>canvas</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre></div><p>The chart can also be programmatically resized by modifying the container size:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>chart<span class="token punctuation">.</span>canvas<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span>style<span class="token punctuation">.</span>height <span class="token operator">=</span> <span class="token string">'128px'</span><span class="token punctuation">;</span> chart<span class="token punctuation">.</span>canvas<span class="token punctuation">.</span>parentNode<span class="token punctuation">.</span>style<span class="token punctuation">.</span>width <span class="token operator">=</span> <span class="token string">'128px'</span><span class="token punctuation">;</span> </code></pre></div><p>Note that in order for the above code to correctly resize the chart height, the <a href="#configuration-options"><code>maintainAspectRatio</code></a> option must also be set to <code>false</code>.</p> <h2 id="printing-resizable-charts"><a href="#printing-resizable-charts" class="header-anchor">#</a> Printing Resizable Charts</h2> <p>CSS media queries allow changing styles when printing a page. The CSS applied from these media queries may cause charts to need to resize. However, the resize won't happen automatically. To support resizing charts when printing, you need to hook the <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint" target="_blank" rel="noopener noreferrer">onbeforeprint<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> event and manually trigger resizing of each chart.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">beforePrintHandler</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> id <span class="token keyword">in</span> Chart<span class="token punctuation">.</span>instances<span class="token punctuation">)</span> <span class="token punctuation">{</span> Chart<span class="token punctuation">.</span>instances<span class="token punctuation">[</span>id<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">resize</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>You may also find that, due to complexities in when the browser lays out the document for printing and when resize events are fired, Chart.js is unable to properly resize for the print layout. To work around this, you can pass an explicit size to <code>.resize()</code> then use an <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onafterprint" target="_blank" rel="noopener noreferrer">onafterprint<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> event to restore the automatic size when done.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'beforeprint'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> myChart<span class="token punctuation">.</span><span class="token function">resize</span><span class="token punctuation">(</span><span class="token number">600</span><span class="token punctuation">,</span> <span class="token number">600</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> window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'afterprint'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> myChart<span class="token punctuation">.</span><span class="token function">resize</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></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">12/1/2024, 4:35:13 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev"> ← <a href="/docs/latest/configuration/locale.html" class="prev"> Locale </a></span> <span class="next"><a href="/docs/latest/configuration/subtitle.html"> Subtitle </a> → </span></p></div> </main></div><div class="global-ui"></div></div> <script src="/docs/latest/assets/js/app.6105dd9c.js" defer></script><script src="/docs/latest/assets/js/2.2c2b1036.js" defer></script><script src="/docs/latest/assets/js/166.177f8b06.js" defer></script> </body> </html>