Hi I'm trying to perfoman example of a Bar chart, I have the following code in the Chart.vue Component:
<template>
<v-container>
<ejs-chart :primaryXAxis="chartPrimaryXAxis">
<e-series-collection>
<e-series type="Column" :dataSource="salesData" xName="month" yName="salesValue">e-series>
e-series-collection>
ejs-chart>
v-container>
template>
<script>
export default {
name: 'chart',
data() {
return {
chartPrimaryXAxis : {
valueType: 'Category',
},
salesData : [
{ month: 'January', salesValue:10 },
{ month: 'Februry', salesValue:11 },
{ month: 'March', salesValue:12 },
{ month: 'April', salesValue:13 }
]
}
}
}
script>
<style scoped>
style>
And I perform th inyection in App.vue:
<template>
<v-app>
<signin-form v-if="global.userRole === null">signin-form>
{{ global.userRole }}
<app-bar-nav v-if="global.userRole !== null"/>
<left-side-bar v-if="global.userRole !== null" :currentRoute="global.currentRoute"/>
<v-main>
<router-view v-if="global.userRole !== null" />
v-main>
v-app>
template>
<script>
import Vue from 'vue';
import { mapState } from 'vuex';
import LeftSideBar from '@/components/LeftSideBar';
import AppBarNav from '@/components/AppBarNav';
import SigninForm from '@/components/forms/SigninForm';
import { ChartPlugin, ColumnSeries, Category } from '@syncfusion/ej2-vue-charts';
Vue.use(ChartPlugin);
export default {
name: 'App',
components: {
LeftSideBar,
AppBarNav,
SigninForm
},
provide: {
chart: [ColumnSeries, Category]
},
computed: {
...mapState(['global']),
},
data() {
return {
dataUser: null,
};
},
};
script>
<style scoped>
style>
I'm following this tutorial, but I reveive the following error:
vue.runtime.esm.js:619 [Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'calculateRangeAndInterval')"
found in
--->
at src/views/Dashboard.vue
warn @ vue.runtime.esm.js:619
logError @ vue.runtime.esm.js:1893
globalHandleError @ vue.runtime.esm.js:1888
handleError @ vue.runtime.esm.js:1848
invokeWithErrorHandling @ vue.runtime.esm.js:1871
callHook @ vue.runtime.esm.js:4235
insert @ vue.runtime.esm.js:3158
invokeInsertHook @ vue.runtime.esm.js:6390
patch @ vue.runtime.esm.js:6609
Vue._update @ vue.runtime.esm.js:3963
updateComponent @ vue.runtime.esm.js:4081
get @ vue.runtime.esm.js:4495
run @ vue.runtime.esm.js:4570
flushSchedulerQueue @ vue.runtime.esm.js:4326
eval @ vue.runtime.esm.js:1989
flushCallbacks @ vue.runtime.esm.js:1915
Promise.then (async)
timerFunc @ vue.runtime.esm.js:1942
nextTick @ vue.runtime.esm.js:1999
queueWatcher @ vue.runtime.esm.js:4418
update @ vue.runtime.esm.js:4560
notify @ vue.runtime.esm.js:730
reactiveSetter @ vue.runtime.esm.js:1055
globalSetRole @ global.js:46
wrappedMutationHandler @ vuex.esm.js:844
commitIterator @ vuex.esm.js:466
eval @ vuex.esm.js:465
_withCommit @ vuex.esm.js:624
commit @ vuex.esm.js:464
boundCommit @ vuex.esm.js:409
globalSetRole @ global.js:19
wrappedActionHandler @ vuex.esm.js:851
dispatch @ vuex.esm.js:516
boundDispatch @ vuex.esm.js:406
signin @ SigninForm.vue:40
click @ SigninForm.vue:84
invokeWithErrorHandling @ vue.runtime.esm.js:1863
invoker @ vue.runtime.esm.js:2188
invokeWithErrorHandling @ vue.runtime.esm.js:1863
Vue.$emit @ vue.runtime.esm.js:3903
click @ VBtn.ts:163
invokeWithErrorHandling @ vue.runtime.esm.js:1863
invoker @ vue.runtime.esm.js:2188
original._wrapper @ vue.runtime.esm.js:6961
vue.runtime.esm.js:1897 TypeError: Cannot read properties of undefined (reading 'calculateRangeAndInterval')
at CartesianAxisLayoutPanel.measureDefinition (cartesian-panel.js:124:1)
at CartesianAxisLayoutPanel.measureColumnAxis (cartesian-panel.js:99:1)
at CartesianAxisLayoutPanel.measureAxis (cartesian-panel.js:37:1)
at Chart.calculateBounds (chart.js:822:1)
at Chart.refreshBound (chart.js:393:1)
at Chart.processData (chart.js:754:1)
at Chart.cartesianChartRendering (chart.js:349:1)
at Observer.eval (chart.js:328:1)
at Observer.notify (observer.js:104:1)
at Base.trigger (base.js:190:1)
Can you help me understand what ismy mistake?
