chart.js

Version:

Simple HTML5 charts using the canvas element.

www.chartjs.org

chartjs/Chart.js

112 lines • 83.7 kB

HTML

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>3.x Migration Guide | 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/183.22b2258c.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/143.05e388ba.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/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/3.947b8d98.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"> Chart.js</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">Ecosystem </button> <button type="button" aria-label="Community Menu" class="mobile-dropdown-title">Ecosystem </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 <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> (opens new window)</a></li><li class="dropdown-item"> <a href="https://chartjs-slack.herokuapp.com/" target="_blank" rel="noopener noreferrer" class="nav-link external"> Slack <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> (opens new window)</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 <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> (opens new window)</a></li></ul></div></div> <a href="https://github.com/chartjs/Chart.js" target="_blank" rel="noopener noreferrer" class="repo-link"> GitHub <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> (opens new window)</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">Ecosystem </button> <button type="button" aria-label="Community Menu" class="mobile-dropdown-title">Ecosystem </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 <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> (opens new window)</a></li><li class="dropdown-item"> <a href="https://chartjs-slack.herokuapp.com/" target="_blank" rel="noopener noreferrer" class="nav-link external"> Slack <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> (opens new window)</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 <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> (opens new window)</a></li></ul></div></div> <a href="https://github.com/chartjs/Chart.js" target="_blank" rel="noopener noreferrer" class="repo-link"> GitHub <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> (opens new window)</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">Getting Started <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/3.9.0/getting-started/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><a href="/docs/3.9.0/getting-started/installation.html" class="sidebar-link">Installation</a></li><li><a href="/docs/3.9.0/getting-started/integration.html" class="sidebar-link">Integration</a></li><li><a href="/docs/3.9.0/getting-started/usage.html" class="sidebar-link">Usage</a></li><li><a href="/docs/3.9.0/getting-started/v3-migration.html" aria-current="page" class="active sidebar-link">3.x Migration Guide</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0">General </section></li><li><section class="sidebar-group collapsable depth-0">Configuration </section></li><li><section class="sidebar-group collapsable depth-0">Chart Types </section></li><li><section class="sidebar-group collapsable depth-0">Axes </section></li><li><section class="sidebar-group collapsable depth-0">Developers </section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="_3-x-migration-guide"><a href="#_3-x-migration-guide" class="header-anchor">#</a> 3.x Migration Guide</h1> Chart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released in April 2016. In the years since then, as Chart.js has grown in popularity and feature set, we've learned some lessons about how to better create a charting library. In order to improve performance, offer new features, and improve maintainability, it was necessary to break backwards compatibility, but we aimed to do so only when worth the benefit. Some major highlights of v3 include: <ul><li>Large <a href="/docs/3.9.0/general/performance.html">performance</a> improvements including the ability to skip data parsing and render charts in parallel via webworkers</li> <li>Additional configurability and scriptable options with better defaults</li> <li>Completely rewritten animation system</li> <li>Rewritten filler plugin with numerous bug fixes</li> <li>Documentation migrated from GitBook to Vuepress</li> <li>API documentation generated and verified by TypeDoc</li> <li>No more CSS injection</li> <li>Tons of bug fixes</li> <li>Tree shaking</li></ul> <h2 id="end-user-migration"><a href="#end-user-migration" class="header-anchor">#</a> End user migration</h2> <h3 id="setup-and-installation"><a href="#setup-and-installation" class="header-anchor">#</a> Setup and installation</h3> <ul><li>Distributed files are now in lower case. For example: <code>dist/chart.js</code>.</li> <li>Chart.js is no longer providing the <code>Chart.bundle.js</code> and <code>Chart.bundle.min.js</code>. Please see the <a href="/docs/3.9.0/getting-started/installation.html">installation</a> and <a href="/docs/3.9.0/getting-started/integration.html">integration</a> docs for details on the recommended way to setup Chart.js if you were using these builds.</li> <li><code>moment</code> is no longer specified as an npm dependency. If you are using the <code>time</code> or <code>timeseries</code> scales, you must include one of <a href="https://github.com/chartjs/awesome#adapters" target="_blank" rel="noopener noreferrer">the available adapters<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> (opens new window)</a> and corresponding date library. You no longer need to exclude moment from your build.</li> <li>The <code>Chart</code> constructor will throw an error if the canvas/context provided is already in use</li> <li>Chart.js 3 is tree-shakeable. So if you are using it as an <code>npm</code> module in a project and want to make use of this feature, you need to import and register the controllers, elements, scales and plugins you want to use, for a list of all the available items to import see <a href="/docs/3.9.0/getting-started/integration.html#bundlers-webpack-rollup-etc">integration</a>. You will not have to call <code>register</code> if importing Chart.js via a <code>script</code> tag or from the <a href="/docs/3.9.0/getting-started/integration.html#bundlers-webpack-rollup-etc"><code>auto</code></a> register path as an <code>npm</code> module, in this case you will not get the tree shaking benefits. Here is an example of registering components:</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code>import { Chart, LineController, LineElement, PointElement, LinearScale, Title } from `chart.js` Chart.register(LineController, LineElement, PointElement, LinearScale, Title); const chart = new Chart(ctx, { type: 'line', // data: ... options: { plugins: { title: { display: true, text: 'Chart Title' } }, scales: { x: { type: 'linear' }, y: { type: 'linear' } } } }) </code></pre></div><h3 id="chart-types"><a href="#chart-types" class="header-anchor">#</a> Chart types</h3> <ul><li><code>horizontalBar</code> chart type was removed. Horizontal bar charts can be configured using the new <a href="/docs/3.9.0/charts/bar.html#horizontal-bar-chart"><code>indexAxis</code></a> option</li></ul> <h3 id="options"><a href="#options" class="header-anchor">#</a> Options</h3> A number of changes were made to the configuration options passed to the <code>Chart</code> constructor. Those changes are documented below. <h4 id="generic-changes"><a href="#generic-changes" class="header-anchor">#</a> Generic changes</h4> <ul><li>Indexable options are now looping. <code>backgroundColor: ['red', 'green']</code> will result in alternating <code>'red'</code> / <code>'green'</code> if there are more than 2 data points.</li> <li>The input properties of object data can now be freely specified, see <a href="/docs/3.9.0/general/data-structures.html">data structures</a> for details.</li> <li>Most options are resolved utilizing proxies, instead of merging with defaults. In addition to easily enabling different resolution routes for different contexts, it allows using other resolved options in scriptable options. <ul><li>Options are by default scriptable and indexable, unless disabled for some reason.</li> <li>Scriptable options receive a option resolver as second parameter for accessing other options in same context.</li> <li>Resolution falls to upper scopes, if no match is found earlier. See <a href="/docs/3.9.0/general/options.html">options</a> for details.</li></ul></li></ul> <h4 id="specific-changes"><a href="#specific-changes" class="header-anchor">#</a> Specific changes</h4> <ul><li><code>elements.rectangle</code> is now <code>elements.bar</code></li> <li><code>hover.animationDuration</code> is now configured in <code>animation.active.duration</code></li> <li><code>responsiveAnimationDuration</code> is now configured in <code>animation.resize.duration</code></li> <li>Polar area <code>elements.arc.angle</code> is now configured in degrees instead of radians.</li> <li>Polar area <code>startAngle</code> option is now consistent with <code>Radar</code>, 0 is at top and value is in degrees. Default is changed from <code>-½π</code> to <code>0</code>.</li> <li>Doughnut <code>rotation</code> option is now in degrees and 0 is at top. Default is changed from <code>-½π</code> to <code>0</code>.</li> <li>Doughnut <code>circumference</code> option is now in degrees. Default is changed from <code>2π</code> to <code>360</code>.</li> <li>Doughnut <code>cutoutPercentage</code> was renamed to <code>cutout</code>and accepts pixels as number and percent as string ending with <code>%</code>.</li> <li><code>scale</code> option was removed in favor of <code>options.scales.r</code> (or any other scale id, with <code>axis: 'r'</code>)</li> <li><code>scales.[x/y]Axes</code> arrays were removed. Scales are now configured directly to <code>options.scales</code> object with the object key being the scale Id.</li> <li><code>scales.[x/y]Axes.barPercentage</code> was moved to dataset option <code>barPercentage</code></li> <li><code>scales.[x/y]Axes.barThickness</code> was moved to dataset option <code>barThickness</code></li> <li><code>scales.[x/y]Axes.categoryPercentage</code> was moved to dataset option <code>categoryPercentage</code></li> <li><code>scales.[x/y]Axes.maxBarThickness</code> was moved to dataset option <code>maxBarThickness</code></li> <li><code>scales.[x/y]Axes.minBarLength</code> was moved to dataset option <code>minBarLength</code></li> <li><code>scales.[x/y]Axes.scaleLabel</code> was renamed to <code>scales[id].title</code></li> <li><code>scales.[x/y]Axes.scaleLabel.labelString</code> was renamed to <code>scales[id].title.text</code></li> <li><code>scales.[x/y]Axes.ticks.beginAtZero</code> was renamed to <code>scales[id].beginAtZero</code></li> <li><code>scales.[x/y]Axes.ticks.max</code> was renamed to <code>scales[id].max</code></li> <li><code>scales.[x/y]Axes.ticks.min</code> was renamed to <code>scales[id].min</code></li> <li><code>scales.[x/y]Axes.ticks.reverse</code> was renamed to <code>scales[id].reverse</code></li> <li><code>scales.[x/y]Axes.ticks.suggestedMax</code> was renamed to <code>scales[id].suggestedMax</code></li> <li><code>scales.[x/y]Axes.ticks.suggestedMin</code> was renamed to <code>scales[id].suggestedMin</code></li> <li><code>scales.[x/y]Axes.ticks.unitStepSize</code> was removed. Use <code>scales[id].ticks.stepSize</code></li> <li><code>scales.[x/y]Axes.ticks.userCallback</code> was renamed to <code>scales[id].ticks.callback</code></li> <li><code>scales.[x/y]Axes.time.format</code> was renamed to <code>scales[id].time.parser</code></li> <li><code>scales.[x/y]Axes.time.max</code> was renamed to <code>scales[id].max</code></li> <li><code>scales.[x/y]Axes.time.min</code> was renamed to <code>scales[id].min</code></li> <li><code>scales.[x/y]Axes.zeroLine*</code> options of axes were removed. Use scriptable scale options instead.</li> <li>The dataset option <code>steppedLine</code> was removed. Use <code>stepped</code></li> <li>The chart option <code>showLines</code> was renamed to <code>showLine</code> to match the dataset option.</li> <li>The chart option <code>startAngle</code> was moved to <code>radial</code> scale options.</li> <li>To override the platform class used in a chart instance, pass <code>platform: PlatformClass</code> in the config object. Note that the class should be passed, not an instance of the class.</li> <li><code>aspectRatio</code> defaults to 1 for doughnut, pie, polarArea, and radar charts</li> <li><code>TimeScale</code> does not read <code>t</code> from object data by default anymore. The default property is <code>x</code> or <code>y</code>, depending on the orientation. See <a href="/docs/3.9.0/general/data-structures.html">data structures</a> for details on how to change the default.</li> <li><code>tooltips</code> namespace was renamed to <code>tooltip</code> to match the plugin name</li> <li><code>legend</code>, <code>title</code> and <code>tooltip</code> namespaces were moved from <code>options</code> to <code>options.plugins</code>.</li> <li><code>tooltips.custom</code> was renamed to <code>plugins.tooltip.external</code></li></ul> <h4 id="defaults"><a href="#defaults" class="header-anchor">#</a> Defaults</h4> <ul><li><code>global</code> namespace was removed from <code>defaults</code>. So <code>Chart.defaults.global</code> is now <code>Chart.defaults</code></li> <li>Dataset controller defaults were relocate to <code>overrides</code>. For example <code>Chart.defaults.line</code> is now <code>Chart.overrides.line</code></li> <li><code>default</code> prefix was removed from defaults. For example <code>Chart.defaults.global.defaultColor</code> is now <code>Chart.defaults.color</code></li> <li><code>defaultColor</code> was split to <code>color</code>, <code>borderColor</code> and <code>backgroundColor</code></li> <li><code>defaultFontColor</code> was renamed to <code>color</code></li> <li><code>defaultFontFamily</code> was renamed to <code>font.family</code></li> <li><code>defaultFontSize</code> was renamed to <code>font.size</code></li> <li><code>defaultFontStyle</code> was renamed to <code>font.style</code></li> <li><code>defaultLineHeight</code> was renamed to <code>font.lineHeight</code></li> <li>Horizontal Bar default tooltip mode was changed from <code>'index'</code> to <code>'nearest'</code> to match vertical bar charts</li> <li><code>legend</code>, <code>title</code> and <code>tooltip</code> namespaces were moved from <code>Chart.defaults</code> to <code>Chart.defaults.plugins</code>.</li> <li><code>elements.line.fill</code> default changed from <code>true</code> to <code>false</code>.</li> <li>Line charts no longer override the default <code>interaction</code> mode. Default is changed from <code>'index'</code> to <code>'nearest'</code>.</li></ul> <h4 id="scales"><a href="#scales" class="header-anchor">#</a> Scales</h4> The configuration options for scales is the largest change in v3. The <code>xAxes</code> and <code>yAxes</code> arrays were removed and axis options are individual scales now keyed by scale ID. The v2 configuration below is shown with it's new v3 configuration <div class="language-javascript extra-class"><pre class="language-javascript"><code>options: { scales: { xAxes: [{ id: 'x', type: 'time', display: true, title: { display: true, text: 'Date' }, ticks: { major: { enabled: true }, font: function(context) { if (context.tick && context.tick.major) { return { weight: 'bold', color: '#FF0000' }; } } } }], yAxes: [{ id: 'y', display: true, title: { display: true, text: 'value' } }] } } </code></pre></div>And now, in v3: <div class="language-javascript extra-class"><pre class="language-javascript"><code>options: { scales: { x: { type: 'time', display: true, title: { display: true, text: 'Date' }, ticks: { major: { enabled: true }, color: <span c