xAxes ticks not updated after new data

[NicoP-S]

Describe the bug

Start: two day range hourly = 48 data elements & labels -> everything OK

Switching to day basis = two data elements and two labels.
The data is updated but the chart xAxes does not. I tried this.$refs.chart.chartInstance.update() but nothing changed
I thought the data i put into the chart is not reactive. So i added an output of the chartData in the template and the data is updating.

I checked the ticks with the following

console.log("Count Labels",this.chartData.labels.length);
console.log("Count Data",this.chartData.datasets[0].data.length);
console.log("Count cAxis ticks",this.$refs.chart.chartInstance.scales.xAxes.ticks.length)

------ FIRST CHART
Count Labels 48
Count Data 48
Count cAxis ticks 24

----- SECOND CHART
Count Labels 2
Count Data 2
Count cAxis ticks 24

Is there a way to force update of the xAxes ticks?

Version of vue-chart-3

v2.0.5*

Version of Vue

• Vue 3
• Vue 2
• Nuxt 2
• Nuxt 3

[mgregory73]

I am experiencing the same issue with the labels not reflecting the data after a change. Seems if you interact with the chart (i.e., selecting a bar) it corrects, so maybe it's a nextTick thing. Anyhow, reverting to 0.5.11 fixes it for now. That said, this project is great and a real life saver. Looking forward to a fix. Thanks so much and keep up the great work.

One other thing: Also with the 2.x version, I had to deep clone the data when it changed else I was getting a Vuex error about mutating the state. Not sure whey that was happening but I don't have the same issue after reverting.

[victorgarciaesgi]

Hi! Sorry for the late reply I don't have much time to look into this. If I find a little spot i swear to look at it! :D If you want to make it easier can you make a codesanbox with your bug? :D

[mgregory73]

Hi Victor,

Again many thanks for the work you've done here.

I don't know if this helps you but the change that causes the labels not to update happens in fix #33,
b3b6769

Specifically, replacing renderChart() at line 151/142 of components.ts with chart.data.datasets = newData.datasets seems to be related. Reverting it locally fixes the issue for me. There are a lot of other refactors in there so I'm not sure that is the simple solution, but it might point you in the right direction.

Cheers

[NicoP-S]

Hi,
I checked the changes of commit b3b6769 and tried to undo them in my code.

After replacing

vue-chart-3/src/components.ts

Line 133 in af4d6b3

chart.data.datasets = newData.datasets;

with the following code it works...

node_modules/vue-chart-3/dist/components.js

if (chart) {
     handleChartDestroy();
}
renderChart();

In my app I use the options api.
Instead of chart.data.datasets = newData.datasets;
i would do something like this.$set(chart.data,'datasets',newData.datasets)
Could this be the problem?

[NicoP-S]

@victorgarciaesgi i got an running codesandbox now
https://codesandbox.io/s/vue-chart-3-vue-2-composition-api-forked-4mf88?file=/src/App.vue

[victorgarciaesgi]

Sorry for responding just now. I will fix it!

[victorgarciaesgi]

Done in v2.1.1!

[NicoP-S]

just wanted to test if it works but can't get the new version v2.1.2 running on my project.
I am using Quasar which uses webpack v4...

Error: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.

this is strange because Vue.use(VueCompositionAPI) is called...
I'll try to find a solution.

[victorgarciaesgi]

@NicoP-S It's a known bug, try updating @vue/composition-apiversion, it should resolve the issue

[NicoP-S]

i updated to latest @vue/composition-api 1.4.6... but the error is still there

[victorgarciaesgi]

Hmm try cleaning node_modules and cache, it's not the first time this error emerges for me and others, and the fix was always to update the @vue/composition-api version or remove/reinstall :/

[NicoP-S]

Ok after delete package-lock.json it is running again. But the graph is still not correct.

I updated my codesandbox too:
https://codesandbox.io/s/vue-chart-3-vue-2-composition-api-forked-4mf88?file=/src/main.js

[victorgarciaesgi]

Thanks for the sandbox! I will look at it :)

[victorgarciaesgi]

It should be the same issue as #108 in Vue 3. I will look at it

[NicoP-S]

@victorgarciaesgi is the fix from issue 108 also working for vue2?

[victorgarciaesgi]

Hum no sorry i overlooked, #108 was a Vue 3 problem, but it should be related, the fix should be the same

[victorgarciaesgi]

Should be fixed in 2.1.3!

[NicoP-S]

@victorgarciaesgi i just tested the codepen and my own codebase and it's working now :)
Thank you!