kendo react chart onclick

3 posts, 0 answers
  1. Mohammad
    Mohammad avatar
    17 posts
    Member since:
    Jan 2019

    Posted 01 Sep Link to this post

    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. Mohammad
    Mohammad avatar
    17 posts
    Member since:
    Jan 2019

    Posted 01 Sep in reply to Mohammad Link to this post

    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
  3. Stefan
    Admin
    Stefan avatar
    2950 posts

    Posted 01 Sep Link to this post

    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).

Back to Top