CODEWITHSUNDEEP
javascriptangularkendo-uikendo-chart
Lysandus
Lysandus

Reputation: 764

Kendo chart seriesClick event left click not firing but right click is

I have a kendo chart that I need to have the columns clickable on. I added the seriesCLick event but it is only working with right clicks and not left clicks.

<kendo-chart [ngStyle]="{'width': '100%', 'height': chartHeight + 'px', 'border': '0px'}"
              (seriesClick)="onSeriesClick($event)" #kendoChart>
    <kendo-chart-tooltip>
        <ng-template kendoChartSeriesTooltipTemplate let-dataItem="dataItem">
            <div class="p-2 text-center speech-bubble">
                <div>{{ dataItem.storeName }}</div>
                <div>{{ dataItem.count }} {{ dataItem.status }} Items</div>
                <div class="badge" [ngStyle]="{'background-color': dataItem.color, 'color': 'white'}">{{ dataItem.formattedName }}</div>
            </div>
        </ng-template>
    </kendo-chart-tooltip>
    <kendo-chart-category-axis>
        <kendo-chart-category-axis-item [majorGridLines]="majorGridLines">
            <kendo-chart-category-axis-item-labels [visible]="true">
            </kendo-chart-category-axis-item-labels>
        </kendo-chart-category-axis-item>
    </kendo-chart-category-axis>
    <kendo-chart-series>
        <kendo-chart-series-item *ngFor="let item of chartData$ | async"
                                 [data]="item.items"
                                 [name]="item.count"
                                 field="count"
                                 categoryField="formattedName"
                                 type="column"
                                 [stack]="true"
                                 [border]="borderOptions">
        </kendo-chart-series-item>
    </kendo-chart-series>
</kendo-chart>

In my controller.

public onSeriesClick(e: any): void {
    console.log("seriesClick: ", e.dataItem.id);
    // this is never called.
}

Upvotes: 0

Views: 829

Answers (1)

Alexey
Alexey

Reputation: 21

This problem may be due to incorrect import 'hammerjs'

If so, you will also have some errors in the console. Check if the hammerjs is installed.

And, important, add string import 'hammerjs'; in your app.module.ts file

Upvotes: 2

Related Questions