score:10
this demo gives the value in the bar chart when you click on it. i'm not a chart.js expert so there may be better solutions.
https://codepen.io/newschapmj1/pen/perozm
/* from https://github.com/chartjs/chart.js/issues/2292 */
document.getelementbyid("mychart").onclick = function (evt) {
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(label + ": " + value);
};
score:0
i needed a way to get the chart from the callback because i'm using the same callback for multiple charts, so i can't just say mychart
this works, passing to chart options - the second parameter is called "activeelements" and can be used to get the chart:
onclick: (event, activeelements) => {
if(activeelements.length === 0){
alert("chart is clickable but you must click a data point to drill-down")
}
const chart = activeelements[0]._chart
const activepoints = chart.getelementsateventformode(event, 'point', chart.options);
const firstpoint = activepoints[0];
const label = chart.data.labels[firstpoint._index];
const value = chart.data.datasets[firstpoint._datasetindex].data[firstpoint._index];
alert(label + ": " + value);
}
score:5
chart.js version = 3.2.1
from the official documentation:
onclick: (evt) => { const points = mychart.getelementsateventformode(evt, 'nearest', { intersect: true }, true); if (points.length) { const firstpoint = points[0]; var label = mychart.data.labels[firstpoint.index]; var value = mychart.data.datasets[firstpoint.datasetindex].data[firstpoint.index]; alert(label +" : "+ value); } }
Source: stackoverflow.com
Related Query
- get yLabel value onclick chart js
- Get X, Y onClick chart coordinates in ChartJS
- How to access or get value of specific graph on chart plot by click event?
- Click on interactive chart.js bar chart and get value for labels and groups in JS
- Get Value for point clicked on Pie Chart in Chart.js 3
- How to get line x value from Label chart js
- get JSON data from function to give value to Chart JS
- How can I get my Chart.JS bar chart to stack two data values together on each bar, and print a calculated value on each bar?
- Get value of min/lowest label from y-axis chart
- getting additional value fields from data source for dx.chartjs doughnut chart
- ChartJS: Get value from another another Chart
- How can i get the Chart JS Bar Graph Bar Label and Value on click?
- How to get a value from function javascript and print it to the chart
- Get bar value when onClick Reactjs
- How to get x-axis value in chart as string?
- Get hash value Rails / Chart JS / Google Chart
- Get Chart js object from selector
- How to display value of only one datapoint in line chart
- Obtain max value of y axis of line chart rendered with Chart.js
- Can't get bar chart colors in Chart js working in React Js
- Chart js - Get bar width after render
- Remove the label and show only value in tooltips of a bar chart
- How to create single value Doughnut or Pie chart using Chart.js?
- Angular chart.js onClick is not working - how to get all elements of a bar when it is clicked on
- Map event position to y axis value in chartjs line chart
- Drawing line chart in chart.js placing dots only when value changes
- React ChartJS 2 : Get data on clicking the chart
- How to get onClick Event for a Label in ChartJS and React?
- Chart.js: Minimum value for x-axis at horizontal stacked bar chart
- chart.js bar chart color change based on value
More Query from same tag
- Legend option destroys pie chart in Chart.js
- How to make gap in chart.js graph?
- charts.js Stacked Bar Graphs - selecting row and dataset selected
- Chart.js not able to re-set data
- Have shading begin at 0 but not scale
- PHP/Laravel - Chartjs implode does not function
- How to style a pie chart in chart js? I want to change the border color, border width and give them shadow
- Chart.js don't show the first time
- ChartJS multichart graph not showing correctly legends
- How to solve Chart js mismatched x-axes label and value dynamically in Laravel?
- In react hooks, how can i pass the filtered values to the chart?
- How do I create multiple charts at the same page with angular?
- ChartJS: How to set a data point to be hidden by default?
- ChartJS Recreate Chart
- Using zoom/pan with ChartJS
- Chart.js; Chart is not showing time and imported data.
- Chart.js with React
- Why doesn't my donut chart, created with Chart.js, appear?
- Chart.js add label inside bubble chart
- chartjs + Angular6 is not showing charts or any error
- Chart JS how to display an array of data objects as bar chart
- Using Chart.js in functional React component, not allowing me to toggle data: "properties undefined"
- How to assign values to different lables(legends) of my dataset of stacked bar chart
- ChartJS with AngularJS - Canvas won't display anything
- charts.js: how to get the legend colors of the labels
- Hide x-axis when it has no value on chart.js
- ChartJS automatically scaled chart has undefined min and max
- How to make a chart scroll horizontally (when using Chart.js)
- Ionic 3 Angular component load listener
- Displaying labels on a Doughnut Chart using Chart.js