vue-chart-3: xAxes ticks not updated after new data

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

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 18 (9 by maintainers)

Commits related to this issue

Should fix #80 and #78 — committed to victorgarciaesgi/vue-chart-3 by victorgarciaesgi 2 years ago

Most upvoted comments

Hi, I checked the changes of commit https://github.com/victorgarciaesgi/vue-chart-3/commit/b3b6769c7027493bd0fb7e4b10cee5c0f56888a2 and tried to undo them in my code.

After replacing https://github.com/victorgarciaesgi/vue-chart-3/blob/af4d6b31434cd80f0410aa1f139e34e5b0c9b1aa/src/components.ts#L133 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 on Feb 3, 2022

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.

mgregory73 on Jan 19, 2022