All Questions
452
questions
-1
votes
0
answers
47
views
Vue error: Cannot read properties of null (reading 'addEventListener')
I am using the Chart.js library to build a bar chart. My app has a <select> with some elements inside. The chart is generated well. I added a zoom plugin which works fine the first time the ...
- 1
-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
0
answers
76
views
How to style Chart.js bar chart? I have an example of Chart
I need to create some bar chart.
This is a reference:
https://i.sstatic.net/Zj4G3BmS.png
This is what I have for now:
https://i.sstatic.net/pzPxKaZf.png
I marked my 3 questions on the reference with ...
- 1
0
votes
0
answers
25
views
Render bar statics with library charts
I used a library chartjs3.9. I want to render some graphics with dynamic data, but I don't know why the data is not being rendered. Here is my code:
the result for request to db is for example: b2b:[...
0
votes
0
answers
28
views
Not able to download different tab components data containing graph data in pdf format
I have two tabs with different graphs created using chart.js.
TabOne.vue
<template>
<div class="tab-content tab-one" :class="{ active: isActive }">
<h3>Tab ...
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
1
answer
108
views
Uncaught TypeError: item is undefined chart.js
Im trying to make a page using vue and chart.js:
<script setup>
import { ref, onMounted } from 'vue';
import VueSlider from 'vue-slider-component';
import 'vue-slider-component/theme/default....
- 75
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
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
94
views
Labels always visible in Vue Chart JS
I'm setting up a chart in a JavaScript application using Vue.js, and I need the labels, chart information, to always be visible without needing mouse hover.
Image of a chart
The code for my chart ...
0
votes
0
answers
54
views
html2canvas is not picking up chartjs correctly in the past breakpoint
I'm using vue, chatjs and html2canvas. My project is responsive, but I'm passing the windowWidth with brealpoint so that the PDF has the same layout on any device. However, chartjs is responsive when ...
- 21
0
votes
0
answers
70
views
Chart.js chart.update() is not a function
For my project, I am using vue3 and quasar.
I am building a dashboard, and users can select from a date range, and this date range will subsequently update the charts based on the data in that date ...
0
votes
0
answers
50
views
When filtering i get error Uncaught TypeError: canvas is null with Chart.js and Vue
I get this error: Uncaught TypeError: canvas is null when i filter the different type of data, sometimes it works and then i get this error after i filtered like 2-3 times. I tried to load the data ...
- 11
0
votes
0
answers
117
views
How to rerender Chart.js properly in Vue3 component
I am creating a quick chart to compare momentum movement on 6-7 currency pairs: bitcoin, ether, tron, etc. I receive ticks over websocket every 500ms. I am using Vue3 library, Centrifuge for ...
- 484
0
votes
0
answers
140
views
Chart js Cannot read properties of null (reading 'getContext') while I destroy on progress
I am using vue 3.0 and chart.js
I am using a lot of bar, line charts and have to change their labels, data shortly with button.
so I am using API(destroy) such as:
<div ref="...
- 1
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
301
views
How to dynamic chart js with laravel inertia and vue js
I want to make this chart dynamic using Laravel and Vue.js. I want to display the data from a table based on the month and income type. I want the payments to be displayed based on the month and ...
- 35
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
0
votes
1
answer
766
views
Invalid scale configuration for scale: x using chart.js for time scale chart
I am working with VueJS and trying to implement a chart with time scale using Chart.js. however I am getting this error : Invalid scale configuration for scale: x
Here is my configuration :
I have a ...
- 163
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
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
1
answer
90
views
How to display a vertical bar chart with multiple datasets that coming from an FastAPI endpoint in Vue.js?
I would like to display multiple datasets using the Vue.js framework. The datasets come from the FastAPI server backend, containing mocked stock data.
from fastapi import FastAPI
from fastapi....
- 1,730
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
258
views
How to pass data for chart in chart.js without getting a type error
I am creating an application that has a chart, and I'm currently trying to insert the information from my store into it. However, I'm receiving an error. This error is happening when i try do pass ...
0
votes
0
answers
655
views
Chart.JS - stacked bar chart
I have successfully created a Stacked bar chart in Chart.js, the only issue is there are tags(with the specific amount of counts/numbers that each portion of the stacked bar has. Does anyone know the ...
0
votes
1
answer
86
views
Chart.js not stacking chart
I'm trying to make a stacked chart with vue-chart-3/chart.js. I want a chart like this one:
But I don't know for sure what I did wrong, the chart that I create is stacking the bars side by side:
...
- 613
0
votes
2
answers
75
views
Multiple line on x-axis in a linear chart did not show
I have a single axis line chart. The user would choose the year from a dropdown and the loan_type from another dropdown. The chart then should load the 12-months record of annual_payment and ...
- 91
0
votes
1
answer
900
views
how to customise the tooltip in the line chart in vuejs /chart js
I am trying to draw a line graph using chart js and vue bit new to both vue and chart-js, I in the below chart,I need the tooltip to be changed to "10 Answers July 19,2023" , I tried with ...
- 229
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
1
answer
236
views
Adding a custom image to a chartjs bar chart
I am trying to add an image instead of a color to the dataset of a bar graph in Chart.js using Vue.js. All examples I found to implement this seem to indicate that the graph needs to be already ...
- 11
0
votes
2
answers
519
views
How to fix Chart.js doughnut chart with missing background colors and missing labels when working with props?
I am using Chart.js in order to display a doughnut chart. I want to use props so that I could do some API calls and have different doughnut charts with various data showing up. My issue is that my ...
- 11
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
1
vote
1
answer
48
views
Update Chartjs Chart datasets inside a Vuejs
Really appreciate your support
I want to update a Chartjs datasets when a button is clicked
here is my code below
<template>
<v-card>
<v-layout>
<v-main style="...
- 21
0
votes
1
answer
275
views
ChartJS loading errors from axios API call in Vue.js
I am trying to render charts for a dashboard made in Vue.JS and I have a flask API set as a dummy backend.
I'm following the tutorial on https://vue-chartjs.org/guide/#chart-with-api-data and am ...
- 146
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
0
votes
1
answer
247
views
chartjs 4.2.1 change datalabes style vue
I'm using Vue and ChartJS, and I want to change datalabes style.
I have 3 datalabes, I want to change second label style to bold from normal.
What i tried - 1
plugins: {
legend: {
display: ...
- 21
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
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