My homepage features a simple bar chart that displays correctly, but I am having trouble capturing the left click event (the right click works fine).
This is an example of code from my template:
<kendo-chart *ngIf="(dataExists | async)"
[legend]="chartConfig.legend"
[axisDefaults]="chartConfig.axisDefaults"
[chartArea]="chartConfig.chartArea"
[plotArea]="chartConfig.plotArea"
[seriesDefaults]="chartConfig.seriesDefaults"
[valueAxis]="chartConfig.valueAxis"
[transitions]="chartConfig.transitions"
(seriesClick)="onSeriesClick($event)">
<kendo-chart-series>
<kendo-chart-series-item *ngFor="let item of (data | async)"
[data]="[item]"
[field]="dataField"
[name]="item.Name">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
I am utilizing seriesClick to capture my click events.
This snippet shows part of a component's code:
public onSeriesClick(e: SeriesClickEvent): void {
if (this.isLeftClick(e)) {
this.router.navigateByUrl('/videos');
}
}
private isLeftClick(e: SeriesClickEvent) {
return e.originalEvent.event && e.originalEvent.event.button === 0;
}
While the right click is being caught successfully, the left click event is not triggering the onSeriesClick function. Upon inspecting the call stack, no stopPropagation was found. Can you assist in resolving this issue?
The following screenshots show the call stack from the Chrome developer panel:
main.js belongs to progress/kendo-charts/dist/npm
https://i.stack.imgur.com/JLKA3.pnghttps://i.stack.imgur.com/mT3gz.pnghttps://i.stack.imgur.com/ccBn3.pnghttps://i.stack.imgur.com/4y3Hs.png
Chart configuration
import { ChartConfigInterface } from '../../shared/components/charts/interfaces/chart-config-interface';
export const ChartConfig: ChartConfigInterface = {
legend: {
visible: false
},
axisDefaults: {
majorGridLines: false
},
seriesDefaults: {
type: 'column',
labels: {
position: 'insideBase',
margin: -24,
format: 'n',
visible: true,
content: e => e.series.name
}
},
valueAxis: {
labels: {
step: 5,
},
majorUnit: 1,
type: 'numeric'
},
chartArea: {
height: 280
},
plotArea: {
margin: 10,
padding: 0
},
transitions: false
};
package.json
"@progress/kendo-angular-charts": "1.2.2",
"@progress/kendo-angular-dialog": "0.20.0",
"@progress/kendo-angular-intl": "1.2.2",
"@progress/kendo-angular-l10n": "0.3.0",
"@progress/kendo-angular-popup": "0.17.0",
"@progress/kendo-drawing": "1.1.2",
"@progress/kendo-theme-default": "2.33.5"
Additionally, I encounter a few errors upon loading my home page.
Unhandled Promise rejection: Cannot read property 'observers' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'observers' of undefined
at ChartComponent.requiresHandlers (chart.component.js:291)
at ChartInstanceObserver.requiresHandlers (main.js:461)
at Chart.requiresHandlers (main.js:110326)
at Chart._shouldAttachMouseMove (main.js:21873)
at Chart._attachEvents (main.js:21107)
at main.js:20591
at ZoneDelegate.invoke (vendors.js?78cf9b57189af0bd597d:14920)
at Zone.run (vendors.js?78cf9b57189af0bd597d:14680)
at vendors.js?78cf9b57189af0bd597d:15315
at ZoneDelegate.invokeTask (vendors.js?78cf9b57189af0bd597d:14953)
at Zone.runTask (vendors.js?78cf9b57189af0bd597d:14720)
at drainMicroTaskQueue (vendors.js?78cf9b57189af0bd597d:15148)
TypeError: Cannot read property 'observers' of undefined
at ChartComponent.requiresHandlers (http://localhost/app.js?78cf9b57189af0bd597d:87177:35)
at ChartInstanceObserver.requiresHandlers (http://localhost/app.js?78cf9b57189af0bd597d:89711...