All Questions
Tagged with chart.js vue-chartjs
256
questions
1
vote
1
answer
38
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,709
0
votes
1
answer
47
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
122
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
98
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,065
0
votes
0
answers
59
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
117
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
122
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
73
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
105
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
110
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
184
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
112
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
183
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
174
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-...
0
votes
0
answers
70
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
109
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:...
- 14k
0
votes
1
answer
406
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 ...
- 605
0
votes
0
answers
234
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
102
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 {
...
- 127
0
votes
0
answers
125
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
0
votes
0
answers
128
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')&...
- 1
1
vote
1
answer
380
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 ...
- 596
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,440
2
votes
0
answers
85
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 ...
- 407
1
vote
1
answer
253
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,095
0
votes
1
answer
874
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
0
answers
94
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
1
answer
172
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
248
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
135
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
1
vote
0
answers
535
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
2
answers
1k
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-...
- 63
0
votes
1
answer
292
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.
"...
- 80.9k
2
votes
1
answer
188
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 ...
- 61
0
votes
1
answer
558
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). ...
- 150
1
vote
1
answer
1k
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"...
- 912
0
votes
1
answer
245
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.$...
- 67
1
vote
1
answer
234
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 ...
- 881
0
votes
1
answer
670
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 ...
- 1
0
votes
1
answer
96
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 ...
- 1
2
votes
0
answers
377
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 ...
- 59
0
votes
0
answers
494
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 ...
1
vote
1
answer
2k
views
vue-chartjs 5 error: "You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file"
I am running:
"vue-chartjs": "^5.2.0",
"chart.js": "^4.2.1",
"vue": "2.7.14",
I believe these are the correct and compatiable package ...
- 41
0
votes
1
answer
296
views
vue chartjs no strikethrough on legend click
I've recently upgraded my site from vue 2 to vue 3 and as part of that I had to upgrade the versions of vue-chartjs and chartjs too.
Now after I change the legend text of my pie chart using the ...
- 58.3k
2
votes
1
answer
2k
views
vue 3 chart js chart is undefined in click event
I am currently trying to upgrade my site to vue 3 from vue 2 and as part of this, I have had to updgrade vue-chartjs from version 4 to 5 and it seems to have broken my click event.
Previously I had ...
- 58.3k
0
votes
0
answers
188
views
vue3 filtered data on computed with chartjs
im learning about vuejs 3 and for example i want to show a chartjs with a combo to filter data. (Without the combo, everything works correctly)
i have a parent component chartjs.vue where import the ...
- 59
2
votes
1
answer
1k
views
Javascript - ChartJS Trying to change the borderColor and the fill color for negative numbers
I am currently creating a LineChart with ChartJs that represents someone's profits. These can be positive or negative.
I want the lines above zero to be green and the lines below to be red. Also, the ...
- 33
5
votes
3
answers
4k
views
Chart.js hover over label
I have a bar chart in Chart.js (using the latest version), and I want to make some visual change when the mouse is hovering over a category label. How would I implement either or both of the following ...
- 1,082
0
votes
1
answer
659
views
Chart.js customize individual vertical axis labels
I am using Chart.js to create a horizontal bar chart as shown below. The y axis has three labels: A, B, C. How do I style those vertical labels individually? For example, I may want to have one or two ...
- 1,082
0
votes
0
answers
197
views
Chart.js style individual labels
I have a Chart.js bar chart, and I want some of the horizontal labels to be bolded/underlined. I am working with this example: https://www.chartjs.org/docs/latest/samples/bar/horizontal.html. The ...
- 1,082