I want to get specific hidden data like custId2345 when a bar is clicked, and then run a function.
How should I assign this data to its bar without showing on chart?
You can define your data in object format and then you can just add a custom property that you read in the onClick method like so:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [{
x: "Red",
y: 12,
secretVal: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
},
{
x: "Blue",
y: 19,
secretVal: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
},
{
x: "Yellow",
y: 3,
secretVal: "Not rick roll"
},
{
x: "Green",
y: 5,
secretVal: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
},
{
x: "Purple",
y: 2,
secretVal: "Not rick roll"
},
{
x: "Orange",
y: 3,
secretVal: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
}
],
backgroundColor: 'pink'
},
{
label: '# of Points',
data: [{
x: "Red",
y: 7,
secretVal: "Not rick roll"
},
{
x: "Blue",
y: 11,
secretVal: "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
},
{
x: "Yellow",
y: 5,
secretVal: "Not rick roll"
},
{
x: "Green",
y: 8,
secretVal: "Not rick roll"
},
{
x: "Purple",
y: 3,
secretVal: "Not rick roll"
},
{
x: "Orange",
y: 7,
secretVal: "Not rick roll"
}
],
backgroundColor: 'orange'
}
]
},
options: {
onClick: (e, activeEls, chart) => {
if (activeEls.length === 0) {
return;
}
const cEl = activeEls[0];
console.log(chart.data.datasets[cEl.datasetIndex].data[cEl.index].secretVal)
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>