score:1
i'm throwing this response together piece-meal from a working solution in a module i just wrote. this particular offering hasn't been fully tested, but the crux of it is here exactly as it was working in my code. i put my final working code together using bits of code from stackoverflow, but nothing i found looks quite like this code does (using viewchild and angular click event wire-up), so my working solution is somewhat unique and imho much simpler & straightforward.
note: so long as the viewchild canvas reference becomes a chart reference at runtime, i think the code is sound. my working solution created the chart object in the typescript code where yours is created in html, so i had a direct reference to the chart object where this code attempts to use the viewchild reference.
if not, you may need to add a let statement to the event code to pull the chart object from the canvas reference (something like let mychartobj = this.mychartcanvas.(chartproperty);
) and then reference mychartobj in place of this.mychart in the event code)
template
(i added #chartcanvas and (click) event)
<div style="display: block">
<canvas #chartcanvas (click)="onchartclick($event)" id="radarchart" basechart [datasets]="radarchartdata" [labels]="radarchartlabels"
[charttype]="radarcharttype" [options]="radarchartoptions"></canvas>
component code
add to your imports:
import { chart, chartelement } from 'chart.js';
add to your class variables:
@viewchild('chartcanvas') mychart;
your event handler:
onchartclick(event) {
let activepoints: chartelement[] = this.mychart.getelementsatevent(event);
// to do - check activepoints for undefined, return if true
let idx = activepoints[0]['_index'];
let lbl: string = this.mychart.data.labels[idx];
let dat = this.mychart.data.datasets[0].data[idx];
console.log(lbl,dat);
}
Source: stackoverflow.com
Related Query
- ChartJs events in Angular
- Why isn't my Angular 4 ChartJS component rendering?
- Create a rounded bar graph with Angular and chartJS
- Update charts in chartjs and angular
- Angular 8 & ChartJs change color in pie chart
- Make y-axis sticky when having horizontal scroll on chartJS and Angular
- How to add ChartJS code in Html2Pdf to view image
- How to use an Addon with ChartJS on Angular 4
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Chartjs not working with d3 from csv source
- how to hide specific dataset based on condition chartjs angular
- Remove moment from chartjs in angular app
- Change font size and font color in Chartjs Angular 5
- Angular 12 + Chartjs 3.3.2 TypeError: Cannot read property 'left'
- Map JSON for Chartjs with Angular 7
- How to plot Firebase data with Chartjs in angular
- Angular ChartJS 2.9.4 issue updating chart
- Set fixed label size for grouped bar chart in angular Chartjs
- Order and hide items of legend by value with Chartjs Angular
- how to increase space between legend and chart in chartjs (ng2charts ) using angular
- Calling MouseLeave chartJs Angular
- Change background point color at runtime for angular ng2-charts / chartjs
- load external json data file in to chartjs in the angular component
- Angular Chartjs How to make it reactive to data change?
- Angular chartjs directive
- ChartJS have xAxes labels match data source
- Angular 9 chartJs is not updating view after data update
- How to toggle between Custom tooltip and normal tooltip in chartjs and angular
- ChartJS timeline graph with events
- Angular 6 ChartJS create canvas dynamically and create graph on it - an example?
More Query from same tag
- Chart.js turn off all y axis and toggle them on / off
- showing tooltips all the time in chartjs 2.4 not working
- Animating outerRadius and innerRadius
- How to set static labels for ng2-charts bar charts?
- Chart.js & Angular 2 - ng2-charts Custom on Click Event
- Horizontal Stacked Bar with Gaps
- Chartjs xAxes gridline html (html in ticks callback)
- Can't display proper time on chart.js timeline
- How do I display a different chartjs tooltip title?
- How to start the line graph from the left Y axis in a line/bar mixed chart (Chart.js)?
- customizing tooltip on chart.js bar chart
- Display php array data in chart.js javascript
- Chart.js Line chart fixed tooltip
- Hide/show chart.js charts
- Changing color of specific chartjs point
- How to put an image a circle chart
- Chart, X and Y-Axis labels are blurred in horizontal bar chart using chart.js
- How can I fasten up the Chart.js graph generation from JQuery over PHP and mySQL?
- Dynamic Chart Data
- How to customize border style on Chart.js
- Customizing Chart.js troubleshoot
- chart js different callback labels
- How to create pdf file in node js
- Blazor Chart.js 2.0.2 raises onClick error
- Multiple bubble chart datasets for chartjs
- I'm trying to use chart.js in angular to create a simple bar chart but I'm getting an error as 'legend' type doesn't exist for options
- How to clear the data for a angular-chart
- Radar chart Display legend
- Is there a way to filter data in Chart.js?
- Setting max, min and stepSize values in a Chart.js graph