score:0
You need to use the .getElementAtEvent()
prototype method instead of .getElementsAtEvent()
. The difference being the first only returns the single point that you clicked whereas the other returns all points at the X axis for that click.
Here is an example.
document.getElementById("canvas").onclick = function(evt) {
var activePoint = myLine.getElementAtEvent(event);
// make sure click was on an actual point
if (activePoint.length > 0) {
var clickedDatasetIndex = activePoint[0]._datasetIndex;
var clickedElementindex = activePoint[0]._index;
var label = myLine.data.labels[clickedElementindex];
var value = myLine.data.datasets[clickedDatasetIndex].data[clickedElementindex];
alert("Clicked: " + label + " - " + value);
}
};
You can see a demonstration at this codepen.
score:2
You have to change your label
variable assignment from,
var label = scatterChart.data.labels[firstPoint._index];
To,
var label = scatterChart.data.datasets[firstPoint._index].label;
And you may also need to change your alert
statment as,
alert(label + ": " + value.x);
Here is the working DEMO: https://jsfiddle.net/dt6c9jev/
Hope this helps!.
Source: stackoverflow.com
Related Query
- Chart.js - Multiple JSON data object array [{x: Date, y: count}....] representing each dataset of the chart
- how to not repeat code while creating multiple charts in chart js
- Chart.js - How to set a line chart dataset as disabled on load
- How to display Line Chart dataset point labels with Chart.js?
- Add DataSet Bar Chart - Chart.JS
- How to add an offset to a dataset in Chart js
- Chart.js - Draw bar chart with multiple labels
- Chart JS show multiple data points for the same label
- how to create multiple chart on one component vue
- Chart.js Multiple dataset
- Chart.js dataset controller 'null' when chart drawn
- X-axis multiple colored label for bar chart using chart.js
- Multiple stacked bar chart using ChartJs
- How to dynamically set ChartJs line chart width based on dataset size?
- Multiple line labels for chart js
- Chart.js multiple dataset issue: hovering over n-th point "hovers" over every dataset's n-th point
- Create multiple dynamic stacked chart using chart.js in Angular 10?
- Chart JS dataset disabled by default
- Group Chart with multiple layers in ChartJS
- Chart.js - bind data in dataset to specific chart labels
- ng2 chart multiple chart update
- Dynamicly update scatter/line chart in Chart.JS with multiple x/y grids
- Multiple bubble chart datasets for chartjs
- Angular-chart / line chart with multiple horizontal lines (margins)
- ChartJS v2 - Keep tooltip open when user click on a point of a multiple lines chart
- Chart.js v3: Tooltip callback doesn't identify clicked dataset of stacked bar chart
- Changing Dataset for a chart in angular 10
- react-chartjs-2 line chart with time on X-axes with multiple data sets plotted wrong
- Displaying line chart for multiple months using chart.js
- Updating chart.js chart with dataset of different size
More Query from same tag
- How do I prevent my chart from rerendering? (ReactJS)
- Multiple dynamic vertical lines on a chart with Chart.js
- hide dataset by default using Chart.js and a custom script
- Placing canvas (chart.js line chart) inside an SVG using d3.js
- How to scale label size radar chart chart.js
- angular-chartjs line chart TypeError: t.merge is not a function
- Chartjs - custom y axis range
- time scatter plot w/ chart.js
- chartjs: need color bars near yAxis scale
- Reactive Vue Chart.js component using Typescript
- Updating chartJS with dynamic data
- How to clear the data for a angular-chart
- How do remove the bottom scale on a Chart.js bar chart
- give values to Chartjs
- Chart js nested pie label colors in legend
- Annotations are not displayed in Chart.js
- jquery load with chart.js
- chart.js not allowing y axis steps with logarithmic scale
- HTML5 chart stacked bars with repeated colors
- Custom tooltip styling in Chart.js
- How can I change the background colors of a bar chart after it has been created?
- how to create line chart using chart.js in angular 2+
- Pie Charts JS: How to set units?
- Chart js scatter - display label on hover
- Filter a legend Item with Chartjs.org V2.7
- How to make dashed thick lines with dots in ChartJS ? Is it possible?
- How to draw round edges with chart.js for line diagrams
- How to convert (convas chart) to either (Chart , or system.drawing.image , or stream , or []byte ) where I can use it in c# to generate pdf
- My chart is not shown on browser screen using chart.js in meteor
- pass array to chart.js option