docs/3.6.0/general/data-structures.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Data structures | Chart.js</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/docs/3.6.0/favicon.ico">
    <meta name="description" content="Open source HTML5 Charts for your website">
    <link rel="preload" href="/docs/3.6.0/assets/css/0.styles.e9288f6d.css" as="style"><link rel="preload" href="/docs/3.6.0/assets/js/app.9e2e0c27.js" as="script"><link rel="preload" href="/docs/3.6.0/assets/js/2.413130e4.js" as="script"><link rel="preload" href="/docs/3.6.0/assets/js/166.a0eb5387.js" as="script"><link rel="prefetch" href="/docs/3.6.0/assets/js/10.6dfb790a.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/100.bdd75344.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/101.ba367fb0.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/102.ba2d17be.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/103.cc35165b.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/104.24be1e4a.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/105.ab31de8a.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/106.61621460.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/107.74760d7a.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/108.ff24790e.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/109.f75eea78.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/11.16ca5bd5.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/110.cc49c856.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/111.929232ea.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/112.0d1f36c4.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/113.f8e5fa36.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/114.930504ae.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/115.d15abee3.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/116.507c5260.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/117.0dd30a72.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/118.0a1bd260.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/119.a020afba.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/12.477bac1e.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/120.88c9bb2a.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/121.57f2afcd.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/122.ecbd959b.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/123.0167f472.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/124.3952d98c.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/125.5a5b3ada.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/126.2b7b4f00.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/127.6922b0dd.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/128.e7bff904.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/129.3e85b746.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/13.e6be73be.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/130.a7a6f5f6.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/131.341f8021.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/132.8e3e933e.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/133.9bc0e294.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/134.cb9a47e6.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/135.1558393c.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/136.ed2733f9.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/137.602cd57e.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/138.d6b7cc34.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/139.8e8cfa43.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/14.2622ab43.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/140.9168d68d.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/141.e1750e91.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/142.bf90fea8.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/143.140724b4.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/144.9df4d6c8.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/145.febfa863.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/146.c5f7eed6.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/147.f8b34fd3.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/148.66650264.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/149.548f7f47.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/15.fa4073d4.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/150.22bcb98a.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/151.7a18cf24.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/152.576ca86f.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/153.935a1a3a.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/154.9f539141.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/155.7ba95295.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/156.f7b18248.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/157.04691de9.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/158.10f960a6.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/159.0a54b3ca.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/16.70954847.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/160.af7a9b32.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/161.5f91782b.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/162.4c2c012f.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/163.6c636d91.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/164.ab75b328.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/165.74486c25.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/167.9c65115c.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/168.05f39c90.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/169.6c43f346.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/17.bc67fe6b.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/170.75a9c877.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/171.c57ea92b.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/172.e69e2ca2.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/173.75190231.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/174.f2b294bf.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/175.654247ab.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/176.a33e24b6.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/177.932d58bd.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/178.1ca92550.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/179.b55a1088.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/18.bcc8fc02.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/180.5fa50b39.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/181.08259b6b.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/182.635cbc1d.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/183.96eb23ea.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/184.1dee1078.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/185.e4916e00.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/186.977d0bc2.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/187.e192c538.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/188.02954f34.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/189.c122d4be.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/19.5f10396f.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/190.00f0c825.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/191.1a7c933b.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/192.07b7481f.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/193.58e47739.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/194.c453ca1e.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/195.47f1afb8.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/196.a9222744.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/197.1554ddee.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/198.562465e5.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/199.d8dd2c1f.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/20.228858c0.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/200.c69bf0b5.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/201.2581238c.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/202.84102ce9.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/203.a341ade1.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/204.29323d7a.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/205.8af74f44.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/206.762955e7.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/207.f853dacd.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/208.ee28ab72.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/209.b0885a32.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/21.d5dc4444.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/210.8a5a5911.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/211.a3ef65af.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/212.bd46dbb9.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/213.b8c54237.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/214.df27b726.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/215.85c697fb.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/216.61ec2674.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/217.14961fc6.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/218.04d8b030.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/219.576f8b72.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/22.2d32ff66.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/220.140b3613.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/221.9fe46c72.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/222.79bb4a05.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/223.3a4e01a3.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/224.b11fa2e0.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/225.677fa636.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/226.a7401e20.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/227.57fb74d8.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/228.519888ba.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/229.a6e4c2e9.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/23.6a0a2cf0.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/230.f5d1afeb.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/231.82b4fcc4.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/232.60505c4f.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/233.66be9100.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/234.67d740dd.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/235.d8d9cf9d.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/236.3ababf21.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/237.00eee225.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/238.afaa4f77.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/239.d212f322.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/24.9ab92e4a.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/240.467895df.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/241.4f2e5ac2.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/242.cf853b19.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/243.d1fd2e57.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/244.97c14ba6.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/245.22248a90.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/246.0dc382c4.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/247.06b54759.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/248.84470849.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/25.c16acb1a.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/26.bea3173a.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/27.9b097070.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/28.81e344ec.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/29.7f1712b5.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/3.e2fd7cce.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/30.938a2116.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/31.851d350b.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/32.b48cff30.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/33.47bb255c.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/34.37d64e95.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/35.20a0c166.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/36.a4d58709.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/37.8cdf3de2.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/38.6999c87b.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/39.e1723901.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/4.cfb630b3.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/40.351414e1.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/41.5e191798.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/42.bb6e8369.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/43.416254d9.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/44.b0e6fa7d.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/45.6cb12679.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/46.51592b33.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/47.e2ea80a9.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/48.f95272d8.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/49.2e0316c7.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/5.af43cbd6.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/50.5a3acd36.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/51.54f2c66d.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/52.0a4fbf85.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/53.a1dc450b.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/54.6e6b0601.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/55.a7857386.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/56.4d991362.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/57.38437a25.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/58.843f5505.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/59.38549295.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/6.3a712537.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/60.cb1249b7.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/61.53e24899.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/62.d394c6c7.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/63.00983bf2.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/64.40d9d9e1.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/65.cb2d7569.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/66.bae63537.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/67.77f94f4a.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/68.a0d8c364.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/69.07a31afe.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/7.5ce46ca3.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/70.536ccdf5.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/71.b4fb3150.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/72.4827ad4d.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/73.ff392d10.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/74.62b061c0.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/75.ba30b227.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/76.a75ea098.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/77.bce5bf58.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/78.e65e12aa.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/79.a6018e48.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/8.eabe9f87.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/80.8743e16a.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/81.17c55db2.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/82.940ec6fb.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/83.66c8c37c.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/84.75ac6611.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/85.cc35c79f.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/86.51c61428.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/87.08f8b621.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/88.3e40b7ec.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/89.8ca8029b.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/9.8cf9b79d.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/90.0bd52d28.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/91.afad75bd.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/92.9bb18dd0.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/93.dc287a42.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/94.5de73505.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/95.cc51922d.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/96.373045c6.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/97.a9ccddd7.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/98.955e5754.js"><link rel="prefetch" href="/docs/3.6.0/assets/js/99.8fa9e703.js">
    <link rel="stylesheet" href="/docs/3.6.0/assets/css/0.styles.e9288f6d.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.6.0/" class="home-link router-link-active"><img src="/docs/3.6.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.6.0/" class="nav-link">
  Home
</a></div><div class="nav-item"><a href="/docs/3.6.0/api/" class="nav-link">
  API
</a></div><div class="nav-item"><a href="/docs/3.6.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.6.0/" class="nav-link">
  Home
</a></div><div class="nav-item"><a href="/docs/3.6.0/api/" class="nav-link">
  API
</a></div><div class="nav-item"><a href="/docs/3.6.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.6.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 open"><span>General</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/3.6.0/general/data-structures.html" aria-current="page" class="active sidebar-link">Data structures</a></li><li><a href="/docs/3.6.0/general/accessibility.html" class="sidebar-link">Accessibility</a></li><li><a href="/docs/3.6.0/general/options.html" class="sidebar-link">Options</a></li><li><a href="/docs/3.6.0/general/colors.html" class="sidebar-link">Colors</a></li><li><a href="/docs/3.6.0/general/fonts.html" class="sidebar-link">Fonts</a></li><li><a href="/docs/3.6.0/general/padding.html" class="sidebar-link">Padding</a></li><li><a href="/docs/3.6.0/general/performance.html" class="sidebar-link">Performance</a></li></ul></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"><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-structures"><a href="#data-structures" class="header-anchor">#</a> Data structures</h1> <p>The <code>data</code> property of a dataset can be passed in various formats. By default, that <code>data</code> is parsed using the associated chart type and scales.</p> <p>If the <code>labels</code> property of the main <code>data</code> property is used, it has to contain the same amount of elements as the dataset with the most values. These labels are used to label the index axis (default x axes). The values for the labels have to be provided in an array.
The provides labels can be of the type string or number to be rendered correctly. In case you want multiline labels you can provide an array with each line as one entry in the array.</p> <h2 id="primitive"><a href="#primitive" class="header-anchor">#</a> Primitive[]</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code>data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
labels<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">]</span>
</code></pre></div><p>When the <code>data</code> is an array of numbers, values from <code>labels</code> array at the same index are used for the index axis (<code>x</code> for vertical, <code>y</code> for horizontal charts).</p> <h2 id="object"><a href="#object" class="header-anchor">#</a> Object[]</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code>data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>x<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>x<span class="token operator">:</span> <span class="token number">15</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>x<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">]</span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code>data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>x<span class="token operator">:</span><span class="token string">'2016-12-25'</span><span class="token punctuation">,</span> y<span class="token operator">:</span><span class="token number">20</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>x<span class="token operator">:</span><span class="token string">'2016-12-26'</span><span class="token punctuation">,</span> y<span class="token operator">:</span><span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">]</span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code>data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>x<span class="token operator">:</span><span class="token string">'Sales'</span><span class="token punctuation">,</span> y<span class="token operator">:</span><span class="token number">20</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>x<span class="token operator">:</span><span class="token string">'Revenue'</span><span class="token punctuation">,</span> y<span class="token operator">:</span><span class="token number">10</span><span class="token punctuation">}</span><span class="token punctuation">]</span>
</code></pre></div><p>This is also the internal format used for parsed data. In this mode, parsing can be disabled by specifying <code>parsing: false</code> at chart options or dataset. If parsing is disabled, data must be sorted and in the formats the associated chart type and scales use internally.</p> <p>The values provided must be parsable by the associated scales or in the internal format of the associated scales. A common mistake would be to provide integers for the <code>category</code> scale, which uses integers as an internal format, where each integer represents an index in the labels array. <code>null</code> can be used for skipped values.</p> <h2 id="object-using-custom-properties"><a href="#object-using-custom-properties" class="header-anchor">#</a> Object[] using custom properties</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code>type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
data<span class="token operator">:</span> <span class="token punctuation">{</span>
    datasets<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token string">'Sales'</span><span class="token punctuation">,</span> nested<span class="token operator">:</span> <span class="token punctuation">{</span>value<span class="token operator">:</span> <span class="token number">1500</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token string">'Purchases'</span><span class="token punctuation">,</span> nested<span class="token operator">:</span> <span class="token punctuation">{</span>value<span class="token operator">:</span> <span class="token number">500</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><span class="token punctuation">,</span>
options<span class="token operator">:</span> <span class="token punctuation">{</span>
    parsing<span class="token operator">:</span> <span class="token punctuation">{</span>
        xAxisKey<span class="token operator">:</span> <span class="token string">'id'</span><span class="token punctuation">,</span>
        yAxisKey<span class="token operator">:</span> <span class="token string">'nested.value'</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>When using the pie/doughnut chart type, the <code>parsing</code> object should have a <code>key</code> item that points to the value to look at. In this example, the doughnut chart will show two items with values 1500 and 500.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>type<span class="token operator">:</span> <span class="token string">'doughnut'</span><span class="token punctuation">,</span>
data<span class="token operator">:</span> <span class="token punctuation">{</span>
    datasets<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
        data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token string">'Sales'</span><span class="token punctuation">,</span> nested<span class="token operator">:</span> <span class="token punctuation">{</span>value<span class="token operator">:</span> <span class="token number">1500</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>id<span class="token operator">:</span> <span class="token string">'Purchases'</span><span class="token punctuation">,</span> nested<span class="token operator">:</span> <span class="token punctuation">{</span>value<span class="token operator">:</span> <span class="token number">500</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><span class="token punctuation">,</span>
options<span class="token operator">:</span> <span class="token punctuation">{</span>
    parsing<span class="token operator">:</span> <span class="token punctuation">{</span>
        key<span class="token operator">:</span> <span class="token string">'nested.value'</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="object-2"><a href="#object-2" class="header-anchor">#</a> Object</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code>data<span class="token operator">:</span> <span class="token punctuation">{</span>
    January<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
    February<span class="token operator">:</span> <span class="token number">20</span>
<span class="token punctuation">}</span>
</code></pre></div><p>In this mode, property name is used for <code>index</code> scale and value for <code>value</code> scale. For vertical charts, index scale is <code>x</code> and value scale is <code>y</code>.</p> <h2 id="dataset-configuration"><a href="#dataset-configuration" class="header-anchor">#</a> Dataset Configuration</h2> <table><thead><tr><th>Name</th> <th>Type</th> <th>Description</th></tr></thead> <tbody><tr><td><code>label</code></td> <td><code>string</code></td> <td>The label for the dataset which appears in the legend and tooltips.</td></tr> <tr><td><code>clip</code></td> <td><code>number</code>|<code>object</code></td> <td>How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. 0 = clip at chartArea. Clipping can also be configured per side: clip: {left: 5, top: false, right: -2, bottom: 0}</td></tr> <tr><td><code>order</code></td> <td><code>number</code></td> <td>The drawing order of dataset. Also affects order for stacking, tooltip and legend.</td></tr> <tr><td><code>stack</code></td> <td><code>string</code></td> <td>The ID of the group to which this dataset belongs to (when stacked, each group will be a separate stack). Defaults to dataset <code>type</code>.</td></tr> <tr><td><code>parsing</code></td> <td><code>boolean</code>|<code>object</code></td> <td>How to parse the dataset. The parsing can be disabled by specifying parsing: false at chart options or dataset. If parsing is disabled, data must be sorted and in the formats the associated chart type and scales use internally.</td></tr> <tr><td><code>hidden</code></td> <td><code>boolean</code></td> <td>Configure the visibility of the dataset. Using <code>hidden: true</code> will hide the dataset from being rendered in the Chart.</td></tr></tbody></table> <h3 id="parsing"><a href="#parsing" class="header-anchor">#</a> parsing</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>x<span class="token operator">:</span> <span class="token string">'Jan'</span><span class="token punctuation">,</span> net<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span> cogs<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span> gm<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>x<span class="token operator">:</span> <span class="token string">'Feb'</span><span class="token punctuation">,</span> net<span class="token operator">:</span> <span class="token number">120</span><span class="token punctuation">,</span> cogs<span class="token operator">:</span> <span class="token number">55</span><span class="token punctuation">,</span> gm<span class="token operator">:</span> <span class="token number">75</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> cfg <span class="token operator">=</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
    data<span class="token operator">:</span> <span class="token punctuation">{</span>
        labels<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Jan'</span><span class="token punctuation">,</span> <span class="token string">'Feb'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        datasets<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
            label<span class="token operator">:</span> <span class="token string">'Net sales'</span><span class="token punctuation">,</span>
            data<span class="token operator">:</span> data<span class="token punctuation">,</span>
            parsing<span class="token operator">:</span> <span class="token punctuation">{</span>
                yAxisKey<span class="token operator">:</span> <span class="token string">'net'</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
            label<span class="token operator">:</span> <span class="token string">'Cost of goods sold'</span><span class="token punctuation">,</span>
            data<span class="token operator">:</span> data<span class="token punctuation">,</span>
            parsing<span class="token operator">:</span> <span class="token punctuation">{</span>
                yAxisKey<span class="token operator">:</span> <span class="token string">'cogs'</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
            label<span class="token operator">:</span> <span class="token string">'Gross margin'</span><span class="token punctuation">,</span>
            data<span class="token operator">:</span> data<span class="token punctuation">,</span>
            parsing<span class="token operator">:</span> <span class="token punctuation">{</span>
                yAxisKey<span class="token operator">:</span> <span class="token string">'gm'</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><span class="token punctuation">;</span>
</code></pre></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">10/23/2021, 5:21:28 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/docs/3.6.0/getting-started/v3-migration.html" class="prev">
        3.x Migration Guide
      </a></span> <span class="next"><a href="/docs/3.6.0/general/accessibility.html">
        Accessibility
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/docs/3.6.0/assets/js/app.9e2e0c27.js" defer></script><script src="/docs/3.6.0/assets/js/2.413130e4.js" defer></script><script src="/docs/3.6.0/assets/js/166.a0eb5387.js" defer></script>
  </body>
</html>