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

Filter by
Sorted by
Tagged with
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&...
Francois's user avatar
  • 124
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 ...
Ken's user avatar
  • 31
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')&...
skiv's user avatar
  • 1
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 ...
Shulz's user avatar
  • 518
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-...
krisrr3's user avatar
  • 97
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 ...
ukw's user avatar
  • 168
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 ...
BATMAN_2008's user avatar
  • 2,869
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 ...
Пётр Георгиев's user avatar
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 ...
Faizan Farooq's user avatar
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 ...
tsiPlus's user avatar
  • 133
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 '...
quilkin's user avatar
  • 1,077
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:...
Jean François Manatane's user avatar
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 ...
Vishal Sagar's user avatar
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> &...
Corboss's user avatar
  • 31
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', {...
Toaster2-0's user avatar
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 ...
Corboss's user avatar
  • 31
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 ...
Sercan Aslan's user avatar
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 ...
Eric Evans's user avatar
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
massu1000's user avatar
  • 209
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 ...
samiam's user avatar
  • 27
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: ...
Paulina Mi's user avatar
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": &...
venkata suresh's user avatar
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 ...
elita185's user avatar
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" ...
Forrest Hong's user avatar
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, ...
ye frank's user avatar
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 = { ...
Tuong Van's user avatar
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: ...
Muhammad Waheed's user avatar
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 ...
elita185's user avatar
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":&...
FedericoGabusi's user avatar
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-...
Oleksandr's user avatar
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 ...
Ghost's user avatar
  • 21
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. "...
Jarek Tkaczyk's user avatar
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&...
IdoS99's user avatar
  • 11
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 ...
Robert Wildling's user avatar
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 ...
nongtan's user avatar
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 ...
francesco14's user avatar
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 ...
user13576487's user avatar
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 ...
francesco14's user avatar
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 ...
tsiPlus's user avatar
  • 133
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). ...
Azamat Uzbekov's user avatar
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"...
myverdict's user avatar
  • 662
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.$...
rsd's user avatar
  • 67
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 ...
Jarryd_P's user avatar
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 ...
mustafa00's user avatar
  • 781
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 ...
FelixCrd's user avatar
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 ...
bm17's user avatar
  • 1
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. ...
funkyj4ever's user avatar
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=&...
tomthedude's user avatar
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 ...
user1939481's user avatar
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 ...
FatData Team's user avatar

1
2 3 4 5
9