apexcharts / vue3-apexcharts

📊 Vue-3 component for ApexCharts
MIT License
314 stars 35 forks source link

Categories issue #35

Closed ravenshore closed 3 months ago

ravenshore commented 3 years ago

Hi,

thanks for the great plugin first of all! I have used several charts so far, but the bar chart surprisingly is giving me a ton of headache. Managed to implement heatmaps and pie charts on Vue 3, but the bar... Whenever I try to update the Options to update the categories I get a duplicate of the chart, like so:

image

Tried using this method, as described here:

        updateBarChartOptions() {

            let cats = this.loadDurationCategories();

            console.log('Categories updating to: ' + cats)

                this.chartOptions4 = { 

                    ...this.chartOptions4,
                    ...{
                    xaxis: {
                        categories: cats
                    }
                }
            }
        },

Tried to update them, by just using a computed property, like so:

        durationCategories() {
            let categories = this.loadDurationCategories()
            return categories
        },

Where the loadDurationategories() method just returns a new Array, like: [1, 2, 3.... etc] The computed property seems to not work at all, as I am getting an error from the slice, indicating that the array never makes it to the chart.

Any help is greatly appreciated! Thanks!

ravenshore commented 3 years ago

Forgot to mention one more issue, if you look at the chart, the number of series and the number of categories is exactly the same: 11, but the width doesn't match. image

So they all look completely off.

ravenshore commented 3 years ago

If I bunch all my data into a single Series, then the columns match the categories perfectly, but then then I still have the issue with the duplicate charts, every time I update the Options. However I would prefer to have the separate series for each entry, so I can have different colors. image

conor-f commented 2 years ago

Check #25 I was having similar issues and it was a matter of the watch not looking deep enough so I updated the entire chartOptions object.

github-actions[bot] commented 3 months ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.