All Questions
439
questions
0
votes
0
answers
39
views
How to add labels outside the canvas in Javascript using ChartJS
Hello guys i got this problem where im trying to put some labels or kind of annotations outside a canvas that i generate with ChartJS, but im new to using ChartJS and idk if im doing the right way to ...
1
vote
1
answer
60
views
how to adjust draggableElement to have correct x and y position
I have implemented chart js to plot a two curve indicated by red and blue line. I want to add a slider (black vertical line) so that it remains always within two curves and user can move it left and ...
- 81
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
62
views
Why do my line graph dashed grid lines disappear when I hover over graph point data?
My Chart.js line graph dashed border grid line vanishes for few few seconds when I hover over graph point data. This also happens when I activate and deactivate datasets using the "This Month&...
0
votes
1
answer
60
views
Show all data in chartjs
I've got some issue where I can't show all data which is the date and time.
I want the chart height to be at least take 80% of the screen height, allow horizontal scroll so that they will not be ...
- 261
2
votes
1
answer
49
views
Rotating labels on lower half of pie chart
I am using Chart.js to generate a pie chart.
I want to rotate the labels on the lower half of the pie chart.
Here is my current code to generate the pie chart:
$(document).ready(
function() {
...
- 53
0
votes
1
answer
38
views
how to position elements in the many layers of this tier circle, distributed evenly and equidistant from the center?
Image of the css concentric circles i have
I need to display items dinamically given a list of jsons, but what i need to know is how to get all the items in the correct position. I thought of doing ...
0
votes
1
answer
565
views
How to Make a Chart.js Chart Responsive with Fixed Aspect Ratio in React?
I'm working on a React project where I need to display a Chart.js chart inside a parent component which is in grid layout. The chart should resize according to its parent container while maintaining a ...
- 1
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
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
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
0
votes
0
answers
98
views
Pie Chart labels overlapping and getting clipped in react chart js 2
In the following code, the pie chart's labels are overlapping and clipping at the top. How can I prevent this?
For the following code, the labels that are used not only overlap but clip as well. How ...
- 1
0
votes
0
answers
56
views
Chart js. How to scroll to section when clicked
I just started learning how to include graphs in code but faced some issues.
I have a horizontal bar chart here that shows datas of transportations in countries.
under the chart there are sections ...
- 1
0
votes
0
answers
59
views
Scrolling Line Chart CO2 Emissions
I would like to make a scrolling line chart like this, using Chart.js:
I have csv file called "annual_co_emissions_by_region" that has numerous countries listed as entities, I would like ...
- 1
0
votes
2
answers
106
views
Chart.js: Is there a way to have a chart with fixed height and variable width based on the number legend's items
I would like to know if there is a way to make the chart's width increase if the number of items in the legend doesn't fit with its initial size
I tried a lot of different settings and approces like ...
- 23
0
votes
1
answer
45
views
Chartjs Background Color Settings
I have a chartjs line graph in an angular application and I need the line chart to shade the background red for the negative numbers
The problem I am having is I can't figure out how to calculate the ...
- 354
2
votes
0
answers
492
views
Using HTML/CSS to customize Chart.js chart title
I would like to customize a Chart.js chart title using / injecting HTML & CSS. From the documentation, it seems pretty clear you can do just that, but but the docs do not give an example of how ...
- 315
0
votes
0
answers
65
views
How to draw a background image into a 'pie' of chart js
`
var images = [
new Image(),
new Image(),
new Image(),
new Image(),
new Image(),
new Image()
];
//Set the source of each image
images[0].src = 'images/img1.png';
images[1].src = 'images/...
3
votes
2
answers
3k
views
How to fixed space between bars on chart.js?
How to fix these spacing between bars ? when i have few data its become long width spacing.
What i want is
fixed bar size
fixed spacing between bars
fit-content of canvas width so when there just a ...
0
votes
1
answer
66
views
BarChartModel how to adjust only the width of the bars without changing the entire chart
I'm having trouble changing just the width of the bars. Right now, the chart is working fine, but I need to adjust only the width of the bars without changing the entire chart. How can I do that?
...
0
votes
1
answer
224
views
How to split a charts in react-charts-js-2 into two sets of datasets
I was able to generate that split before a while back and I can't remember how I did it (hehe) I know how to plot the data for two sets of databases, but I am looking to split them visually so that ...
- 10.2k
0
votes
1
answer
38
views
I have a problem with a project I am working on involving chart.js
Ok, I wrote a code which would collect user's input and then display it in any chart of their choice but on running the code, it doesn't display any chart after I have inputed my values and clicked ...
1
vote
2
answers
84
views
Chart.js display data based on selection
I am looking for a solution to display some data based on what you hover on inside the chart. Here's my jsfiddle and a demo of what I want.
gif image
I hope I've made everything clear, and thanks in ...
- 45
-1
votes
1
answer
65
views
Removing the xy axis or Changing the color of the xy axis in a line chart in chart js 4
I have a issue in my chart.js code that is I want to remove both the axis lines from the graph, i want the grids to be displayed (NOTE)
`
const MAINCHARTCANVAS = document.querySelector(".main-...
- 11
0
votes
1
answer
41
views
How can I make the line of a line chart created with Chart.js a gradient?
I'm trying to get the chart in the image using Chart.js. But I couldn't find how to make the line gradient. What I want to do is to have the color rgba(249, 65, 68, 1) as the line goes up and rgba(51, ...
- 349
0
votes
1
answer
149
views
Chart.js How to predefine 24 H time labels on x AXIS
I want to show 00:00, 06:00, 12:00, 18:00, 23:59 on x axis with data in between the times.
I am working with this:
And I would like to do it like this:
var ctx = document.getElementById("...
- 47
1
vote
0
answers
73
views
Having problem with the width increase or decrease one of the data of my pie graph and angle of the data
I made two pie charts using chart.js. Both graphs have two data. I am having a problem with the width increase or decrease one of the data of my pie graph. Also I want to change the angle of that 30% ...
0
votes
1
answer
69
views
Reduce dimension of graph with react-chartjs-2 and chart.js
I'm having a problem. I'm trying to reduce the dimension of a chart (radial or spider, as you want to call it).
As is possible to see from the image here it takes too much space of the page.
I'm ...
- 21
2
votes
1
answer
312
views
Chart.Js. point style as a linear gradient
I am trying to make the points different colors: by default it should be background: linear-gradient(243.46deg, #FFC700 -1%, #F52525 131.66%);
If the next value is smaller than the previous, it should ...
- 49
1
vote
1
answer
675
views
How to display half chart.js donut graph?
In my project, I have a doughnut graph. But I want it to look like a speedometer. I created the donut graph using chart.js (HTML, CSS, js). I merely want to show it halfway or as a speedometer. Here ...
0
votes
1
answer
97
views
chart.js responsive problem | scale with parent container which has max-width 800px not working
I have a chart.js chart nestet in 2 div containers. The outer div container has max-width 800px, the inner container has width 100%. the canvas itself has no styling applied. See the code below...
Why ...
- 51
0
votes
1
answer
52
views
ChartJS Chart not Resizing
I am creating a program with a chart that has two x-axis, and one y-axis, but I want to make the chart smaller.
When I tried "width: 50px", and "height: 50px", it did not resize. I ...
user22026776
3
votes
1
answer
55
views
How to resize CHARTJS scatter chart to match PDF sizing?
I am struggling with ChartJS sizing, I have tried a lot of options now... And all pretty unsuccessful. With the following options I have achieved at least the desired position and sizing of my chart. ...
- 41
1
vote
1
answer
103
views
With Chart.js, can I align a div that's outside the canvas to the axes?
Chart.js renders its axes in a canvas. Below that canvas, I have a div containing a control (in this case an input slider).
I want to add a margin to the div (or otherwise manipulate it), so that the ...
- 5,374
0
votes
1
answer
149
views
How to fix this design issue in chart js react application
How do i set margin bottom between legend labels and the line graph top point
You can utilize the plugins option in Chart.js to extend the functionality and modify the legend labels. This approach ...
- 107
2
votes
1
answer
671
views
converting the chartjs charts into base64
I have written a chart HTML code using chartjs which is working good here is the code
const months = [1,2,3]
const ndvi_data = [3,4,5]
const evi_data = [6,7,8,9]
new Chart(document.getElementById("...
- 160
1
vote
0
answers
216
views
chartjs tooltip position out of bounds based on scroll position
I am using chartjs with the CoreUI Angular dashboard template. I have added a horizontal scroll bar for a line chart that contains a lot of data. The horizontal scroll works fine, and the chart ...
- 284
1
vote
1
answer
637
views
Chartjs color the background of chart after specific values with dark grey color
I am new to ChartJS and due to server constraints I am using ChartJS 2.9.4 using cdnjs and I want to color the background of line chart from
60-80 ==> light grey with background text in right side ...
- 21
1
vote
0
answers
44
views
How to work with multiple chart.js charts?
building a simple webpage with 3 line charts from using chart.js.
I`m using all of them with line this:
var currentAmpChart;
currentAmpChart = new Chart(document.getElementById('amperageChart')....
- 11
0
votes
1
answer
129
views
Displaying gif on tip of line chart
I am trying to display gif on tip of the line in my chart that is updating constantly. I am currently using chartjs and wanted to ask if thats even possible with that lib or should I choose something ...
- 13
1
vote
1
answer
267
views
How to Minimise the Size of the Dynamically Loaded Polar Area Chart of ChartJS
I'm using Polar Area Chart of ChartJS.
I'm loading chart dynamically.
const chartData = [
[10, 20, 30],
[20, 30, 40],
[30, 40, 50]
];
// Loop through the chart ...
- 171
1
vote
1
answer
936
views
How to set y axis value in vertical bar chart using chart JS
In this vertical bar chart there are positive, negative value in y axis in this chart.
I want to use positive integers up and down based on the zero value.
I'm using version 4.2.1
what should I do ??
...
- 13
0
votes
1
answer
138
views
Chart.js fails to load from the local file
I am using chart.min.js to create the charts in my report.
<html>
<body>
<head>
<meta http-equiv="Content-Type" content="text/html;CHARSET=...
- 121
0
votes
1
answer
6k
views
Placing Data Labels Outside Pie or Doughnut Chart - Chart.js
I am working on a large scale application and it would be very helpful to place the labels on either pie charts or doughnut charts outside of the chart itself.
This plugin, outerLabels is exactly what ...
- 105
0
votes
1
answer
48
views
Canvas stretching when using column-count
I am using chart.js and I have two pie charts and a bar chart which I would like to display in a single row. I want the bar chart to be larger than the individual pie charts, so I did the following.
...
- 105
1
vote
1
answer
440
views
Puppeteer is generating a .pdf with nearly 1000 blank pages when I am using Chart.js
I am using Puppeteer in TypeScript to generate a PDF for data collection and wanted to display a chart with Chart.js. The chart is getting displayed, but when it does, the pdf contains hundreds of ...
- 11
0
votes
0
answers
53
views
Can Chart.js accept css font size for responsive interface?
I need to change the font-size depending on screen size just changing a class (i.e.: sm, lg, xl ...)
Is there any way to change font size for ticks or labels using css?
- 307
2
votes
2
answers
903
views
Using chartjs, how to define relative width and height of canvas?
Using Chart.js version 4.2.0, I try to display a chart on a maximized window on Windows 11 where height of chart is 100% of screen's height and width of chart is 80% of screen's width.
I tried with ...
- 3,676
0
votes
1
answer
56
views
how to set the ctx fill position on line doughnut label
current doughnut graph look,
doughnut chart first image
in the above graph, the floating circle is not aligned properly in line.
expected how the graph should be,doughnut chart second image
in the ...
- 23
1
vote
1
answer
2k
views
Responsive Chart.js based on a size of a browser window
I'd like to have a responsive graph using Chart.js on my Svelte app. The size of the chart should follow the browser window size. I currently have a chart on a div container. However, it doesn't work ...
- 527