All Questions
333
questions
1
vote
0
answers
49
views
Chartjs: chart is blurry when using webworker
I am trying to use chart.js with webworker.
I am able to create the webworker and show the chart on the screen with the right dimensions.
The problem is: the chart is blurry and a bit "zoomed in&...
- 311
0
votes
0
answers
44
views
How to retrieve or export the numeric data from a Chart.js canvas object
I want to retrieve the numeric data from a canvas object created with Chart.js in a website.
The website is https://microwave-cablebuilder.gore.com/builder.html
When a cable configuration is typed, e....
0
votes
1
answer
74
views
Using Webworkers for both parallel rendering and data generation in Chartjs
I am changing from Dygraph to Chartjs because of rendering webworkers and wish to fully multithread the graph to keep main thread empty as much as possible. I am trying to use Workers for handling ...
0
votes
1
answer
39
views
Stack js some padding between outside border
I would like to add some padding to the border on the outside of my chart, see attached image of expected outcome.
as you can see i have a border width of 1, but its sitting on the chart, i would ...
- 2,803
0
votes
1
answer
70
views
Cutout percentage in data chart
How would I add cutout percentage to my data chart in chart js, the aim id to make the chart thiner.
const data = {
labels: ['onek', 'teo', 'Three'],
datasets: [{
data: [1, 3, 9],
...
- 2,803
0
votes
1
answer
43
views
Setting the Size of a Canvas width and height issue
I'm trying to set the size of a canvas for a chart made with Chart.js. It isn't resizing.
let ctx= document.createElement("canvas")
ctx.width = 200
ctx.height = 100
document.body.appendChild(ctx)
...
0
votes
0
answers
86
views
Cannot get live plot to re-render React Native UPlot/ChartJS
I am coding an android app with React Native that basically is a live high frequency pressure sensor grapher with which I'm hoping to graph data every 10-20ms. I have already achieved close to what I ...
- 1
0
votes
0
answers
47
views
Display Data values on top of bar chart using angularJs
I am trying to dispay a barchart using chartjs and angularjs by getting data from database i am succesful in doing it but when i hover on the bar then the values are displayed i want the values to be ...
- 57
2
votes
1
answer
102
views
Set text at the circle end point in doughnut chart
Using HTML5 Canvas i am trying to add extra text in the ChartJs V3.8 doughnut chart. Chart is rendering correct.
Red circle value always be dynamic but not static.
I am trying to add text at the end ...
- 21
1
vote
0
answers
30
views
Vertical linear gradient in Chartjs that follows data
In Chartsjs I can see how you make a vertical gradient thats not a problem. The issue with this approach is the gradient starts at a set point and then moves down, so any low valued data points would ...
- 667
3
votes
2
answers
176
views
Obtaining the coordinate of a null value when using spanGaps with ChartJS?
I'm wondering if ChartJS exposes an API for plugins that allows us to obtain the coordinate of a null point that has been "Spanned" by ChartJS?
For example as illustrated in this question ...
- 46.3k
0
votes
0
answers
31
views
What to use in place of datasetStrokeWidth for the lastest chart.js?
This demo is attempting to convert this demo to the latest version of chart.js.
What should we use in place of datasetStrokeWidth? It controls the width of the line.
options: {
responsive: true,...
- 46.3k
1
vote
1
answer
95
views
Implementing a gradient background in in the latest chart.js?
This question has an implementation and I'm trying to transfer it to this demo using the latest version of chart.js, however the gradient settings are not taking effect.
Any ideas?
This is the entire ...
- 46.3k
3
votes
1
answer
350
views
Calculating point coordinates on a line in chartjs?
In this draggable ChartJS demo is it possible to derive a set of interpolated coordinates along one of the curves that ChartJS plots?
var options = {
type: 'line',
data: {
...
- 46.3k
0
votes
0
answers
38
views
Canvas does not render chart correctly
I´m using these libraries:
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.js
https://cdn.jsdelivr.net/npm/chartjs-plugin-piechart-outlabels
but when render the labels are cut.
...
1
vote
1
answer
213
views
How can I set a photo in the chartjs-plugin-data labels v2.1.0 plugin?
I use the 'chartjs-plugin-data labels v2.1.0' plugin, to create a wheel of luck, you need to replace the text with img in the labels column, how can this be done?
In regular JS, the labels line has ...
- 13
0
votes
1
answer
593
views
ChartJS: chartjs-plugin-datalabels not showing value properly
I'm attempting to create a chart using Chart.js and I'm using the 4.4.1 version for creating a horizontal chart.
In my code, the data labels are currently displayed as "x: 222, y: 1" but I ...
- 17
0
votes
1
answer
447
views
ChartJS Customised tooltip and LegendText not displaying after version update
Earlier i was using 2.7.2 version of ChartJS, now im updating to 4.4.1
So in my chart i was creating customized tooltip and customized Legend text but after version update both are not working
Here is ...
- 17
0
votes
1
answer
614
views
Chartjs Legend for each bar
I'm trying to create a horizontal bar chart where both the data and labels are random. I also want to incorporate a legend for each bar, similar to a donut chart. The goal is to enable removal of a ...
- 17
2
votes
1
answer
384
views
Canvas is already in use even after using destroy() when leave the page and comeback to add data
I am getting the error Canvas is already in use. Chart with ID ' ' must be destroyed before the canvas with ID 'MyChart' can be reused. The error appears 4/5 times for each particular id in the ...
- 213
0
votes
1
answer
284
views
Custom Line Chart Possible in React native
I hope you are having amazing day I wanted to ask how we can achieve this kind of advance chart in react native.there are few chart libraries but they don't provide customisation to that extent. The ...
- 639
0
votes
1
answer
73
views
How to draw common part of two wheels, using CanvasRenderingContext2D
It is possible to draw common part of two wheels (like in picture) using javascript and CanvasRenderingContext2D. Ultimately, I would like to manipulate the size of the shape, i.e. the maximum size ...
- 1
1
vote
0
answers
52
views
ChartJS - how to config Scales?
I am creating a website about Bitcoins and using some interactive Charts from ChartJS.
Until now the scales in the Charts are changing with the data. But I think to compare the differencesbetween the ...
- 43
1
vote
1
answer
287
views
How to dynamically render new list of charts based on a dropdown filter?
I am not trying to refresh the existing charts on the blade. Here's the scenario, each module has a list of questions, options and answers (option selected by the user). I have a dropdown to filter ...
0
votes
1
answer
429
views
How to remove the white space around a chart in chart.js
I have a chart inside a div element, as shown below, that has white space around it. How would I remove the white space there?
inspected element
chart
I've tried all the answers here: https://...
- 15
1
vote
0
answers
528
views
Is there a way to rotate the background image of a Canvas without rotating the whole canvas? See example
Its a rough sample but would like to move the needle image as mouse moves without rotating the doughnut chart. Or is there a better way to approach it?
html:
<canvas id="myChart" style=&...
0
votes
0
answers
81
views
chart.js does not render when submitting data to create a bar graph
chart.js does not render when submitting data to create a bar graph.
I've previously tried to test bar graph generation using chart.js version 2.9.4 (if using other versions the graphs won't show. I ...
1
vote
1
answer
80
views
chart js don't center pie chart correctrly
As you can see in image it is not centered correctrly
enter image description here
the only options for chart is
options: any = {
cutout: '94%',
};
I wont pie chart inside canvas to be ...
- 11
1
vote
1
answer
1k
views
Chart js custom canvas draw against charts update
Im facing problem right now which I cant solve by myself after hours of digging.
Im drawing chart using chart js library. Dataset is provided by client via text input field with oninput action. ...
- 188
1
vote
1
answer
458
views
chartjs gradient with angle
I have been trying different ways to achieve
linear-gradient(135deg, #FBCF33 0%, #F53939 90%);
in my bar chart. I got close to the required gradient.
However, failed to achieve exactly the same as ...
- 1,531
1
vote
0
answers
209
views
Chart.js (v4.2) - weird rendering bug/artifact
Very weird and unexpected behavior of Chart.js chart rendering.
Dataset is sorted. Contains 172 timestamps and some Y data.
In Chrome (109.0.5414.75) only happens after messing around with size of the ...
- 114
1
vote
1
answer
189
views
Bar dashed chart is overlapping in chartjs
I have data and I am creating a stacked bar chart, I want one of the datasets to be a dashed bar chart.
The live: demo
Here is what I have done so far.
HTML.
<canvas id="myChart"></...
- 5,496
6
votes
4
answers
2k
views
Chart.js - printing a webpage containing Chart.js canvas prints out hundreds of blank pages
I have a Chart.js javascript chart ( https://www.chartjs.org/ ) placed on my web page.
This javascript based chart sits inside a Canvas element which has ID: chart-0
<canvas id="chart-0" ...
- 85
1
vote
1
answer
1k
views
How to access the hooks of the Chartjs plugins?
wishing you all a happy week
I was wondering if you could help me, I'm using Chartjs from the server side to apply charts in reports and call them from the frontend.
The technologies that I am using ...
0
votes
1
answer
953
views
Sticky XAxis for vertical scroll on Chartjs. Also a weird visual bug above my y axis
Two Chartjs posts in one day!? Sorry.
Is there anyway to add vertical scrolling, but with your X Axis sticked? The idea here is that if I have 8 or more bars (or depending on the height) on my stacked ...
- 891
1
vote
1
answer
176
views
Remove empty space around a barchart with no axes showing in Chartjs
Fairly straightforward, but I have a single bar on a barchart that I want to show by itself. I've hidden the axes and their ticks, but there is still all of that space there on the left and top//...
- 891
1
vote
1
answer
684
views
Chart.js multiple charts in same page(Working but still getting error)
Good Afternoon everyone. I'm trying to use to charts on the same page. It is working but I'm still getting an error in my console log:
Uncaught Error: Canvas is already in use. Chart with ID '1' must ...
- 131
0
votes
1
answer
588
views
Why the labels under chart are not corresponding with labels in legend in Chart.js for bar chart?
I would like to make a chart with labels on xAxes and the same labels in the legend. I was trying different solutions, but the best I got is the snippet below. I don't understand, why all bars are ...
- 820
1
vote
1
answer
840
views
Is that a way to marginTop a legend positioned on bottom of a Doughnut chartjs graph?
I'm working with doughnut graphs using ChartJS and I'm having a bad time trying to create some kind of space between the graph and the legend.
That's my legend config:
plugins: {
legend: {
...
- 15
1
vote
0
answers
177
views
How can we overlap two pie charts with same center in ChartJS
I am trying to recreate the speedometer I have made here: https://sv.tiwari.cc/
Here is the code for it: https://github.com/sanskar-mk2/rcharts/blob/master/src/components/EfficiencyWeek.js#L60
I have ...
- 101
0
votes
1
answer
541
views
NG0303: Can't bind to 'type' since it isn't a known property of 'canvas'
I did following steps:
npm install ng2-charts@next --save
It installed
"ng2-charts": "^3.0.0-rc.7"
npm install chart.js --save
It installed
chart.js": "^2.9.4",
...
- 323
1
vote
1
answer
442
views
background image is not displaying in react-chartjs-2
I want use image background in react-chartjs-2 but its not working.
I tried in plane chartjs page and its working without any problem.
const image = new Image();
image.src = 'https://www.chartjs....
- 13
1
vote
1
answer
1k
views
Custom tooltip in Chart JS(React implementation) works incorrectly with interaction intersect false
So there is a problem with custom tooltip interaction in ChartJS using it with React.
Example of current behaviour of custom tooltip
So originally I use interaction with intersect: false for my chart, ...
1
vote
1
answer
1k
views
How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
I have a boxplot component in my Vue project and I want to reuse it on the same page for a table I am building.
However, despite the fact that my data is different, I still get this Canvas is already ...
- 891
2
votes
1
answer
2k
views
Multiple charts in one page - Chartjs
I tried to add multiple charts in one page, but had the error Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused.
After research, I read that I had to set my ...
- 2,814
2
votes
0
answers
919
views
"Canvas.node" not found in "ChartJs-node-canvas"
I want to extract a chart from ChartJS as an Image within NodeJS. I am currently using chartjs-node-canvas for this purpose. Using this package, I am able to generate images on my local machine (both ...
- 21
0
votes
1
answer
1k
views
ChartJS donut chart clipping the edges
I have a widget that displays a donut chart for revenue data. The problem I am having is that on two sides, the edges of the donut are cut off. It looks like the chart is overflowing the canvas, but I ...
- 109
0
votes
1
answer
1k
views
Double Y Axis + Bar chart combo
is it possible to make a chart like on the screenshot below using Chart.js? I tried multiple examples of the combined charts, but couldn't make it work.
Two Y axis would have different scales. The ...
0
votes
0
answers
640
views
Chartjs node-canvas renders low resolution image
I am rendering charts using chartjs-node-canvas for chart.js v3 on my backend. Everything works great, however produced images have low resolution. Below attaching 2 versions.
First picture is ...
- 2,047
1
vote
1
answer
637
views
chart.js - dynamically added chart makes previous ones disappear
Basically
Whenever I call addData like
addData("TEST1", 1);
or
addData("TEST2", 1);
then I'm checking whether chart named "TEST1" already exists and if it does then I ...
- 859