score:1
Accepted answer
you can change your onclick
function as follows:
document.getelementbyid("mychart").onclick = function(evt) {
const datasetindex = mychart.getelementatevent(event)[0]._datasetindex;
if (datasetindex >= 0) {
...
alert(mychart.data.datasets[datasetindex].label + '\n' + label + ": " + value);
}
};
please take a look at your amended code and see how it works.
var ctx = document.getelementbyid("mychart").getcontext('2d');
var mychart = new chart(ctx, {
type: 'line',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: 'timmy',
data: [12, 19, 3, 5, 2, 3],
backgroundcolor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
bordercolor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderwidth: 1
},
{
label: 'siri',
data: [24, 38, 6, 10, 4, 6],
backgroundcolor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
bordercolor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderwidth: 1
},
]
},
options: {
scales: {
yaxes: [{
ticks: {
beginatzero: true
}
}]
}
},
});
document.getelementbyid("mychart").onclick = function(evt) {
const datasetindex = mychart.getelementatevent(event)[0]._datasetindex;
if (datasetindex >= 0) {
var activepoints = mychart.getelementsateventformode(evt, 'point', mychart.options);
var firstpoint = activepoints[0];
var label = mychart.data.labels[firstpoint._index];
var value = mychart.data.datasets[firstpoint._datasetindex].data[firstpoint._index];
alert(mychart.data.datasets[datasetindex].label + '\n' + label + ": " + value);
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.4/chart.min.js"></script>
<canvas id="mychart"></canvas>
Source: stackoverflow.com
Related Query
- How can I get the label onclick event by multiple graphs?
- How to get onClick Event for a Label in ChartJS and React?
- How can I get the active label element on click in ChartJS?
- how I can get label name when user click on particular area in doughnut chart.js? I am not able to find the index of selected area for chart.js
- How can i get the Chart JS Bar Graph Bar Label and Value on click?
- Chart.js - mixing bar and line graphs - can I get the lines to fill the full column?
- How can I load multiple Chartjs charts with different data on the same page?
- How can I change the label name when you hover your data in Chart.js?
- How can I get access to the index of the highlighted dataset in Chart.js
- ng2-charts How to get the result of multiple push?
- How can I add a label above just the last bar in a Chart.JS bar chart?
- How to get the index of the barchart label that has been clicked with react-chart js-2?
- How can I get a point to be drown over the line?
- How can I put my label on the right hand side of my chart in Chartjs
- How can i change the every legend label font color using chart.js version 2.8.0 (spacial line chart)?
- How can I change the legend label without affecting my tooltip label?
- How can I control the placement of my Chart.JS pie chart's legend, as well as its appearance?
- How can I increase the size of the pie (Chart.JS)?
- How to add OnClick Event on labels in Chart.js v2.0?
- Chart.js2 Radar, how to configure the label padding/spacing?
- How to change the color of Chart.js points depending on the label
- Chart JS show multiple data points for the same label
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- Angular chart.js onClick is not working - how to get all elements of a bar when it is clicked on
- How to get click event in Chart.js
- Chart js: how can I align the legend and the title
- PrimeNg bar chart how to show a label for the y-axis
- How can I display a set amount of ticks on the Y Axis?
- Chart.js canvas, how can I swap data without the previous data affecting my hover events?
More Query from same tag
- Tooltips not working in chart.js. Any ideas?
- subset stacked bars chart
- How can I get the label onclick event by multiple graphs?
- Chart.js: show tooltip color square only for certain row
- How to detect click on chart js 3.7.1 axis label?
- Proper way to use a counter variable in HTML/Javascript
- ChartJS: Grouped Stacked Bar Chart not Grouping
- Django and Chartjs template conflict
- How to ignores labels in chart.js
- Primefaces charts replaced by chartJS?
- Foreground chart by mouse
- Series Details Not Showing in Angular Chart with Charts.js
- Multiple labels for multiple data-sets in chart.js
- ChartJS/ ChartJS-plugin annotation set height of vertical line
- Chartjs : Y axis starting with highest datapoint
- Custom empty screen for ng2-charts
- ChartJS : Hook before values are given to doughnut (absolute value in chart and real values in the tooltips)
- Usage of Chartjs in Angular2 App
- Change data onclick with ChartJS
- How to get value of defaultdic in JS (Django framework)?
- Draw horizontal line on chart in chart.js on v2
- How can I place single data on the center in Chart.js?
- ChartJS not updating
- How to change line chart data label to icon or image in chart.js
- ChartJS - How to provide datasets an array of objects
- ChartJS: datalabels: show percentage value in Pie piece
- How to set chart's percentageInnerCutout property with ng2-charts
- Getting 'Uncaught TypeError: Cannot read property 'helpers' of undefined'
- Grab array from div text to plot with ChartJS
- Chartjs + jsPDF = Blurry image