docs/4.2.0/configuration/interactions.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Interactions | Chart.js</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="/docs/4.2.0/favicon.ico">
    <meta name="description" content="Open source HTML5 Charts for your website">
    <link rel="preload" href="/docs/4.2.0/assets/css/0.styles.09d849d4.css" as="style"><link rel="preload" href="/docs/4.2.0/assets/js/app.2a761adc.js" as="script"><link rel="preload" href="/docs/4.2.0/assets/js/2.861276ab.js" as="script"><link rel="preload" href="/docs/4.2.0/assets/js/159.dbf15a4c.js" as="script"><link rel="prefetch" href="/docs/4.2.0/assets/js/10.a05d7e0c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/100.89490107.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/101.57734ea8.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/102.dfc0dcf8.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/103.5912eead.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/104.a8187c37.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/105.aabb7deb.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/106.e1c47c0f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/107.8992624b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/108.1eea7159.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/109.f1ff2d62.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/11.f7bad5a0.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/110.fc03989e.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/111.f5755117.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/112.4453f2a2.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/113.08ae2e84.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/114.aebac720.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/115.eee0aa91.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/116.7ebd40e6.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/117.5d6d5a55.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/118.b8470c87.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/119.cb690b9b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/12.cb7c4244.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/120.a3212b09.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/121.2480ab16.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/122.61598676.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/123.2a8d7f21.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/124.1820704f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/125.7dbf29de.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/126.a426029d.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/127.bc2116b8.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/128.5c59f6e1.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/129.314bdfd7.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/13.053d9dff.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/130.d6962c21.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/131.ce5db374.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/132.dec9426b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/133.98ab4549.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/134.448bd652.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/135.2ccc6f2c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/136.ea3ab3eb.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/137.4979ab54.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/138.5d520cd6.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/139.a11ab50b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/14.cf610a52.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/140.37ff850f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/141.0de8dae3.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/142.2cdc718c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/143.b6af671e.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/144.6c2a6751.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/145.09998dec.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/146.41e2f439.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/147.10ef67f3.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/148.3c216a2b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/149.f3fb1825.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/15.6218b5d1.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/150.35a29121.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/151.aa8bccd6.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/152.a3e249b4.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/153.93337f75.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/154.dae7ac5c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/155.a81a81b3.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/156.fd49e9cc.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/157.afd61f6f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/158.28f48c60.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/16.cd3bf63f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/160.4e4fc254.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/161.7b44b3ff.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/162.86e4cf82.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/163.dec95c6e.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/164.f29d866b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/165.10c299c5.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/166.188135a3.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/167.88f33f61.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/168.88e1fa79.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/169.b1738dff.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/17.630a3f30.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/170.d6c768e6.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/171.d2f2b7d5.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/172.df0b9c16.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/173.96f5ecf7.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/174.7cd51a8f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/175.cf4bfbb9.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/176.35eb21b1.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/177.64aba024.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/178.bb4bd234.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/179.53a07812.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/18.d12e630c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/180.c6b049aa.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/181.3461456c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/182.68686681.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/183.c4a256ac.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/184.519fddcd.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/185.0c0250ea.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/186.88ad6e71.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/187.d1a5afcd.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/188.38857f67.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/189.175975e3.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/19.37504f49.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/190.e124002b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/191.3ea32821.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/192.9d3b1a4b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/193.9b2fbf0c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/194.cb897c1e.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/195.4a8f8c46.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/196.a2ead6aa.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/197.e843566a.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/198.46f8b836.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/199.655feb75.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/20.bf9d98d1.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/200.e20644df.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/201.ffb93323.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/202.a6d824ae.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/203.2b1c70de.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/204.b2808a1c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/205.f342b1be.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/206.c9ba8742.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/207.68f27ca4.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/208.86598e0b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/209.ed3eb7b2.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/21.afc40a56.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/210.f23857fa.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/211.280caeca.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/212.613e0f4b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/213.8f516e38.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/214.fa5ab79e.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/215.24b3bd89.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/216.8f01b739.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/217.7bf3bb2e.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/218.d7e05502.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/219.7af47c97.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/22.22dfbfd7.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/220.0b0a8104.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/221.c7f2818f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/222.4c01ac24.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/223.c81c3207.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/224.7c61c931.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/225.115979ae.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/226.fb27cdb4.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/227.ef084abd.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/228.2dccdd2f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/229.75284e9b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/23.863a43f1.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/230.bc3c7749.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/231.0ec0f572.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/232.0cc9a19b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/233.d79e6e40.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/234.91b4716f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/235.0db113c9.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/236.c223f39c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/237.c529d9e9.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/238.2940dd31.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/239.853793ba.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/24.c2b5516a.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/240.8a7dbacb.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/241.b88ec1eb.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/242.e54f9301.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/243.54284a32.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/244.6e4df8ee.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/245.6596ac5d.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/246.a7a0756d.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/247.89041f4f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/248.37fa605a.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/249.18983e35.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/25.b6eaa9d8.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/250.01c032f1.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/251.ca4cfd5c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/252.9d7752a4.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/253.3d26ab69.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/254.a1f8b18d.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/255.bde6fa8f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/256.d62b2908.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/257.9158249b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/258.2a0729c9.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/259.c9f744ed.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/26.d86f5ae5.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/260.c74ab442.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/261.ef5a63c2.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/27.e351b7af.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/28.01cde6cc.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/29.37faf424.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/3.6e775090.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/30.d3e439e8.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/31.920fca64.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/32.a5a9a694.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/33.beda47c3.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/34.de161d38.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/35.78ca1001.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/36.435fd9f5.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/37.edeb1fd6.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/38.159ddd60.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/39.feeedcda.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/4.f6321c8c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/40.d228233a.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/41.8fba39ea.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/42.4ebb2766.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/43.ef1a4eb6.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/44.644835bb.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/45.fb380d41.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/46.a62f6fbe.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/47.95863938.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/48.293b077d.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/49.c4c71be0.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/5.070da527.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/50.53ce3a86.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/51.3314d1b8.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/52.93b2ff3c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/53.d1ab001c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/54.ef414805.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/55.73ea66a1.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/56.f002f8ef.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/57.c975f130.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/58.a7ef3bba.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/59.b8f267ee.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/6.4adc3e14.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/60.ef230479.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/61.e50f089f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/62.401b5fa8.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/63.5d4c5f22.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/64.8388673a.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/65.f17778ac.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/66.2c982971.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/67.04a08f9b.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/68.3f6ec213.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/69.8c8d9f4f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/7.4d1b3ed0.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/70.c0877897.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/71.f420cca2.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/72.fa40c09a.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/73.f31cdfad.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/74.9012e43f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/75.12396757.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/76.9596b6a0.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/77.8b24cefd.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/78.e865ec81.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/79.85e0b2b4.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/8.d1642230.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/80.c5278c7d.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/81.d785573e.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/82.8a3b580f.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/83.9865d7f9.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/84.3e20e85c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/85.e299518a.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/86.d8882e1c.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/87.e6f913e6.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/88.32e848c9.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/89.5ee8647d.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/9.46182d08.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/90.de256415.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/91.5d3876d2.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/92.223f87e5.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/93.24d202aa.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/94.e6b2cc56.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/95.30ee4d3d.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/96.82336655.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/97.c764022d.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/98.0d23a669.js"><link rel="prefetch" href="/docs/4.2.0/assets/js/99.f97579c8.js">
    <link rel="stylesheet" href="/docs/4.2.0/assets/css/0.styles.09d849d4.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/4.2.0/" class="home-link router-link-active"><img src="/docs/4.2.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/4.2.0/" class="nav-link">
  Home
</a></div><div class="nav-item"><a href="/docs/4.2.0/api/" class="nav-link">
  API
</a></div><div class="nav-item"><a href="/docs/4.2.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://join.slack.com/t/chartjs/shared_invite/zt-1lo81skkk-AZk6ollhOdrjt9GzPeOsLw" 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/4.2.0/" class="nav-link">
  Home
</a></div><div class="nav-item"><a href="/docs/4.2.0/api/" class="nav-link">
  API
</a></div><div class="nav-item"><a href="/docs/4.2.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://join.slack.com/t/chartjs/shared_invite/zt-1lo81skkk-AZk6ollhOdrjt9GzPeOsLw" 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/4.2.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/4.2.0/configuration/" aria-current="page" class="sidebar-link">Configuration</a></li><li><a href="/docs/4.2.0/configuration/animations.html" class="sidebar-link">Animations</a></li><li><a href="/docs/4.2.0/configuration/canvas-background.html" class="sidebar-link">Canvas background</a></li><li><a href="/docs/4.2.0/configuration/decimation.html" class="sidebar-link">Data Decimation</a></li><li><a href="/docs/4.2.0/configuration/device-pixel-ratio.html" class="sidebar-link">Device Pixel Ratio</a></li><li><a href="/docs/4.2.0/configuration/elements.html" class="sidebar-link">Elements</a></li><li><a href="/docs/4.2.0/configuration/interactions.html" aria-current="page" class="active sidebar-link">Interactions</a></li><li><a href="/docs/4.2.0/configuration/layout.html" class="sidebar-link">Layout</a></li><li><a href="/docs/4.2.0/configuration/legend.html" class="sidebar-link">Legend</a></li><li><a href="/docs/4.2.0/configuration/locale.html" class="sidebar-link">Locale</a></li><li><a href="/docs/4.2.0/configuration/responsive.html" class="sidebar-link">Responsive Charts</a></li><li><a href="/docs/4.2.0/configuration/subtitle.html" class="sidebar-link">Subtitle</a></li><li><a href="/docs/4.2.0/configuration/title.html" class="sidebar-link">Title</a></li><li><a href="/docs/4.2.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><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Migration</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="interactions"><a href="#interactions" class="header-anchor">#</a> Interactions</h1> <p>Namespace: <code>options.interaction</code>, the global interaction configuration is at <code>Chart.defaults.interaction</code>. To configure which events trigger chart interactions, see <a href="#events">events</a>.</p> <table><thead><tr><th>Name</th> <th>Type</th> <th>Default</th> <th>Description</th></tr></thead> <tbody><tr><td><code>mode</code></td> <td><code>string</code></td> <td><code>'nearest'</code></td> <td>Sets which elements appear in the interaction. See <a href="#modes">Interaction Modes</a> for details.</td></tr> <tr><td><code>intersect</code></td> <td><code>boolean</code></td> <td><code>true</code></td> <td>if true, the interaction mode only applies when the mouse position intersects an item on the chart.</td></tr> <tr><td><code>axis</code></td> <td><code>string</code></td> <td><code>'x'</code></td> <td>Can be set to <code>'x'</code>, <code>'y'</code>, <code>'xy'</code> or <code>'r'</code> to define which directions are used in calculating distances. Defaults to <code>'x'</code> for <code>'index'</code> mode and <code>'xy'</code> in <code>dataset</code> and <code>'nearest'</code> modes.</td></tr> <tr><td><code>includeInvisible</code></td> <td><code>boolean</code></td> <td><code>false</code></td> <td>if true, the invisible points that are outside of the chart area will also be included when evaluating interactions.</td></tr></tbody></table> <p>By default, these options apply to both the hover and tooltip interactions. The same options can be set in the <code>options.hover</code> namespace, in which case they will only affect the hover interaction. Similarly, the options can be set in the <code>options.plugins.tooltip</code> namespace to independently configure the tooltip interactions.</p> <h2 id="events"><a href="#events" class="header-anchor">#</a> Events</h2> <p>The following properties define how the chart interacts with events.
Namespace: <code>options</code></p> <table><thead><tr><th>Name</th> <th>Type</th> <th>Default</th> <th>Description</th></tr></thead> <tbody><tr><td><code>events</code></td> <td><code>string[]</code></td> <td><code>['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove']</code></td> <td>The <code>events</code> option defines the browser events that the chart should listen to for. Each of these events trigger hover and are passed to plugins. <a href="#event-option">more...</a></td></tr> <tr><td><code>onHover</code></td> <td><code>function</code></td> <td><code>null</code></td> <td>Called when any of the events fire over chartArea. Passed the event, an array of active elements (bars, points, etc), and the chart.</td></tr> <tr><td><code>onClick</code></td> <td><code>function</code></td> <td><code>null</code></td> <td>Called if the event is of type <code>'mouseup'</code>, <code>'click'</code> or '<code>'contextmenu'</code> over chartArea. Passed the event, an array of active elements, and the chart.</td></tr></tbody></table> <h3 id="event-option"><a href="#event-option" class="header-anchor">#</a> Event Option</h3> <p>For example, to have the chart only respond to click events, you could do:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> chart <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Chart</span><span class="token punctuation">(</span>ctx<span class="token punctuation">,</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> data<span class="token punctuation">,</span>
  <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// This chart will not respond to mousemove, etc</span>
    <span class="token literal-property property">events</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'click'</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Events for each plugin can be further limited by defining (allowed) events array in plugin options:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> chart <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Chart</span><span class="token punctuation">(</span>ctx<span class="token punctuation">,</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> data<span class="token punctuation">,</span>
  <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// All of these (default) events trigger a hover and are passed to all plugins,</span>
    <span class="token comment">// unless limited at plugin options</span>
    <span class="token literal-property property">events</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'mousemove'</span><span class="token punctuation">,</span> <span class="token string">'mouseout'</span><span class="token punctuation">,</span> <span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token string">'touchstart'</span><span class="token punctuation">,</span> <span class="token string">'touchmove'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">tooltip</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// Tooltip will only receive click events</span>
        <span class="token literal-property property">events</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'click'</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><p>Events that do not fire over chartArea, like <code>mouseout</code>, can be captured using a simple plugin:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> chart <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Chart</span><span class="token punctuation">(</span>ctx<span class="token punctuation">,</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">data</span><span class="token operator">:</span> data<span class="token punctuation">,</span>
  <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// these are the default events:</span>
    <span class="token comment">// events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
    <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'myEventCatcher'</span><span class="token punctuation">,</span>
    <span class="token function">beforeEvent</span><span class="token punctuation">(</span><span class="token parameter">chart<span class="token punctuation">,</span> args<span class="token punctuation">,</span> pluginOptions</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> event <span class="token operator">=</span> args<span class="token punctuation">.</span>event<span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">'mouseout'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// process the event</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><p>For more information about plugins, see <a href="/docs/4.2.0/developers/plugins.html">Plugins</a></p> <h3 id="converting-events-to-data-values"><a href="#converting-events-to-data-values" class="header-anchor">#</a> Converting Events to Data Values</h3> <p>A common occurrence is taking an event, such as a click, and finding the data coordinates on the chart where the event occurred. Chart.js provides helpers that make this a straightforward process.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> chart <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Chart</span><span class="token punctuation">(</span>ctx<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">data</span><span class="token operator">:</span> data<span class="token punctuation">,</span>
    <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function-variable function">onClick</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token keyword">const</span> canvasPosition <span class="token operator">=</span> Chart<span class="token punctuation">.</span>helpers<span class="token punctuation">.</span><span class="token function">getRelativePosition</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> chart<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token comment">// Substitute the appropriate scale IDs</span>
            <span class="token keyword">const</span> dataX <span class="token operator">=</span> chart<span class="token punctuation">.</span>scales<span class="token punctuation">.</span>x<span class="token punctuation">.</span><span class="token function">getValueForPixel</span><span class="token punctuation">(</span>canvasPosition<span class="token punctuation">.</span>x<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">const</span> dataY <span class="token operator">=</span> chart<span class="token punctuation">.</span>scales<span class="token punctuation">.</span>y<span class="token punctuation">.</span><span class="token function">getValueForPixel</span><span class="token punctuation">(</span>canvasPosition<span class="token punctuation">.</span>y<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><p>When using a bundler, the helper functions have to be imported separately, for a full explanation of this please head over to the <a href="/docs/4.2.0/getting-started/integration.html#helper-functions">integration</a> page</p> <h2 id="modes"><a href="#modes" class="header-anchor">#</a> Modes</h2> <p>When configuring the interaction with the graph via <code>interaction</code>, <code>hover</code> or <code>tooltips</code>, a number of different modes are available.</p> <p><code>options.hover</code> and <code>options.plugins.tooltip</code> extend from <code>options.interaction</code>. So if <code>mode</code>, <code>intersect</code> or any other common settings are configured only in <code>options.interaction</code>, both hover and tooltips obey that.</p> <p>The modes are detailed below and how they behave in conjunction with the <code>intersect</code> setting.</p> <p>See how different modes work with the tooltip in <a href="/docs/4.2.0/samples/tooltip/interactions.html">tooltip interactions sample</a></p> <h3 id="point"><a href="#point" class="header-anchor">#</a> point</h3> <p>Finds all of the items that intersect the point.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> chart <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Chart</span><span class="token punctuation">(</span>ctx<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">data</span><span class="token operator">:</span> data<span class="token punctuation">,</span>
    <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">interaction</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'point'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="nearest"><a href="#nearest" class="header-anchor">#</a> nearest</h3> <p>Gets the items that are at the nearest distance to the point. The nearest item is determined based on the distance to the center of the chart item (point, bar). You can use the <code>axis</code> setting to define which coordinates are considered in distance calculation. If <code>intersect</code> is true, this is only triggered when the mouse position intersects an item in the graph. This is very useful for combo charts where points are hidden behind bars.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> chart <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Chart</span><span class="token punctuation">(</span>ctx<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">data</span><span class="token operator">:</span> data<span class="token punctuation">,</span>
    <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">interaction</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'nearest'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="index"><a href="#index" class="header-anchor">#</a> index</h3> <p>Finds item at the same index. If the <code>intersect</code> setting is true, the first intersecting item is used to determine the index in the data. If <code>intersect</code> false the nearest item, in the x direction, is used to determine the index.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> chart <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Chart</span><span class="token punctuation">(</span>ctx<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">data</span><span class="token operator">:</span> data<span class="token punctuation">,</span>
    <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">interaction</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'index'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>To use index mode in a chart like the horizontal bar chart, where we search along the y direction, you can use the <code>axis</code> setting introduced in v2.7.0. By setting this value to <code>'y'</code> on the y direction is used.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> chart <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Chart</span><span class="token punctuation">(</span>ctx<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">data</span><span class="token operator">:</span> data<span class="token punctuation">,</span>
    <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">interaction</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'index'</span><span class="token punctuation">,</span>
            <span class="token literal-property property">axis</span><span class="token operator">:</span> <span class="token string">'y'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="dataset"><a href="#dataset" class="header-anchor">#</a> dataset</h3> <p>Finds items in the same dataset. If the <code>intersect</code> setting is true, the first intersecting item is used to determine the index in the data. If <code>intersect</code> false the nearest item is used to determine the index.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> chart <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Chart</span><span class="token punctuation">(</span>ctx<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">data</span><span class="token operator">:</span> data<span class="token punctuation">,</span>
    <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">interaction</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'dataset'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="x"><a href="#x" class="header-anchor">#</a> x</h3> <p>Returns all items that would intersect based on the <code>X</code> coordinate of the position only. Would be useful for a vertical cursor implementation. Note that this only applies to cartesian charts.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> chart <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Chart</span><span class="token punctuation">(</span>ctx<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">data</span><span class="token operator">:</span> data<span class="token punctuation">,</span>
    <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">interaction</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'x'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="y"><a href="#y" class="header-anchor">#</a> y</h3> <p>Returns all items that would intersect based on the <code>Y</code> coordinate of the position. This would be useful for a horizontal cursor implementation. Note that this only applies to cartesian charts.</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> chart <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Chart</span><span class="token punctuation">(</span>ctx<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">data</span><span class="token operator">:</span> data<span class="token punctuation">,</span>
    <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">interaction</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'y'</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><h2 id="custom-interaction-modes"><a href="#custom-interaction-modes" class="header-anchor">#</a> Custom Interaction Modes</h2> <p>New modes can be defined by adding functions to the <code>Chart.Interaction.modes</code> map.  You can use the <code>Chart.Interaction.evaluateInteractionItems</code> function to help implement these.</p> <p>Example:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Interaction <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'chart.js'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> getRelativePosition <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'chart.js/helpers'</span><span class="token punctuation">;</span>
<span class="token comment">/**
 * Custom interaction mode
 * @function Interaction.modes.myCustomMode
 * @param {Chart} chart - the chart we are returning items from
 * @param {Event} e - the event we are find things at
 * @param {InteractionOptions} options - options to use
 * @param {boolean} [useFinalPosition] - use final element position (animation target)
 * @return {InteractionItem[]} - items that are found
 */</span>
Interaction<span class="token punctuation">.</span>modes<span class="token punctuation">.</span><span class="token function-variable function">myCustomMode</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">chart<span class="token punctuation">,</span> e<span class="token punctuation">,</span> options<span class="token punctuation">,</span> useFinalPosition</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> position <span class="token operator">=</span> <span class="token function">getRelativePosition</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> chart<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> items <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  Interaction<span class="token punctuation">.</span><span class="token function">evaluateInteractionItems</span><span class="token punctuation">(</span>chart<span class="token punctuation">,</span> <span class="token string">'x'</span><span class="token punctuation">,</span> position<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">element<span class="token punctuation">,</span> datasetIndex<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>element<span class="token punctuation">.</span><span class="token function">inXRange</span><span class="token punctuation">(</span>position<span class="token punctuation">.</span>x<span class="token punctuation">,</span> useFinalPosition<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> <span class="token function">myCustomLogic</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      items<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>element<span class="token punctuation">,</span> datasetIndex<span class="token punctuation">,</span> index<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>
  <span class="token keyword">return</span> items<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// Then, to use it...</span>
<span class="token keyword">new</span> <span class="token class-name">Chart<span class="token punctuation">.</span>js</span><span class="token punctuation">(</span>ctx<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
    <span class="token literal-property property">data</span><span class="token operator">:</span> data<span class="token punctuation">,</span>
    <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">interaction</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'myCustomMode'</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>If you're using TypeScript, you'll also need to register the new mode:</p> <div class="language-typescript extra-class"><pre class="language-typescript"><code><span class="token keyword">declare</span> <span class="token keyword">module</span> <span class="token string">'chart.js'</span> <span class="token punctuation">{</span>
  <span class="token keyword">interface</span> <span class="token class-name">InteractionModeMap</span> <span class="token punctuation">{</span>
    myCustomMode<span class="token operator">:</span> InteractionModeFunction<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">1/18/2023, 1:35:00 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/docs/4.2.0/configuration/elements.html" class="prev">
        Elements
      </a></span> <span class="next"><a href="/docs/4.2.0/configuration/layout.html">
        Layout
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/docs/4.2.0/assets/js/app.2a761adc.js" defer></script><script src="/docs/4.2.0/assets/js/2.861276ab.js" defer></script><script src="/docs/4.2.0/assets/js/159.dbf15a4c.js" defer></script>
  </body>
</html>