”;
Chart.js interactions help us to communicate with the elements of our chart. You can apply these interactions using both the hover and tooltip. The table below gives the descriptions of various kinds of interactions we can use −
| Name | Type | Default | Description |
|---|---|---|---|
| Mode | string | ”nearest” | It will set which elements appear in the interaction. |
| Intersect | Boolean | true | Intersect can be used to set the mouse position. If you keep this true, the interaction mode only applies when the mouse position intersects an item on the chart else not. |
| Axis | string | ”x” | Axis can be set to ”x”, ”y”, ”xy” or ”r”.
It defines the directions are used in calculating distances. For index mode the default value is ”x”. Whereas ”xy” is the default value for ”nearest” modes. |
| includeInvisible | Boolean | false | if false, the invisible points that are outside of the chart area will not be included when evaluating interactions. |
The namespace to use interactions in our charts is “options.interactions”.
On the similar note, the following table gives the descriptions how the chart will interact with events −
| Name | Type | Default | Description |
|---|---|---|---|
| Events | string[] | [”mousemove”, ”mouseout”, ”click”, ”touchstart”, ”touchmove”] | This option defines the browser events that the chart should listen. |
| onHover | function | Null | This event will be called when any of the events fire over our chartArea.). |
| onClick | function | Null | This event will be called if the event is of type
”mouseup”, ”click” or ”contextmenu” over our chartArea. |
Syntax
The interaction syntax is given below −
interaction: {
mode: ''nearest'',
}
And the Chart.js event syntax is given below −
events: [''click''],
Example
Let’s take an example in which we will use various interactions and events in our chart −
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>chart.js</title>
</head>
<body>
<canvas id="chartId" aria-label="chart" height="350" width="580"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<script>
var chrt = document.getElementById("chartId").getContext("2d");
var chartId = new Chart(chrt, {
type: ''bar'',
data: {
labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
datasets: [{
label: "online tutorial subjects",
data: [20, 40, 30, 35, 30, 20],
backgroundColor: [''coral'', ''aqua'', ''pink'', ''lightgreen'', ''lightblue'', ''crimson''],
borderColor: [''red'', ''blue'', ''fuchsia'', ''green'', ''navy'', ''black''],
borderWidth: 2,
}],
},
options: {
responsive: false,
events: [''click''],
interaction: {
mode: ''nearest'',
}
},
});
</script>
</body>
</html>
Output
It will produce the following chart having various interactions and events −
”;