vue-chart | A Powerful and Highspeed Chart Parser for Vue1.X.X | File Utils library

I have a Nuxt/Vue app with a page displaying a chart. This page also contains

• a modal component that allows users to create a new data point
• a dropdown menu that allows users to select how many days of data do they want the chart to display.

I would like to achieve the following:

• Refresh the page (call my API again) after creating a new data entry
• Refresh the page when the user chooses a different dropdown value

The main problem I'm facing now is that the barchart disappears a few seconds after I close the data entry modal and I can see the following error in the console: Error: [vuex] do not mutate vuex store state outside mutation handlers..

Additionally, I cannot seem to trigger an update by changing the dropdown value, but that is my secondary problem.

Since this example involves an external API, it is difficult to come up with a reproducible example, but here is what my setup looks like:

Good day to all:

Recently I have started working with Vue.js(2.6.12) + Vuetify(2.3.10) and Chart.js(3.0.2). So I'm a newbie (again).

I have created a componenent which wraps the Bar chart that Chart.js allows us to create. Here it's a picture of it:

The only two things that I want to change are the little box that comes near to the legend title and some grid x lines.

In the case of the little legend box is red. I would like that It's aligned with the blue color of the legend title text. As I show you in this picture:

Finally I want to include some color (pink) in the X axis:

I'm unable to achieve this. I have regarded and follow the official documentation and nothing works :S.

• Create the function for painting some axis in colors: https://www.chartjs.org/docs/3.0.2/samples/scale-options/grid.html
• Change the colors of the legend: https://www.chartjs.org/docs/3.0.2/configuration/legend.html#legend-label-configuration

In the case of the legend title box I have noticed that always takes the color of the first element. In the case of the axis, the function supported by chart.js doesn't work for me. It doesn't print me the x axis at all.

Things that I have tried:

• Upgrade to chart.js 3.3.0 but I got an error like this: "" The reason I was using 3.0.2 it's because it's the only version which is working to me from the 3.0.0 versions.
• Downgrade to 2.9.3/4. I wasn't able to change the color of the box or the axis lines, but the rest worked fine.
• Use a wrapper: https://vue-chartjs.org/. It didn't work

Code of the whole component:

MyChart.vue

I added the labels on vue pie chart using vue-chartjs and chartjs-plugin-labels module. But they are displayed on all charts. I want to display the labels on only specific chart. How can I do it?

I'm trying hide the labels along the axis in the following Radial chart:

This is part of a VueJS application using vue-chartjs (which as of time of writing doesn't support version 3 of chart.js and therefore the latest documentation is not applicable)

Versions:

I created a Vue.js project with vue-chartjs. I tried reinstalling the library, however I still got this error:

i am trying to plot a line graph using vue-chartjs and Chart.js (2.7.1). the graph is displayed, but there are no xAxes and yAxes labels.

This is my options object:

working on a covid app to get familiar with vue2js.

Am now trying to get a graph with vue-chartjs but am failing to pass the data to the graph/chart component.

I make an API request with vuex and passing the data to my component: CountryGraph.vue which contains a Graph.vue with the chart itself.

vuex -> CountryGraph.vue -> Graph.vue

Passing data into CountryGraph.vue works:

But when I try to pass my data (countryGraph) as props to my char/Graph.vue component, then it is not done and I get in Graph.vue only the value undefined:

Why?

Below my code, first the CountryGraph.vue: