419 questions
0
votes
1
answer
81
views
Chart.JS overflowing labels
I am using the ChartJS library with a Vue Chart wrapper library.
Playground/Demo
My current issue is, when you open the playground, you can see the date labels on the X axis sort of "overflow&...
0
votes
2
answers
73
views
Prevent hiding of second-last grid line [closed]
I'm using ChartJS with Vue:
"chart.js": "^4.4.9",
"vue": "^3.5.13",
"vue-chartjs": "^5.3.2",
My line chart has data where the x values ...
1
vote
1
answer
144
views
chart.js line segment coloring
in chart js (4.4.8)
i want to give discrete line colors based on a baseline and threshold value of the data point.
when i give line segment colors it appies color to whole line segment and looks ...
0
votes
0
answers
57
views
Change bar graph option in vue-chartjs when using umd
I'm trying to draw some mixed graphs (Histogram and lines) on a one page HTML integrating Vue and Vuetify. Apprently only vuechartJS as a package that could be integrated with
I managed to extends ...
0
votes
0
answers
96
views
vue-chartjs "Module not found: Error: Package path ./dist/Chart.js is not exported from package"
I'm trying to use vue-chartjs but I'm having issues with the dependent chart.js installation.
Error:
ERROR in ./node_modules/vue-chartjs/dist/index.js 1:0-190 Module not found: Error: Package path ./...
0
votes
0
answers
98
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&...
0
votes
1
answer
107
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
67
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" />
</...
1
vote
1
answer
139
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 ...
1
vote
1
answer
93
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 ...
0
votes
1
answer
122
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 &...
-1
votes
1
answer
215
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 ...
0
votes
1
answer
147
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"...
0
votes
0
answers
151
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 ...
2
votes
0
answers
218
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 &...
0
votes
0
answers
107
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....
1
vote
0
answers
158
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 ...
0
votes
0
answers
172
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 ...
1
vote
1
answer
395
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 ...
0
votes
0
answers
243
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 ...
0
votes
0
answers
255
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
155
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 ...
0
votes
1
answer
268
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
1
answer
153
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 ...
0
votes
1
answer
131
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, ...
0
votes
1
answer
191
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
543
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 ...
0
votes
1
answer
171
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
144
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 ...
1
vote
1
answer
471
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
411
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
440
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 ...
1
vote
0
answers
232
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 ...
2
votes
0
answers
128
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
891
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
314
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
1k
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
308
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>
&...
2
votes
0
answers
179
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
101
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
66
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
1
answer
250
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
354
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 ...
1
vote
0
answers
157
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
1
answer
206
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
739
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 = {
scales:...
1
vote
0
answers
77
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":&...
1
vote
2
answers
2k
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
298
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
310
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.
"...