422 questions
0
votes
0
answers
32
views
How to handle event on data label in Vue Chart.js?
This is my chart component and I want to handle events on labels I define in data. I would like to show the tooltip with bar data when I hover on a label.
<template>
<Bar :data="data&...
- 1,073
0
votes
1
answer
45
views
Using JSON data from an api call to reactively update a chart
I am trying to use response data from my api call to populate a Pie Chart from Chart.js.
The issue is that the UI does not update after the response data is assigned to the chartData object.
These are ...
1
vote
0
answers
35
views
How to incorporate draggable feature into vue-chartjs?
I created a BarChart using vue-chartjs and have marked the threshold values using arrows
Here's the code
<template>
<Bar :data="data" :options="options" />
</...
- 103
1
vote
1
answer
63
views
How to customize the scale for bar charts?
I'm learning to use https://www.npmjs.com/package/vue-chartjs
I'm trying to create a bar chart with y-axis scale ranging from -20 to 70. I'm unable to see the bars in the negative range. I tried using ...
- 103
1
vote
1
answer
47
views
How to make a line chart with unequally spaced x values
Making a scatter plot with vue-chartjs <Scatter> was perfect:
Now the user asks for the same chart but with points connected. So I tried to change <Scatter> to <Line>. But the ...
- 1,729
0
votes
1
answer
61
views
Customize ChartJS Dougnut Border on Hover
I have this following Prototype created by our Designer using Figma.
My stack is:
Vuejs
Bootstrap
ChartJS
So my questions is can we add this custom border on certain segment on click?
Goals:
Add &...
- 31
-1
votes
1
answer
147
views
How to create a chart with custom graphics? [closed]
I need to create a chart looking like the image above, but I have no idea how. The data needs to be dynamic and it would great to also include some animation when the chart is loaded.
My tech stack ...
- 72
0
votes
1
answer
106
views
How to show dashed Y-axis, center X-ticks, and hide X-grid in Vue-Chartjs?
I need a horizontal dashed line, no y-axis ticks, hidden x-axis grid lines, and centered x-axis ticks for my bar chart. Solution required in vue-chartjs.
Chartjs installed package:
"chart.js"...
- 3,155
0
votes
0
answers
66
views
Chartjs - disable hover effects/z-index
I have a chart-js (v4) donut chart with two data vals ver dataset - an 'active' value (in orange) and an 'empty' value in grey which is an upper limit - value
two values per dataset
The arcs/radials ...
0
votes
0
answers
123
views
Error updating real-time data with chart.js
I want to create a chart using WebSocket to display real-time information in Vue using vue-chartjs and chart.js. The issue is that for some reason, the data is not displaying. The array of numbers ...
- 71
2
votes
0
answers
132
views
How to hide the chartjs-chart-treemap text data
Here is my Vue3 project issue, I use chart.js package "chartjs-chart-treemap" to draw
As you can see in the picture, there is a gray text that should not appear.
My chart.js version is &...
- 21
0
votes
0
answers
76
views
Dynamically resize chart.js charts when adding new charts to fixed size container
function addChart(key, colors) {
const chartData = getChartData(currentYear.value, key);
const chart = {
chart: null,
data: chartData,
colors: colors,
key: key
};
charts....
- 75
1
vote
0
answers
114
views
I need to change my label style onClick Vue-chartjs
I am using Chart.js to create a Doughnut chart with Vue.js, and I want to customize the legend items when they are clicked. Specifically, I want to change the color and add a line-through style to the ...
- 11
0
votes
0
answers
120
views
Resizing all charts dynamically in fixed size container in chart.js
I'm using chart.js (or more specifically vue-chartjs) for a component I want to use on a dashboard page. The user is supposed to be able to add new charts to the component using the dashboard. Since ...
- 75
1
vote
1
answer
223
views
Why isn't the 'labelColor' callback for the Chart.js Tooltip applying any changes?
I'm using vue-chartjs to display a line chart, and right now I'm customizing the appearance. I'm finding that certain attributes to style the Tooltip are not working. I'm currently trying the ...
- 23
0
votes
0
answers
121
views
Updating chart data realtime from separate component
I'm pretty new to vue-chartjs and chartjs in general but I have a nuxt app (with electron) which is supposed to render the graph data live. Right now I just have sample data with an event listener ...
- 1
0
votes
0
answers
193
views
ChartJS and Vue-ChartJS: Scales in chart options do not work
I just started using ChartJS and VueChartJS and begin with a simple bar chart. The problem is that the scales in chartOptions do not affect the UI.I used ChartJS 4.4.2 and VueChartJS 5.3.1.
Here's my ...
- 69
0
votes
0
answers
197
views
Vue Chart.JS plugin-annotation throwing error: Cannot find module 'chartjs-plugin-annotation' or its corresponding type declarations
I am having trouble configuring chartjs-plugin-annotation.
I have it setup as a dependency in my vue project as well as chart.js
Versions:
"chart.js": "^4.4.2",
"chartjs-...
1
vote
1
answer
131
views
How to use vue-chartjs with unplugin-vue-components?
I try to use unplugin-vue-components to automatically import Vue components from vue-chartjs, but I don't know how.
I found this in unplugin-vue-components documentation:
You can also write your own ...
- 13
0
votes
0
answers
74
views
Zooming in/out does not accurately use the mouse position
Whenever I am zooming in/out it displaces the mouse cursor and it does not actually zoom in where I put my mouse
Using a BarChart
Using: "chartjs-plugin-zoom": "2.0.1"
I tried ...
- 1
0
votes
0
answers
174
views
How can I create a reusable LineChart component that sometimes adds a gradient fill using vue-chartjs v5?
I'm currently trying to build a flexible, reusable line chart component using vue-chartjs v5. It's working well so far, but I've struggled mightily to get a gradient fill working on it. I've found ...
- 263
0
votes
1
answer
162
views
Vue-chartjs TypeError: Cannot use 'in' operator to search for 'datasets' in undefined
I got this error trying to use vue-chartjs LineChart in Vue 3.
<template>
<va-modal blur size="large" v-model="showCountryModal" no-padding>
<template #content=...
0
votes
0
answers
116
views
Chartjs - Module parse failed: Unexpected token (567:17) at vuejs 3 project
I installed vue-chartjs via npm command, to mu vuejs 3 project
but I can't build my project, I see an error.
error in ./node_modules/chart.js/dist/chart.js
Module parse failed: Unexpected token (567:...
- 14.1k
0
votes
1
answer
128
views
How to change axis color in vue-chartjs?
I don't know how to change the color of the axis. Maybe someone of you had a similar problem. The graph looks like the one in the picture. I don't know if this is a result of the fact that my graph is ...
- 11
0
votes
1
answer
118
views
The graph cannot be displayed
I have used vue js and vue chart js latest version until now.
I tried drawing a Bar graph and edited the main.js file as follows
import { BarElement, CategoryScale, Chart as ChartJS, Legend, ...
- 387
0
votes
1
answer
140
views
Can a Qausar slider value control a vue-chartjs chart? (Vue3, Quasar, Chartjs)
I'm building a budget app with quasar.
I'm trying to update the bar value of a chartjs BarChart with a q-slider.
But the bar isn't updating when I submit the value. The 'income.value' gives me the ...
0
votes
1
answer
437
views
How to use chartjs-gauge with vue-chartjs?
I am using vue-chartjs in my Vue2 application.
https://vue-chartjs.org/
I want to create a gauge chart and tried using chartjs-gauge library.
https://www.npmjs.com/package/chartjs-gauge
But I can't ...
- 615
0
votes
0
answers
243
views
Chart.JS Styling Legend
i'm trying to write untitled ui's line chart on vue.js and i couldn't reach this legend styling no matter what i try:
and i reached this:
here is the related code below:
//
plugins: [
...
0
votes
0
answers
152
views
Testing a component with a chart
I'm working with vue 3.4.3 (option API) and vitest and I wan't to test a component containing a chart made with vue-chartjs, here is my test file :
import { expect, describe, test, beforeEach, vi } ...
- 1
0
votes
0
answers
104
views
Change shape of labels vue-chartjs
I'm using vue-chartjs to display some charts, the labels show rectangle shape beside them, i want to change that shape from rectangle to circle, how can i do that ?
<script setup>
import {
...
- 167
0
votes
1
answer
156
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&...
- 136
0
votes
0
answers
129
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 ...
- 31
1
vote
1
answer
395
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 ...
- 595
1
vote
1
answer
358
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-...
- 105
0
votes
1
answer
363
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 ...
- 300
1
vote
0
answers
211
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 ...
- 3,480
2
votes
0
answers
93
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 ...
- 403
0
votes
1
answer
664
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,407
1
vote
1
answer
267
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:...
- 1,107
0
votes
1
answer
906
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 ...
- 391
0
votes
1
answer
280
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>
&...
- 31
2
votes
0
answers
145
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', {...
- 21
0
votes
0
answers
95
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 ...
- 31
0
votes
0
answers
64
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 ...
- 672
0
votes
1
answer
177
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
- 229
1
vote
1
answer
274
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 ...
- 27
1
vote
0
answers
137
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:
...
- 11
0
votes
1
answer
148
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" ...
1
vote
0
answers
568
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 = {
...
- 41
1
vote
0
answers
74
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":&...
