score:1
sorry for the old code i didn't see the documentation may be you can find more userfull in the doc, i did on old school mode :).
position based on client with height :
canvas.onclick = function(evt){
alert(evt.pagex, evt.pagey)
};
position based on charts :
var config = {}; //different (data, datasets, tooltips ...)
var ctx = document.getelementbyid("canvas").getcontext("2d");
var charts= new chart.scatter(ctx, config);
canvas.onclick = function(evt){
var activepoints = charts.getelementsatevent(evt);
var firstpoint = activepoints[0];
if(firstpoint !== undefined){
var label = charts.data.labels[firstpoint._index];
var value = charts.data.datasets[firstpoint._datasetindex].data[firstpoint._index];
alert(label + ": " + value.x);
alert(label + ": " + value.y);
}
};
taken from there :) click events on pie charts in chart.js thanks for him. regards.
score:6
for future readers, a workable solution:
chartclicked(event){
var ytop = this.chart.chartarea.top;
var ybottom = this.chart.chartarea.bottom;
var ymin = this.chart.scales['y-axis-0'].min;
var ymax = this.chart.scales['y-axis-0'].max;
var newy = 0;
if (event.offsety <= ybottom && event.offsety >= ytop) {
newy = math.abs((event.offsety - ytop) / (ybottom - ytop));
newy = (newy - 1) * -1;
newy = newy * (math.abs(ymax - ymin)) + ymin;
};
var xtop = this.chart.chartarea.left;
var xbottom = this.chart.chartarea.right;
var xmin = this.chart.scales['x-axis-0'].min;
var xmax = this.chart.scales['x-axis-0'].max;
var newx = 0;
if (event.offsetx <= xbottom && event.offsetx >= xtop) {
newx = math.abs((event.offsetx - xtop) / (xbottom - xtop));
newx = newx * (math.abs(xmax - xmin)) + xmin;
};
console.log(newx, newy);
};
Source: stackoverflow.com
Related Query
- Get X, Y onClick chart coordinates in ChartJS
- get yLabel value onclick chart js
- React ChartJS 2 : Get data on clicking the chart
- How to get onClick Event for a Label in ChartJS and React?
- How to get labels on ChartJS Pie chart segments
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
- How to get Data from API to display chart using chartjs in Vuejs
- How to get the data attribute of the canvas chart created using chartjs
- I cant get Legend to work for my chartjs donut chart
- chartJS pie chart not updating after axios GET
- VueJS + Chartjs - Chart only renders after code change
- How do I get the current step size of a chartjs chart whose stepSize I have not defined?
- How do you get the width of a datalabel from the Chartjs plugin after the chart animates?
- How to get ChartJs object from dynamically created chart
- How Can I Get An Instance of a ChartJS Bar Chart Using Angular
- Unable to get chartjs to draw a chart with dynamic data (variable not hardcoded)
- Chartjs bar chart trying to get labels from datasets
- How can i launch a modal after clicking each bar in Bar chart in Chartjs and also how can i get its data?
- Unable to get Line Chart tooltip on ChartJS
- How to get chartjs column chart in ng-repeat
- Dynamically update values of a chartjs chart
- Chartjs Bar Chart showing old data when hovering
- Chart area background color chartjs
- Chartjs v2.0: stacked bar chart
- Chartjs random colors for each part of pie chart with data dynamically from database
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- ReferenceError: Chart is not defined - chartjs
- ChartJS - Draw chart with label by month, data by day
- How get sum of total values in stackedBar ChartJs
- Changing fontFamily on ChartJS bar chart
More Query from same tag
- How to use date in x value for Object[] in chartjs dataset, I am getting an error: 'TS2322: Type 'string' is not assignable to type 'number'.'
- Angular-chart.js Configuration
- Date range picker and chart js
- How I connect chart.js to database in ASP.NET web form?
- moment.js is not loading before chart.js in Firefox extension
- How can I set different colours for each bar in angular-chart.js v1.0.0?
- Dynamic Chart Data
- How to add the value for each label to pie legend
- How to connect a charts.js chart to data
- Vue Chart.js -- can I give a line chart a default value for missing data?
- Chart.js draw y-axis only up to point
- How to increase space between label and chart area in chart.js
- Filter/update already rendered chart.js in react.js
- How to get rid of axis lines in ChartJS?
- Chart.JS: Stop chart from rescaling when hiding/unhiding a dataset?
- Chartjs radar indexed labels
- Laravel Chart JS change data with dropdown
- Limit labels number on Chart.js line chart
- Javascript chart fills up the entire browser window
- How to disable event during a state change
- Error when adding data on top of each bar
- laravel-chartjs not displaying anything
- I want to draw a horizontal line
- Charts.js Y-Axis whole Numbers
- Multiple charts rendering on top of each other
- Chart.JS - Fill Donut
- animation of a graph of an equation javascript
- Chart.js - PieChart defined background color for specific dataset element
- Change the font size of chart.js with chartkick
- Is it able to align line chart at left margin in mixed chart?