chart.js
Version:
Simple HTML5 charts using the canvas element.
54 lines (53 loc) • 34.1 kB
HTML
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Data Decimation | 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/153.0f168375.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/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/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"> <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 open"><span>Configuration</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/3.9.0/configuration/" aria-current="page" class="sidebar-link">Configuration</a></li><li><a href="/docs/3.9.0/configuration/animations.html" class="sidebar-link">Animations</a></li><li><a href="/docs/3.9.0/configuration/canvas-background.html" class="sidebar-link">Canvas background</a></li><li><a href="/docs/3.9.0/configuration/decimation.html" aria-current="page" class="active sidebar-link">Data Decimation</a></li><li><a href="/docs/3.9.0/configuration/device-pixel-ratio.html" class="sidebar-link">Device Pixel Ratio</a></li><li><a href="/docs/3.9.0/configuration/elements.html" class="sidebar-link">Elements</a></li><li><a href="/docs/3.9.0/configuration/interactions.html" class="sidebar-link">Interactions</a></li><li><a href="/docs/3.9.0/configuration/layout.html" class="sidebar-link">Layout</a></li><li><a href="/docs/3.9.0/configuration/legend.html" class="sidebar-link">Legend</a></li><li><a href="/docs/3.9.0/configuration/locale.html" class="sidebar-link">Locale</a></li><li><a href="/docs/3.9.0/configuration/responsive.html" class="sidebar-link">Responsive Charts</a></li><li><a href="/docs/3.9.0/configuration/subtitle.html" class="sidebar-link">Subtitle</a></li><li><a href="/docs/3.9.0/configuration/title.html" class="sidebar-link">Title</a></li><li><a href="/docs/3.9.0/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></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="data-decimation"><a href="#data-decimation" class="header-anchor">#</a> Data Decimation</h1> <p>The decimation plugin can be used with line charts to automatically decimate data at the start of the chart lifecycle. Before enabling this plugin, review the <a href="#requirements">requirements</a> to ensure that it will work with the chart you want to create.</p> <h2 id="configuration-options"><a href="#configuration-options" class="header-anchor">#</a> Configuration Options</h2> <p>Namespace: <code>options.plugins.decimation</code>, the global options for the plugin are defined in <code>Chart.defaults.plugins.decimation</code>.</p> <table><thead><tr><th>Name</th> <th>Type</th> <th>Default</th> <th>Description</th></tr></thead> <tbody><tr><td><code>enabled</code></td> <td><code>boolean</code></td> <td><code>false</code></td> <td>Is decimation enabled?</td></tr> <tr><td><code>algorithm</code></td> <td><code>string</code></td> <td><code>'min-max'</code></td> <td>Decimation algorithm to use. See the <a href="#decimation-algorithms">more...</a></td></tr> <tr><td><code>samples</code></td> <td><code>number</code></td> <td></td> <td>If the <code>'lttb'</code> algorithm is used, this is the number of samples in the output dataset. Defaults to the canvas width to pick 1 sample per pixel.</td></tr> <tr><td><code>threshold</code></td> <td><code>number</code></td> <td></td> <td>If the number of samples in the current axis range is above this value, the decimation will be triggered. Defaults to 4 times the canvas width.<br>The number of point after decimation can be higher than the <code>threshold</code> value.</td></tr></tbody></table> <h2 id="decimation-algorithms"><a href="#decimation-algorithms" class="header-anchor">#</a> Decimation Algorithms</h2> <p>Decimation algorithm to use for data. Options are:</p> <ul><li><code>'lttb'</code></li> <li><code>'min-max'</code></li></ul> <h3 id="largest-triangle-three-bucket-lttb-decimation"><a href="#largest-triangle-three-bucket-lttb-decimation" class="header-anchor">#</a> Largest Triangle Three Bucket (LTTB) Decimation</h3> <p><a href="https://github.com/sveinn-steinarsson/flot-downsample" target="_blank" rel="noopener noreferrer">LTTB<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> decimation reduces the number of data points significantly. This is most useful for showing trends in data using only a few data points.</p> <h3 id="min-max-decimation"><a href="#min-max-decimation" class="header-anchor">#</a> Min/Max Decimation</h3> <p><a href="https://digital.ni.com/public.nsf/allkb/F694FFEEA0ACF282862576020075F784" target="_blank" rel="noopener noreferrer">Min/max<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> decimation will preserve peaks in your data but could require up to 4 points for each pixel. This type of decimation would work well for a very noisy signal where you need to see data peaks.</p> <h2 id="requirements"><a href="#requirements" class="header-anchor">#</a> Requirements</h2> <p>To use the decimation plugin, the following requirements must be met:</p> <ol><li>The dataset must have an <a href="/docs/3.9.0/charts/line.html#general"><code>indexAxis</code></a> of <code>'x'</code></li> <li>The dataset must be a line</li> <li>The X axis for the dataset must be either a <a href="/docs/3.9.0/axes/cartesian/linear.html"><code>'linear'</code></a> or <a href="/docs/3.9.0/axes/cartesian/time.html"><code>'time'</code></a> type axis</li> <li>Data must not need parsing, i.e. <a href="/docs/3.9.0/general/data-structures.html#dataset-configuration"><code>parsing</code></a> must be <code>false</code></li> <li>The dataset object must be mutable. The plugin stores the original data as <code>dataset._data</code> and then defines a new <code>data</code> property on the dataset.</li> <li>There must be more points on the chart than the threshold value. Take a look at the Configuration Options for more information.</li></ol> <h2 id="related-samples"><a href="#related-samples" class="header-anchor">#</a> Related Samples</h2> <ul><li><a href="../samples/advanced/data-decimation">Data Decimation Sample</a></li></ul></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">8/2/2022, 12:54:45 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/docs/3.9.0/configuration/canvas-background.html" class="prev">
Canvas background
</a></span> <span class="next"><a href="/docs/3.9.0/configuration/device-pixel-ratio.html">
Device Pixel Ratio
</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/docs/3.9.0/assets/js/app.b5254226.js" defer></script><script src="/docs/3.9.0/assets/js/2.3e2307f3.js" defer></script><script src="/docs/3.9.0/assets/js/153.0f168375.js" defer></script>
</body>
</html>