the below code works in stackblitz as expected but not in my local
<template>
<div>
<Chart
:transitions="false"
@seriesclick="notify"
>
<ChartTitle :text="'Gross domestic product growth GDP annual'" />
<ChartLegend :position="'bottom'" :orientation="'horizontal'" />
<ChartCategoryAxis>
<ChartCategoryAxisItem :categories="categories" :start-angle="45" />
</ChartCategoryAxis>
<ChartSeries>
<ChartSeriesItem
v-for="(item, idx) in series"
:key="idx"
:type="'line'"
:style="'smooth'"
:data-items="item.data"
:field="'value'"
:note-text-field="'extremum'"
:name="item.name"
/>
</ChartSeries>
</Chart>
<Logger :title="'Events list'" :events="eventsList" />
</div>
</template>
<script>
import {
Chart,
ChartSeries,
ChartSeriesItem,
ChartCategoryAxis,
ChartCategoryAxisItem,
ChartTitle,
ChartLegend,
} from "@progress/kendo-vue-charts";
export default {
components: {
Chart,
ChartSeries,
ChartSeriesItem,
ChartCategoryAxis,
ChartCategoryAxisItem,
ChartTitle,
ChartLegend
},
data: function () {
return {
events: [],
categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
series: [
{
name: "India",
data: [
{ value: 3.907, },
{ value: 7.943 },
{ value: 7.848 },
{ value: 9.284 },
{ value: 9.263 },
{ value: 9.801 },
{ value: 3.89 },
{ value: 8.238 },
{ value: 9.552 },
{ value: 6.855 },
],
},
],
};
},
computed: {
eventsList(){
return this.events;
}
},
methods: {
onRender() {
this.events.unshift("Render event triggered");
},
notify() {
alert();
this.events.unshift("SeriesClick event triggered");
},
},
};
</script>
Hi, Gayathri.
Can you please share more details about which Chart component version is loaded in your project? Are there any console errors when the Chart is loaded or when you click on specific series?
In addition to the above, I can see that you don't have an active license associated with your account. The Kendo UI for Vue Native suite is a commercial library that requires a license to be used. May I ask you to register a free trial account from this link? Thank you for your cooperation and understanding.