419 questions
0
votes
1
answer
99
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
81
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
154
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
102
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
104
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
69
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
142
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
95
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
129
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
219
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
155
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
224
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 &...