score:-1
Accepted answer
If I'm understanding what you are wanting correctly then this should work for you.
document.getElementById("myChart").onclick = function(evt) {
var active = myChart.getElementAtEvent(event)[0]._index;
var value = myChart.getElementAtEvent(event)[0]._chart.config.data.labels[active];
alert(value);
};
Active simply finds the index of where you clicked and then it's used at the end of value
to find where in your labels
that item correlates to.
If this is incorrect in what you want please let me know.
Edit 1
Based on wanting to click anywhere I took it as anywhere within the alley from where the point is to the next. You can try the following:
document.getElementById("myChart").onclick = function(evt, array) {
var xLabel = myChart.scales['x-axis-0'].getValueForPixel(evt.x);
alert(myChart.config.data.labels[xLabel - 1]);
};
Source: stackoverflow.com
Related Query
- Click event of stacked line chart not working
- Angular Chart Js legends click event not working
- How to add an on click event to my Line chart using Chart.js
- Click event on stacked bar chart - ChartJs
- Time Series Line chart js in react not working
- Stacked line chart not displaying correctly when Xaxis is time
- Charts.js - Colors for stacked bar on multi-series line/bar chart are not working
- ChartJS autoskip:False not working on line chart
- Tooltip callbacks in line chart JS not working
- Chart js :Adding onclick event on slice of doughnut chart is not working in react-chartjs-2
- angular chart js type line setting chart-options not working
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- show label in tooltip but not in x axis for chartjs line chart
- Angular-chart.js - Make line chart does not curve
- angular-chartjs line chart TypeError: t.merge is not a function
- Chart.js line chart is not displaying
- Map event position to y axis value in chartjs line chart
- Line chart is not being displayed in Chart.js
- Time series line chart is not displayed
- Chart.js click event to open a custom tooltip does not work sometimes
- Chart not rendering w/Chart.js on button click
- In Stacked horizontal bar chart how to remove the vertical line in Chart.js?
- Removing chart on click event produces 'removeHoverStyle' of null error
- ChartJS - radar chart options not working
- Bubble Chart in Chartjs not working
- Chart Click Event - Clicking label of doughnut chart, doesn't return label ng2-charts
- Chart.js tooltip not showing on line chart
- annotation line not visible in scatter chart in chartjs
- Adding line over stacked line chart with ChartJS
- Chart.js Date and Time Bar Chart Not Rendering - Line Works Though
More Query from same tag
- Chart.js is not rendered until zoom in in angular 8
- Get method in php then pass the value into json format
- flask altering python list
- Legend position is not vertically in middle in Donut chart
- ChartJS autoskip:False not working on line chart
- React js Unhandled Rejection (TypeError): t[l].data.map is not a function
- chartjs output data in month week and day
- Horizontal Stacked Bar with Gaps
- How to show both overlapping lines in in chartjs
- Chart.js beginAtZero doesn't work
- how can i modify scale labels in angular chart js?
- How can I avoid NaN on pie chart label in Chart JS
- Chart js doesn't show chart
- Click anchors the label to its respective section HTML in Chart.js
- Unable to ES6 import ChartJS plugin into Aurelia
- chart.js fixed bar width issue
- Chartjs - Insert additional data into chart tooltip
- chartjs - Drawing vertical line on integer x axis value
- How to implement chart.js in Angular2
- Reduce size of chart within the canvas
- How to write better code in es6 for formatting an object with array values
- Flickering of charts and getcontext error with chartjs in the context of Vuejs
- Using chart.js to output chart as a saved image rather than using canvas
- Smaller scale for volume dataset in Chart JS
- HTML Canvas height defaults to 1 after slideToggle
- Chart Js Doughnut chart giving error
- ng2-charts & chart.js - Change background color
- Showing points data withou hover chartjs
- How to show tooltip on legend item in chart.js
- Disable chartJS tool tip on one dataset only