chart.js

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Bar Chart | Chart.js</title> <meta name="generator" content="VuePress 1.8.3"> <link rel="icon" href="/docs/3.9.0/favicon.ico"> <meta name="description" content="Open source HTML5 Charts for your website"> <link rel="preload" href="/docs/3.9.0/assets/css/0.styles.e83a9109.css" as="style"><link rel="preload" href="/docs/3.9.0/assets/js/app.b5254226.js" as="script"><link rel="preload" href="/docs/3.9.0/assets/js/2.3e2307f3.js" as="script"><link rel="preload" href="/docs/3.9.0/assets/js/143.05e388ba.js" as="script"><link rel="preload" href="/docs/3.9.0/assets/js/3.947b8d98.js" as="script"><link rel="prefetch" href="/docs/3.9.0/assets/js/10.55a354f0.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/100.ec3ce48e.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/101.5c96ecc3.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/102.a4c20920.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/103.5c9e08b5.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/104.dceaebe0.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/105.7686cdc7.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/106.d16e0ea0.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/107.9c8dcae1.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/108.ef85e8fc.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/109.21777800.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/11.6f47681f.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/110.b8b26937.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/111.3265ddc5.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/112.73dd615c.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/113.a6714853.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/114.602044af.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/115.c8394b6d.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/116.a189271f.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/117.beb7078e.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/118.191da875.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/119.deaf23d7.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/12.c1602a77.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/120.752eb1d7.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/121.e680e2b8.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/122.9f10b07c.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/123.014a3e00.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/124.89c16dcb.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/125.034a744b.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/126.bd047874.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/127.3b8478f3.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/128.87d67ad7.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/129.f6241700.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/13.6a25e761.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/130.a9cb856a.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/131.fd50a851.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/132.c46867f6.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/133.d5aa1db6.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/134.4bfa3b5a.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/135.8c7630ad.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/136.f813e062.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/137.3ed06bce.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/138.b74b8391.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/139.924812c0.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/14.c27f68ca.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/140.a7967a5d.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/141.34a018bb.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/142.c5bfcdd4.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/144.a98bdbcc.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/145.826b73e0.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/146.001afadf.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/147.fcadaef3.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/148.2e10aee8.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/149.f3dcd785.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/15.8a17bde2.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/150.fd8575ca.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/151.67ecd4a3.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/152.820c660a.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/153.0f168375.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/154.2aa9c67d.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/155.e3367ebc.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/156.a5bb942d.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/157.09caef4e.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/158.1f82587f.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/159.a5d4636e.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/16.bd2b8655.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/160.e206ed10.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/161.fac79692.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/162.9f2f870f.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/163.4f1604f9.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/164.7f8d8643.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/165.fe2baa69.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/166.c82b3c76.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/167.3c3f2ff1.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/168.8d2e8e83.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/169.b10c84bd.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/17.41937cb1.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/170.329c37a3.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/171.2480fc36.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/172.81c5206a.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/173.12ceea2b.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/174.5c4f9d7f.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/175.cf43934f.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/176.f48183c3.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/177.d0d35403.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/178.55d433fd.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/179.9442c138.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/18.83722313.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/180.5c15d5d4.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/181.911f367b.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/182.72f663e8.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/183.22b2258c.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/184.15b21065.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/185.894ea40b.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/186.f6394459.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/187.7bd9b3fe.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/188.3baa9bcd.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/189.18e63b11.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/19.67aeee92.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/190.b7ffb54a.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/191.13061aba.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/192.1bf9bd61.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/193.8fa44455.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/194.49c9a3c0.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/195.eb1e8802.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/196.9b925823.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/197.adca6c8c.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/198.2ae0961a.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/199.cd9dca80.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/20.5c6a8bb6.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/200.2eb9437f.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/201.6dba10c3.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/202.9c5057c6.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/203.98a3c2b8.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/204.50d5cf2e.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/205.e56e820b.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/206.6ce5c41e.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/207.8aa83d91.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/208.296ee160.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/209.13279349.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/21.03f70508.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/210.63e30420.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/211.0b325f23.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/212.be671e2e.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/213.81d2e607.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/214.ba403b5c.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/215.2efcec5f.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/216.e01d3100.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/217.906c8d54.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/218.94e33827.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/219.21c5e01f.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/22.ed257010.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/220.3ba160e4.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/221.5c17138c.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/222.e1dbb464.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/223.9aae8939.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/224.1f9a0947.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/225.56b2dd16.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/226.8c102c21.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/227.b3d60339.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/228.df41dd83.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/229.70ab90a4.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/23.f2ed06e2.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/230.7e5a85b1.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/231.b83d12f1.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/232.bb17417c.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/233.201ca5f0.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/234.d975df48.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/235.71a7be7d.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/236.05d87a5e.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/237.d518e28b.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/238.b248ecf4.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/239.9e2cd69d.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/24.fe605ff6.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/240.c0869bc2.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/241.59dc896f.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/242.6d423d39.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/243.a355eaa8.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/244.ad729cf8.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/245.1e48ff88.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/246.305c9702.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/247.916c9bd7.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/248.1d222543.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/249.3c44b887.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/25.62a719ec.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/250.05fa08c5.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/251.4dee4010.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/252.ae98a1a4.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/253.727c4b13.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/254.c936ac1e.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/255.3d34361f.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/256.8d709dae.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/257.2d8411ef.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/258.d2c5c7f4.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/259.8f1f7b26.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/26.1aca3c94.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/260.54ff10d2.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/261.29113d92.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/27.83e317de.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/28.7f63abef.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/29.e64d700a.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/30.80b868a4.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/31.c3e8ba9b.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/32.2ea2032c.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/33.8f17aab7.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/34.cf68314e.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/35.74f2a343.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/36.e6f102f1.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/37.5205c8d5.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/38.3a0beb59.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/39.db083188.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/4.fa1d5bf7.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/40.3be407c0.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/41.4ee6797a.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/42.dd060b03.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/43.b7708855.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/44.298561ef.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/45.3ca26bd5.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/46.374e1771.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/47.cb6ecce1.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/48.d3427a25.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/49.133e1210.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/5.00f814ac.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/50.b1bd0391.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/51.967c74e6.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/52.dfee45f4.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/53.25a274c1.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/54.27f2a3a2.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/55.d7cd8bb5.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/56.aea035df.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/57.2048b36e.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/58.a00868dd.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/59.36ac9646.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/6.2bc86161.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/60.7e677ba7.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/61.d51712b4.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/62.0f05c38f.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/63.27523162.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/64.a8a6f225.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/65.41a2893d.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/66.9521ea81.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/67.d7bfb1e4.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/68.cb103f64.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/69.2fe3abca.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/7.74f2ce90.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/70.5f1a2fc9.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/71.f151d361.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/72.ce8f62b5.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/73.e54b00e9.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/74.7a565bc6.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/75.581acb17.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/76.c9c82d42.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/77.f696dbb7.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/78.cea14ac4.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/79.dce49c24.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/8.8928eb8b.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/80.ec362358.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/81.a9378b89.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/82.34286a2f.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/83.0c888c55.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/84.17cdaa0e.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/85.64c4d0bf.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/86.b02b9a06.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/87.4e43ca13.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/88.ae0a1fb7.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/89.bfaddc8f.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/9.26921c7f.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/90.4f8727af.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/91.cf47d8ac.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/92.f6ff0a1d.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/93.e410f052.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/94.231bdd9c.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/95.5bbaaa27.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/96.36037d5b.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/97.ea8aaadb.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/98.b581d8bb.js"><link rel="prefetch" href="/docs/3.9.0/assets/js/99.84a3fa0c.js"> <link rel="stylesheet" href="/docs/3.9.0/assets/css/0.styles.e83a9109.css"> </head> <body> <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs/3.9.0/" class="home-link router-link-active"><img src="/docs/3.9.0/favicon.ico" alt="Chart.js" class="logo"> <span class="site-name can-hide">Chart.js</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> </div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/3.9.0/" class="nav-link"> Home </a></div><div class="nav-item"><a href="/docs/3.9.0/api/" class="nav-link"> API </a></div><div class="nav-item"><a href="/docs/3.9.0/samples/" class="nav-link"> Samples </a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Community Menu" class="dropdown-title"><span class="title">Ecosystem</span> <span class="arrow down"></span></button> <button type="button" aria-label="Community Menu" class="mobile-dropdown-title"><span class="title">Ecosystem</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"> <a href="https://github.com/chartjs/awesome" target="_blank" rel="noopener noreferrer" class="nav-link external"> Awesome <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"> <a href="https://chartjs-slack.herokuapp.com/" target="_blank" rel="noopener noreferrer" class="nav-link external"> Slack <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"> <a href="https://stackoverflow.com/questions/tagged/chart.js" target="_blank" rel="noopener noreferrer" class="nav-link external"> Stack Overflow <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <a href="https://github.com/chartjs/Chart.js" target="_blank" rel="noopener noreferrer" class="repo-link"> GitHub <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/3.9.0/" class="nav-link"> Home </a></div><div class="nav-item"><a href="/docs/3.9.0/api/" class="nav-link"> API </a></div><div class="nav-item"><a href="/docs/3.9.0/samples/" class="nav-link"> Samples </a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Community Menu" class="dropdown-title"><span class="title">Ecosystem</span> <span class="arrow down"></span></button> <button type="button" aria-label="Community Menu" class="mobile-dropdown-title"><span class="title">Ecosystem</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"> <a href="https://github.com/chartjs/awesome" target="_blank" rel="noopener noreferrer" class="nav-link external"> Awesome <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"> <a href="https://chartjs-slack.herokuapp.com/" target="_blank" rel="noopener noreferrer" class="nav-link external"> Slack <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"> <a href="https://stackoverflow.com/questions/tagged/chart.js" target="_blank" rel="noopener noreferrer" class="nav-link external"> Stack Overflow <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <a href="https://github.com/chartjs/Chart.js" target="_blank" rel="noopener noreferrer" class="repo-link"> GitHub <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><a href="/docs/3.9.0/" aria-current="page" class="sidebar-link">Chart.js</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Getting Started</span> <span class="arrow right"></span></p> </section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>General</span> <span class="arrow right"></span></p> </section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Configuration</span> <span class="arrow right"></span></p> </section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Chart Types</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/3.9.0/charts/area.html" class="sidebar-link">Area Chart</a></li><li><a href="/docs/3.9.0/charts/bar.html" aria-current="page" class="active sidebar-link">Bar Chart</a></li><li><a href="/docs/3.9.0/charts/bubble.html" class="sidebar-link">Bubble Chart</a></li><li><a href="/docs/3.9.0/charts/doughnut.html" class="sidebar-link">Doughnut and Pie Charts</a></li><li><a href="/docs/3.9.0/charts/line.html" class="sidebar-link">Line Chart</a></li><li><a href="/docs/3.9.0/charts/mixed.html" class="sidebar-link">Mixed Chart Types</a></li><li><a href="/docs/3.9.0/charts/polar.html" class="sidebar-link">Polar Area Chart</a></li><li><a href="/docs/3.9.0/charts/radar.html" class="sidebar-link">Radar Chart</a></li><li><a href="/docs/3.9.0/charts/scatter.html" class="sidebar-link">Scatter Chart</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Axes</span> <span class="arrow right"></span></p> </section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Developers</span> <span class="arrow right"></span></p> </section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="bar-chart"><a href="#bar-chart" class="header-anchor">#</a> Bar Chart</h1> <p>A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.</p> <div class="chart-editor" data-v-365c20ab><div class="chart-view" data-v-365c20ab><canvas></canvas></div> <div class="chart-actions" data-v-2afd21f1 data-v-365c20ab></div> <div class="code-editor" data-v-66ca8197 data-v-365c20ab><div class="code-editor-header" data-v-66ca8197><div class="code-editor-tabs" data-v-66ca8197><button class="code-editor-tab active" data-v-66ca8197> config </button><button class="code-editor-tab" data-v-66ca8197> setup </button></div> <div class="code-editor-tools" data-v-66ca8197> <a href="https://github.com/chartjs/Chart.js/blob/master/docs/charts/bar.md" title="View on GitHub" target="_blank" class="code-editor-tool fab fa-github fa-lg" data-v-66ca8197></a></div></div> <div class="code-editor-views" data-v-66ca8197><div class="editor-textarea ps" data-v-05f11386 data-v-66ca8197><div class="editor-textarea-content" data-v-05f11386><div class="prism-editor-wrapper" data-v-05f11386><div class="prism-editor__container"><textarea spellCheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">const config = { type: 'bar', data: data, options: { scales: { y: { beginAtZero: true } } }, };</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">const</span> config <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> <span class="token literal-property property">data</span><span class="token operator">:</span> data<span class="token punctuation">,</span> <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">scales</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">beginAtZero</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> <span class="token punctuation">}</span><span class="token punctuation">;</span><br /></pre></div></div></div></div><div class="editor-textarea ps" style="display:none;" data-v-05f11386 data-v-66ca8197><div class="editor-textarea-content" data-v-05f11386><div class="prism-editor-wrapper" data-v-05f11386><div class="prism-editor__container"><textarea spellCheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">const labels = Utils.months({count: 7}); const data = { labels: labels, datasets: [{ label: 'My First Dataset', data: [65, 59, 80, 81, 56, 55, 40], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(201, 203, 207, 0.2)' ], borderColor: [ 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)', 'rgb(201, 203, 207)' ], borderWidth: 1 }] };</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">const</span> labels <span class="token operator">=</span> Utils<span class="token punctuation">.</span><span class="token function">months</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">7</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <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> labels<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">'My First Dataset'</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">65</span><span class="token punctuation">,</span> <span class="token number">59</span><span class="token punctuation">,</span> <span class="token number">80</span><span class="token punctuation">,</span> <span class="token number">81</span><span class="token punctuation">,</span> <span class="token number">56</span><span class="token punctuation">,</span> <span class="token number">55</span><span class="token punctuation">,</span> <span class="token number">40</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> <span class="token string">'rgba(255, 99, 132, 0.2)'</span><span class="token punctuation">,</span> <span class="token string">'rgba(255, 159, 64, 0.2)'</span><span class="token punctuation">,</span> <span class="token string">'rgba(255, 205, 86, 0.2)'</span><span class="token punctuation">,</span> <span class="token string">'rgba(75, 192, 192, 0.2)'</span><span class="token punctuation">,</span> <span class="token string">'rgba(54, 162, 235, 0.2)'</span><span class="token punctuation">,</span> <span class="token string">'rgba(153, 102, 255, 0.2)'</span><span class="token punctuation">,</span> <span class="token string">'rgba(201, 203, 207, 0.2)'</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 punctuation">[</span> <span class="token string">'rgb(255, 99, 132)'</span><span class="token punctuation">,</span> <span class="token string">'rgb(255, 159, 64)'</span><span class="token punctuation">,</span> <span class="token string">'rgb(255, 205, 86)'</span><span class="token punctuation">,</span> <span class="token string">'rgb(75, 192, 192)'</span><span class="token punctuation">,</span> <span class="token string">'rgb(54, 162, 235)'</span><span class="token punctuation">,</span> <span class="token string">'rgb(153, 102, 255)'</span><span class="token punctuation">,</span> <span class="token string">'rgb(201, 203, 207)'</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">;</span><br /></pre></div></div></div></div></div></div></div><h2 id="dataset-properties"><a href="#dataset-properties" class="header-anchor">#</a> Dataset Properties</h2> <p>Namespaces:</p> <ul><li><code>data.datasets[index]</code> - options for this dataset only</li> <li><code>options.datasets.bar</code> - options for all bar datasets</li> <li><code>options.elements.bar</code> - options for all <a href="/docs/3.9.0/configuration/elements.html#bar-configuration">bar elements</a></li> <li><code>options</code> - options for the whole chart</li></ul> <p>The bar chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the color of the bars is generally set this way. Only the <code>data</code> option needs to be specified in the dataset namespace.</p> <table><thead><tr><th>Name</th> <th>Type</th> <th style="text-align:center;"><a href="/docs/3.9.0/general/options.html#scriptable-options">Scriptable</a></th> <th style="text-align:center;"><a href="/docs/3.9.0/general/options.html#indexable-options">Indexable</a></th> <th>Default</th></tr></thead> <tbody><tr><td><a href="#styling"><code>backgroundColor</code></a></td> <td><a href="/docs/3.9.0/general/colors.html"><code>Color</code></a></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">Yes</td> <td><code>'rgba(0, 0, 0, 0.1)'</code></td></tr> <tr><td><a href="#general"><code>base</code></a></td> <td><code>number</code></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">Yes</td> <td></td></tr> <tr><td><a href="#barpercentage"><code>barPercentage</code></a></td> <td><code>number</code></td> <td style="text-align:center;">-</td> <td style="text-align:center;">-</td> <td><code>0.9</code></td></tr> <tr><td><a href="#barthickness"><code>barThickness</code></a></td> <td><code>number</code>|<code>string</code></td> <td style="text-align:center;">-</td> <td style="text-align:center;">-</td> <td></td></tr> <tr><td><a href="#styling"><code>borderColor</code></a></td> <td><a href="/docs/3.9.0/general/colors.html"><code>Color</code></a></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">Yes</td> <td><code>'rgba(0, 0, 0, 0.1)'</code></td></tr> <tr><td><a href="#borderskipped"><code>borderSkipped</code></a></td> <td><code>string</code>|<code>boolean</code></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">Yes</td> <td><code>'start'</code></td></tr> <tr><td><a href="#borderwidth"><code>borderWidth</code></a></td> <td><code>number</code>|<code>object</code></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">Yes</td> <td><code>0</code></td></tr> <tr><td><a href="#borderradius"><code>borderRadius</code></a></td> <td><code>number</code>|<code>object</code></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">Yes</td> <td><code>0</code></td></tr> <tr><td><a href="#categorypercentage"><code>categoryPercentage</code></a></td> <td><code>number</code></td> <td style="text-align:center;">-</td> <td style="text-align:center;">-</td> <td><code>0.8</code></td></tr> <tr><td><a href="#general"><code>clip</code></a></td> <td><code>number</code>|<code>object</code>|<code>false</code></td> <td style="text-align:center;">-</td> <td style="text-align:center;">-</td> <td></td></tr> <tr><td><a href="#data-structure"><code>data</code></a></td> <td><code>object</code>|<code>object[]</code>| <code>number[]</code>|<code>string[]</code></td> <td style="text-align:center;">-</td> <td style="text-align:center;">-</td> <td><strong>required</strong></td></tr> <tr><td><a href="#general"><code>grouped</code></a></td> <td><code>boolean</code></td> <td style="text-align:center;">-</td> <td style="text-align:center;">-</td> <td><code>true</code></td></tr> <tr><td><a href="#interactions"><code>hoverBackgroundColor</code></a></td> <td><a href="/docs/3.9.0/general/colors.html"><code>Color</code></a></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">Yes</td> <td></td></tr> <tr><td><a href="#interactions"><code>hoverBorderColor</code></a></td> <td><a href="/docs/3.9.0/general/colors.html"><code>Color</code></a></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">Yes</td> <td></td></tr> <tr><td><a href="#interactions"><code>hoverBorderWidth</code></a></td> <td><code>number</code></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">Yes</td> <td><code>1</code></td></tr> <tr><td><a href="#interactions"><code>hoverBorderRadius</code></a></td> <td><code>number</code></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">Yes</td> <td><code>0</code></td></tr> <tr><td><a href="#general"><code>indexAxis</code></a></td> <td><code>string</code></td> <td style="text-align:center;">-</td> <td style="text-align:center;">-</td> <td><code>'x'</code></td></tr> <tr><td><a href="#inflateamount"><code>inflateAmount</code></a></td> <td><code>number</code>|<code>'auto'</code></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">Yes</td> <td><code>'auto'</code></td></tr> <tr><td><a href="#maxbarthickness"><code>maxBarThickness</code></a></td> <td><code>number</code></td> <td style="text-align:center;">-</td> <td style="text-align:center;">-</td> <td></td></tr> <tr><td><a href="#styling"><code>minBarLength</code></a></td> <td><code>number</code></td> <td style="text-align:center;">-</td> <td style="text-align:center;">-</td> <td></td></tr> <tr><td><a href="#general"><code>label</code></a></td> <td><code>string</code></td> <td style="text-align:center;">-</td> <td style="text-align:center;">-</td> <td><code>''</code></td></tr> <tr><td><a href="#general"><code>order</code></a></td> <td><code>number</code></td> <td style="text-align:center;">-</td> <td style="text-align:center;">-</td> <td><code>0</code></td></tr> <tr><td><a href="/docs/3.9.0/configuration/elements.html#point-styles"><code>pointStyle</code></a></td> <td><a href="/docs/3.9.0/configuration/elements.html#types"><code>pointStyle</code></a></td> <td style="text-align:center;">Yes</td> <td style="text-align:center;">-</td> <td><code>'circle'</code></td></tr> <tr><td><a href="#general"><code>skipNull</code></a></td> <td><code>boolean</code></td> <td style="text-align:center;">-</td> <td style="text-align:center;">-</td> <td></td></tr> <tr><td><a href="#general"><code>stack</code></a></td> <td><code>string</code></td> <td style="text-align:center;">-</td> <td style="text-align:center;">-</td> <td><code>'bar'</code></td></tr> <tr><td><a href="#general"><code>xAxisID</code></a></td> <td><code>string</code></td> <td style="text-align:center;">-</td> <td style="text-align:center;">-</td> <td>first x axis</td></tr> <tr><td><a href="#general"><code>yAxisID</code></a></td> <td><code>string</code></td> <td style="text-align:center;">-</td> <td style="text-align:center;">-</td> <td>first y axis</td></tr></tbody></table> <p>All these values, if <code>undefined</code>, fallback to the scopes described in <a href="../general/options">option resolution</a></p> <h3 id="example-dataset-configuration"><a href="#example-dataset-configuration" class="header-anchor">#</a> Example dataset configuration</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token literal-property property">data</span><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">barPercentage</span><span class="token operator">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span> <span class="token literal-property property">barThickness</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token literal-property property">maxBarThickness</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token literal-property property">minBarLength</span><span class="token operator">:</span> <span class="token number">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">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 number">40</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">,</span> <span class="token number">60</span><span class="token punctuation">,</span> <span class="token number">70</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><h3 id="general"><a href="#general" class="header-anchor">#</a> General</h3> <table><thead><tr><th>Name</th> <th>Description</th></tr></thead> <tbody><tr><td><code>base</code></td> <td>Base value for the bar in data units along the value axis. If not set, defaults to the value axis base value.</td></tr> <tr><td><code>clip</code></td> <td>How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. <code>0</code> = clip at chartArea. Clipping can also be configured per side: <code>clip: {left: 5, top: false, right: -2, bottom: 0}</code></td></tr> <tr><td><code>grouped</code></td> <td>Should the bars be grouped on index axis. When <code>true</code>, all the datasets at same index value will be placed next to each other centering on that index value. When <code>false</code>, each bar is placed on its actual index-axis value.</td></tr> <tr><td><code>indexAxis</code></td> <td>The base axis of the dataset. <code>'x'</code> for vertical bars and <code>'y'</code> for horizontal bars.</td></tr> <tr><td><code>label</code></td> <td>The label for the dataset which appears in the legend and tooltips.</td></tr> <tr><td><code>order</code></td> <td>The drawing order of dataset. Also affects order for stacking, tooltip and legend. <a href="/docs/3.9.0/charts/mixed.html#drawing-order">more</a></td></tr> <tr><td><code>skipNull</code></td> <td>If <code>true</code>, null or undefined values will not be used for spacing calculations when determining bar size.</td></tr> <tr><td><code>stack</code></td> <td>The ID of the group to which this dataset belongs to (when stacked, each group will be a separate stack). <a href="#stacked-bar-chart">more</a></td></tr> <tr><td><code>xAxisID</code></td> <td>The ID of the x-axis to plot this dataset on.</td></tr> <tr><td><code>yAxisID</code></td> <td>The ID of the y-axis to plot this dataset on.</td></tr></tbody></table> <h3 id="styling"><a href="#styling" class="header-anchor">#</a> Styling</h3> <p>The style of each bar can be controlled with the following properties:</p> <table><thead><tr><th>Name</th> <th>Description</th></tr></thead> <tbody><tr><td><code>backgroundColor</code></td> <td>The bar background color.</td></tr> <tr><td><code>borderColor</code></td> <td>The bar border color.</td></tr> <tr><td><a href="#borderskipped"><code>borderSkipped</code></a></td> <td>The edge to skip when drawing bar.</td></tr> <tr><td><a href="#borderwidth"><code>borderWidth</code></a></td> <td>The bar border width (in pixels).</td></tr> <tr><td><a href="#borderradius"><code>borderRadius</code></a></td> <td>The bar border radius (in pixels).</td></tr> <tr><td><code>minBarLength</code></td> <td>Set this to ensure that bars have a minimum length in pixels.</td></tr> <tr><td><code>pointStyle</code></td> <td>Style of the point for legend. <a href="/docs/3.9.0/configuration/elements.html#point-styles">more...</a></td></tr></tbody></table> <p>All these values, if <code>undefined</code>, fallback to the associated <a href="/docs/3.9.0/configuration/elements.html#bar-configuration"><code>elements.bar.*</code></a> options.</p> <h4 id="borderskipped"><a href="#borderskipped" class="header-anchor">#</a> borderSkipped</h4> <p>This setting is used to avoid drawing the bar stroke at the base of the fill, or disable the border radius. In general, this does not need to be changed except when creating chart types that derive from a bar chart.</p> <div class="custom-block tip"><p class="custom-block-title">Note</p> <p>For negative bars in a vertical chart, <code>top</code> and <code>bottom</code> are flipped. Same goes for <code>left</code> and <code>right</code> in a horizontal chart.</p></div> <p>Options are:</p> <ul><li><code>'start'</code></li> <li><code>'end'</code></li> <li><code>'middle'</code> (only valid on stacked bars: the borders between bars are skipped)</li> <li><code>'bottom'</code></li> <li><code>'left'</code></li> <li><code>'top'</code></li> <li><code>'right'</code></li> <li><code>false</code> (don't skip any borders)</li> <li><code>true</code> (skip all borders)</li></ul> <h4 id="borderwidth"><a href="#borderwidth" class="header-anchor">#</a> borderWidth</h4> <p>If this value is a number, it is applied to all sides of the rectangle (left, top, right, bottom), except <a href="#borderskipped"><code>borderSkipped</code></a>. If this value is an object, the <code>left</code> property defines the left border width. Similarly, the <code>right</code>, <code>top</code>, and <code>bottom</code> properties can also be specified. Omitted borders and <a href="#borderskipped"><code>borderSkipped</code></a> are skipped.</p> <h4 id="borderradius"><a href="#borderradius" class="header-anchor">#</a> borderRadius</h4> <p>If this value is a number, it is applied to all corners of the rectangle (topLeft, topRight, bottomLeft, bottomRight), except corners touching the <a href="