When using Chart JS to create a line bar chart, I am looking to specifically identify which bar was clicked on the chart and determine the index of that bar. This will allow me to display specific details for each clicked bar on a table. For example, clicking on any bar for the year 2010 should give me index 0, and for the year 2011, it should give me index 1. However, I want the index to be based on the position of the clicked bar within the year. For instance, clicking on the second bar of the year 2010 should give me index 1.
https://i.sstatic.net/pe7ya.pngHere is the HTML:
<div id = "myTable" class="container-lg" style="margin-left: 300px;">
<div class="table-responsive">
<div class="table-wrapper">
<table class="table table-bordered">
<thead>
<tr style="background-color: #4B4B4B">
<th style="font-weight: 500; color: white; text-align:center" colspan="2">Feedback from Thamama F</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">John Doe</td>
<td style="text-align:center">John Doe</td>
</tr>
<tr>
<td style="text-align:center">John Doe</td>
<td style="text-align:center">John Doe</td>
</tr>
<tr>
<td style="text-align:center">John Doe</td>
<td style="text-align:center">John Doe</td>
</tr>
<tr>
<td style="text-align:center">John Doe</td>
<td style="text-align:center">John Doe</td>
</tr>
<tr>
<td style="text-align:center">John Doe</td>
<td style="text-align:center">John Doe</td>
</tr>
<tr>
<td style="text-align:center">John Doe</td>
<td style="text-align:center">John Doe</td>
</tr>
<tr>
<td style="text-align:center">John Doe</td>
<td style="text-align:center">John Doe</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript">
function Show() {
var x = document.getElementById("myTable");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
Here is the JavaScript:
'use strict';
// Code for chart color settings