Questions tagged [vue-chartjs]
vue-chartjs is a Vue.js wrapper for Chart.js. It allows you to create reuseable chart components in Vue.js
415
questions
0
votes
0
answers
15
views
vue3 vue-chartjs how to use prop from parent component to child component in mounted()
New to vue and vue-chart, I'm trying to have 2 pies on a page where the undelying query is a parameter (prop)
This my main vue
<template>
<div>
<div class="container&...
0
votes
0
answers
24
views
vue vue-chartjs chart.js set different point styles for each dataset
I have a multiline line chart, works nicely, I have a graph title, axis titles, different colors for each line, legend.
What I cannot get working is having a different point style, marker, for each ...
0
votes
1
answer
60
views
Cannot read properties of undefined (reading 'animateScale')
I'm using Vue 3, Chart.js 4.4.0 and vue-chart-js 5.2.0. And when I access the component whose code is attached below, errors like "Cannot read properties of undefined (reading 'animateScale')&...
0
votes
0
answers
95
views
Vue3 script setup ChartJS not rendering with reactive data
As most advice, I've read from the forums is to use computed or props when trying to pass a reactive value on Chart data. I have done that but the issue is the chart does not even display.
<script ...
1
vote
1
answer
71
views
You may need an appropriate loader to handle this file type with Vue and vue-chartjs
I have an application which has other pages working and I am trying to add a page with a chart. To try it out I made changes to include the packages
"dependencies": {
"@aws-amplify/ui-...
0
votes
1
answer
81
views
vue.js 3 typescript vue-chartjs Radar data not reactive
I have a problem with vue 3 vue-chartjs not updating the data when I add a new dataset. Basically the data is not reactive. If I add a new hardcoded object with datasets it works, but not when its ...
0
votes
0
answers
89
views
How to rerender the line chart based on data change in vue-chartjs?
I am creating a component ScatterChart.vue within my Nuxt 3 or Vue 3 application and I am sending value to it from the parent component based on which I want the line graph to be drawn. Currently, I ...
0
votes
0
answers
16
views
Legend height limit and legend scroll
How to limit legend height and add X-scroll to it.
The legend occupies the entire canvas height and limits the chart height.
I need to add X-scorll for legend, and add search for it, but I'll try to ...
0
votes
0
answers
56
views
How to show labels above X axis in a line chart in chartjs
I Want to achieve something like this in chartjs line chart where i can show labels on top of X axis ,Right now my chart looks like this.
I could not find it in the chartjs documentation.Pulgins i ...
2
votes
0
answers
50
views
Differents behaviours in chrome and Mozilla Firefox with same vue-charts dataset
I'm expecting the result I get in Google chrome than Mozilla firefox, but in Mozilla firefox after using the quick-pivot library is painted differently in Mozilla firefox due to to mixing the ...
0
votes
1
answer
88
views
How to convert vue-chartjs to compositionAPI?
I have been working with vue3 for some months now, and for a new project want to use chart.js - so I found vue-chartjs which I thought would help.
The sample shown in the link is written in the '...
1
vote
1
answer
73
views
Vue Chart.JS with Line component : Uncaught Error: class does not have id: [object Object]
I got this exception when using Line component. With Bar it works.
core.typedRegistry.js:38 Uncaught Error: class does not have id: [object Object]
at TypedRegistry.register (core.typedRegistry.js:...
0
votes
1
answer
163
views
How to show doughnut chart empty with custom color when empty or no data with doughnut rings?
I use this doughnut chart from chartjs in vue using vue-chartjs.
By default the doughnut chart when there are no data or all values are empty it show nothing. Is there a way to show doughnut chart ...
0
votes
1
answer
88
views
VUE-CHART this.renderChart is not a function
I'm trying to make a chart in Vue.js but I'm getting this error all the time:
Uncaught (in promise) TypeError: this.renderChart is not a function
Here is my code:
<template>
<div>
&...
1
vote
0
answers
37
views
typescript error when using data structures in vue-chartjs
The vue-chartjs Line chart wants a type of
ChartData<"line",(number | Point | null)[],unknown>
as data.
In native chartjs you are supposed to adjust the type. (ChartData <'bar', {...
0
votes
0
answers
57
views
Label on Chartjs and Vue not displaying
I am working on a chart that should display a graphic with bars and lines. I want to show the number on the chart, but i can't make it. The console gives me this error:
Cannot read properties of ...
0
votes
0
answers
82
views
Changing data as tabs are clicked in vue-chartjs
I am using vue-chartjs on a page. I created a tab system. When tab-items are clicked, the content changes. I want to update the data of the line chart when tab-items are clicked, but I couldn't manage ...
0
votes
0
answers
51
views
Watcher not firing
I'm trying to find out what I'm doing wrong. Watcher not firing when childProps is changed. I look at Vue devtools show that object is changing. But when I do a console.log it doesn't show that it's ...
0
votes
0
answers
75
views
No line in Line chart , when there is only one data point {in chart js/VueChart js}
Using Vue-chart-js in the below line graph I need a line when there is only one data point, i used beginAtZero: true,, but still no luck.
dates in x axis and count in y axis with a single data point
1
vote
1
answer
98
views
Rendering a chart with multiple y axes will display both datasets on the larger scale
Rendering a chart with multiple y axes will display both datasets on the larger scale. I'm trying multiple ways in the chart options to tell the second y axis to use another scale. Expected behavior ...
0
votes
0
answers
61
views
How to center ticks labels in Chartjs?
I want to align my labels (sunday,monday ect....) center in the grey background, how can I do that in chartJS ?
I would need something like padding top but I cant see it in documentation. My code:
...
0
votes
0
answers
134
views
Getting error while updating the chart.js version 3.9.1 to 4.3.0 in vue2 project
Currently, I'm using chart.js 3.9.1.I want to upgrade the version 4.3.0 for new features.
Getting below error while updating 4.3.0 then run the vue2 project.
package.json :
"chart.js": &...
0
votes
0
answers
21
views
Legend's font family not set correctly at app's start
So, I have been working with vue-chartjs and chartjs to create some custom components in a vue3 component library.
My charts work just fine, with one exception. When my Doughnut chart is first ...
0
votes
1
answer
70
views
How to call chart-zoom resetZoom function when char data changes?
I have a Vue project with following packages installed.
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]
I created a "LineChart.vue" ...
0
votes
0
answers
30
views
How to set tooltip toFixed(4) when using mode: index
enter image description here
Like in the image, it's a official stacked bar example, how can i make the tooltip show 4 decimals when i am using mode: index?
Show 4 decimals
I've tried with callbacks, ...
1
vote
0
answers
166
views
How to show dashed grid line with Vue-ChartjS
I'm using vue-chartjs, which is recommended in the integration part of the Chart.js documentation.
I want to ask that how to setup the dashed grid line like this.
I try with
options = {
...
0
votes
0
answers
19
views
i want to achive the formate of tooltip in chartjs
image
i want to show y axis formated value (in specific color) a custom text with it in black text
my approach
soo far i managed to come to this point
this is my actual code using callbacks
tooltip: ...
0
votes
0
answers
62
views
How can I use plugins with vuechart.js v5.2.0
I have a Linear chart which works perfectly fine but I would like there to be some spacing between the legend to improve it visually.
As far as I know, this can be done in chartjs with plugins, like ...
1
vote
0
answers
64
views
Vue-chart-js data retrieval from API doesn't render BarChart
Using vue-chartjs my chart doesnt get rendered.
I have the following JSON structure coming from my API:
[{"source_ip":"xxx","event_count":203},{"source_ip":&...
0
votes
2
answers
284
views
How can I apply a linear gradient to fill in chart.js
I use chart.js and vue-chartjs
I need make fill (start) with gradient:
linear-gradient(180deg, #7F56D9 0%, rgba(127, 86, 217, 0) 95.55%);
like this
image
My config
const chartData = {
labels: ['2022-...
0
votes
0
answers
122
views
How can I update my VueJS barchart using this.$refs.bar.chart.update()?
VueJS Barchart refuses to update on data change
I tried to force the changes using this.$refs.bar.chart.update() after adding the ref to my bar component. Yet the function didn't seem to be recognized ...
0
votes
1
answer
157
views
how to format label on PolarArea chart.js vue-chartjs
I've got vue chartjs setup and I want to format label/show 95.7% instead of raw 0.957 as in the screenshot. Same setup I try here works for Line chart, but can't make it work in PolarArea.
"...
0
votes
0
answers
71
views
[email protected] [email protected] objects as data
I'm new to chartjs.
I want to ask is there an option to pass data as the documentation suggests?
like
<Bar v-if="chartData !== null" :data="chartData" :options="options&...
4
votes
1
answer
3k
views
What is the proper way to include chart.js with Nuxt 3.4?
There are some tutorials out there (e.g. https://medium.com/geekculture/chart-js-in-nuxt-js-how-to-implement-c255a2657b02) that show how to integrate Chart.js with an earlier version of Nuxt 3 or even ...
0
votes
1
answer
277
views
vue-Chart.js - When I add data, charts are not updated
vue-Chart.js - After I hit add data to my chart via addchart button, but the number of charts is not increasing but my data count is increasing. i have tried many ways but i can't fix it, anyone ...
1
vote
1
answer
170
views
Click event on vue bar chartjs with composition API
I'm trying to create an event that fires when the user click on a single bar, I've read the Chartjs docs and look for others with the same needs but there nothing specific about how to handle this ...
2
votes
1
answer
100
views
How to update a line graph dynamically with Vue-Chartjs efficiently?
I have this working code updating a chart where onMount simulates an update of some sorts. But it doesn't seem very efficient in the OnMounted hook to completely destructure the array and rebuild it ...
1
vote
1
answer
313
views
how to re render vuechartjs in composition API
I'm trying to re render a chart through an event on a button @click. The scenario is the following:
I have a parent component that pass an object's array with all the info that the son component will ...
1
vote
1
answer
378
views
Vue chart reactive example
I'm trying to make a vue chart with vue-chartjs in vue 3 and composition API, the issue comes when I try to make a chart like this one On this chart I need to put several labels with it's value of ...
0
votes
1
answer
273
views
How to draw a line in chartjs Scatter graph with vuejs?
I am working on a data visualization project. I use Django as a backend and Vue as a front. To draw graphs I use chartjs.
For the Scatter chart, I need to draw median lines (vertical and horizontal). ...
0
votes
1
answer
563
views
Y axis labels are getting cut off on horizontal bar chart in Mobile view + ChartJS v4
I have a Nuxt 3 application with Vue 3. I am using composition API with typescript. In my package.json file I have the below dependencies:
{
...
"dependencies": {
"chart.js"...
0
votes
1
answer
159
views
chart in $refs cannot be referenced
I have a working vue-chartjs.
When trying to optimize it, I got in a situation regarding $refs.
To conextualize, I get some external data and update the chart ref="myChart".
calling:
this.$...
0
votes
0
answers
70
views
issue downloading Vue-chart.js chart as a PNG
I cannot get a my vue-chart.js canvas to download using toDataURL() I have tried multiple methods with no success and continue to run into a tainted canvas error wondering if anyone else has had this ...
1
vote
1
answer
175
views
How to populate a chart with data coming from API?
I use vue-chart.js along with Vue2 to create a chart. I have a problem with passing API data to a chart. I use Vuex store where I fetch data from API. There's a poor example on vue-chartjs.org showing ...
0
votes
0
answers
264
views
Module "Mixins" is not found in vue-chartjs
I'm currently trying to import the mixins modules from vue-chartjs in order to use them. However, the program returns me a "not found" everytime i try it.
Here's the list of my import, who ...
0
votes
1
answer
70
views
vueChart.js child component not updating with data
I'm creating a bar chart that displays data for crime in a particular location. You can choose the location using a select, this updates the longitude and latitude in the location fetch.
I loop ...
0
votes
1
answer
187
views
How yo update chart with script setup?
How can i make the update function rerender the chart? Clicking it does change the ref values but it doesnt change the chart itself. I am confused about using the computed function stated in the doc. ...
1
vote
0
answers
73
views
vue-chartjs vue-class-component chartOptions not working
I am busy migrating to [email protected] from [email protected] and found that during the upgrade for some reason vue-chartjs chartOptions is not working.
I defined my lineChart like this in html:
<line-chart v-if=&...
2
votes
0
answers
222
views
Create a label per column using stacked bar chart with groups
is it posible add a label per column on the bottom?
Each dataset is a subset (subactivities) and i want to add the principal activity per column. The black labels (on the bottom) are states and i want ...
0
votes
0
answers
233
views
Vue 3. vue-chartjs and chart.js are compiled with an error on the server: TypeError: Cannot read properties of undefined (reading 'labels')
Everything works on localhost, there are no problems, but when the project is compiled on the server, an error occurs when building the vue-chartjs and chart libraries.js TypeError: Cannot read ...