This is a migrated thread and some comments may be shown as answers.

kendo react chart onclick

2 Answers 149 Views
Wrappers for React
This is a migrated thread and some comments may be shown as answers.
Mohammad
Top achievements
Rank 1
Veteran
Mohammad asked on 01 Sep 2020, 07:09 AM

How can I run an onclick event on the kendo chart?

I want to display the information in this diagram in a larger modal when I click

Thank you for your help

2 Answers, 1 is accepted

Sort by
0
Mohammad
Top achievements
Rank 1
Veteran
answered on 01 Sep 2020, 08:04 AM
My code n
01.
<Chart style={{ height: 150, width: 400 }}
02.onPlotAreaClick={(event) => this.plotareaclick('test', event)}
03.//onSeriesClick={() => this.showModal()}
04.>
05.     {/* <ChartTitle text="Column Chart" /> */}
06.     <ChartLegend position="top" orientation="horizontal" />
07.     {/* <ChartCategoryAxis>
08.     <ChartCategoryAxisItem categories={this.state.category} startAngle={45} />
09.     </ChartCategoryAxis>  */}
10.     <ChartSeries>
11.         {this.state.tagListValue.filter(x => x.name === item.title).map((items, idx) => (
12.             <ChartSeriesItem
13.                 //labels={seriesLabels}
14.                 markers={{ visible: false }}
15.                 key={idx}
16.                 type="line"
17.                 tooltip={{ visible: true }}
18.                 data={items.data}
19.                 name={items.name}
20.             />
21.         ))}
22.     </ChartSeries>
23.</Chart>
ot Work
0
Stefan
Telerik team
answered on 01 Sep 2020, 08:10 AM

Hello, Mohammad,

I see that the correct events are used.

The events may not be fired if the hammerjs package is not imported as it is required for the Chart events:
https://www.telerik.com/kendo-react-ui/components/charts/get-started/#toc-dependencies

Please install and import the hammerjs package, then test if the events are fired as expected.

Regards,
Stefan
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

Tags
Wrappers for React
Asked by
Mohammad
Top achievements
Rank 1
Veteran
Answers by
Mohammad
Top achievements
Rank 1
Veteran
Stefan
Telerik team
Share this question
or