All Questions
1,076
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 ...
0
votes
0
answers
28
views
Move ChartJS charts to original position when window maximized
I have a page with multiple charts using ChartJS, each contained in its own div like so:
<div class="formgrid grid gap-2">
...
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 ...
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() {
...
0
votes
0
answers
38
views
How can I display datalabels after chart draw - Chart.js
I want to display datalabels after all of the chart animation completed.
But datalabels are already shown before the chart animation ended in my code.
Additionally, I'm not sure that my code is right ...
0
votes
0
answers
121
views
Chart.js 2.9.3 - Issues with time-based charts and zooming
I have a problem with chart.js 2.9.3.
The program is quite simple:
You must choose a time period
You must choose whether the X axis will be spatial (kilometers) or temporal (dates)
You must choose ...
0
votes
1
answer
39
views
How do I change the font color of this chart in chart.js
How do I change the font color of this chart in chart.js?
can anybody help me
this is my code:
const ctx = document.getElementById('chart');
// Chart.defaults.color = '#000';
new Chart(ctx, {
type:...
1
vote
0
answers
38
views
ChartJS Tooltips aren't correctly displaying. What am I doing wrong?
I am trying to add extra information to my tooltips (when a user hovers over data point in a line chart) and the only information showed is the Player Count. It should include Player Count, Game Time, ...
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
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],
...
4
votes
1
answer
134
views
how use data from txt file to build graph with chart.js
I try to find a way to use data from txt file into chart.js graphic.
I'm not very friendly with JS so I ask some help...
So, what I succeed was to build a beautifull simple graph using this code :
...
0
votes
1
answer
136
views
"cannot find name Chart" when trying to use chart.js
I have a really annoying problem with chart js which I am stuck for some days now, I've tried literally everything but couldn't figure out yet.
The problem is, I'm using a simple TypeScript ...
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 ...
0
votes
0
answers
86
views
Is there a way to use the chartjs-plugin-annotation in the chartjs R library
I am attempting to plot some charts in chart.js using this package in R for a shiny app.
This is possible in chart JS using plugins: https://www.chartjs.org/chartjs-plugin-annotation/latest/samples/...
1
vote
1
answer
116
views
Parsing data from python into javascript to then put into Chart JS
Originally I had a basic line chart. I then tried to parse data into the js portion of the html using jinja but obviously that didn't work. I then tried to parse directly into js. Unsuccessful. Now I ...
0
votes
0
answers
128
views
How to add chartjs/graph in and html and generate PDF from it using puppeteer
I am try to generate a pdf using puppeteer with my on custom HTML template.The problem I am facing is that when I set configuration in puppeteer config with "headless: false" to show virtual ...
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 ...
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 ...
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 ...
2
votes
1
answer
93
views
HTML Javascript donut chart doesnt appear using Chart.js
I have this HTML code to show a donut chart with the database records retrieved from the database via a PHP script. The data is being retrieved successfully and can be seen on the browser console.
But ...
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 ...
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 ...
1
vote
1
answer
125
views
Chart.js 4.4.2, how to have mutiple datapoints/labels in the tooltips when hovering over a datapoint?
As the title explains, I am trying to create a report using chart.js to give the user a graphical representation of the data that they have searched for in the system, I am currently able to get the ...
0
votes
0
answers
50
views
How to set marker at the top and bottom of a bar in range barchart using chart.js
I'm currently working on a project where I need to create a range bar chart using Chart.js. I've successfully created the range bar chart, but I'm having trouble implementing custom circle markers at ...
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/...
0
votes
0
answers
57
views
How to add interactive charts in Excel?
I'm trying to add the below interactive chart in excel. But using the below example chart is not rendered inside the excel. I'm trying for interactive charts which is there in the excel using ...
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
135
views
How to graph with JavaScript?
I was, as part of a training program in Paraguay, trying to integrate a function graph into a javascript script. Browsing the web I found an option which doesn't quite work for me so I throw the graph ...
0
votes
0
answers
81
views
How to add a Data label to the chart built using chart js libraries in LWC
I need add data labels to the pie chart that i built using chartJs in lwc. I tried many ways that i found in the internet but haven't fount any solutions. Any one please share about this.
I tried ...
0
votes
0
answers
62
views
Chartjs lines with two stacked lines are not displaying y-axis values correctly
I'm trying to create a js chart with lines that, when they have the same value, are not above each other, but when adding stacked: true, the values on the y axis are incorrect
const yValues1 = [751, ...
0
votes
0
answers
41
views
Dropdown & checkbox filters are not populating from dynamically generated html table sourced from local MySQL database
[Screenshot of webpage is attached]
I cant figure out why the dropdown or checkbox filters are not populating from my html table for the chart I'm using.
I'm using bootstrap & vanilla javascript ...
0
votes
0
answers
68
views
My chart keeps resizing when I redraw it. How do I stop this from happening?
Note: This is using the chart.js library inside a Django template
I am creating a doughnut graph (see image 0) with some data. Then, I destroy the instance of that chart and redraw it (see image 1). ...
0
votes
1
answer
190
views
Localize chart.js
(I don't want to use node, and npm)
I want to download chart.js on my own machine, so I can run it offline. I downloaded the cdn from here. I import it like this, in html:
<script type="...
1
vote
1
answer
114
views
Plotting Two Datasets in One Chart with two y-axes Using the Library chart.js
I wrote the following CODE using the chart.js library, which generates the OUTPUT displayed below. I'm seeking guidance on how to effectively control the labels on the horizontal axis.
CODE
<!...
0
votes
0
answers
50
views
How can I fix the formatting on these graphs?
I am using the chart.js library to generate these graphs. I cannot get the title of the doughnut chart to stack over the actual chart or the legend of the doughnut chart to be lowered a little, and ...
0
votes
1
answer
77
views
Only show plotted points x-axis labels in line chartjs
I want the following chart to show the x-axis labels for the 3 specified plotted points (365 Days, 730 Days, and 1095 Days) and hide the rest of the labels for the x-axis but the labels should still ...
6
votes
2
answers
389
views
How to handle a big CSV file with HTML, JS and Chart.js
I have to upload a 90 MB CSV file and then analyze it with chart.js as a chart. The CSV file has measured values that are recorded per minute. The 90 MB are then almost a year's worth of data. I have ...
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
0
answers
101
views
Can someone help me about a Chart.js doughnut that doesn't appear?
I've got an issue with a dougnut made with chart.js. It doesn't want to appear, without any error in my console.
Here is my HTML/JS part code :
<div class="min-w-0 px-4 rounded-lg shadow-xs bg-...
0
votes
1
answer
72
views
Chartjs how to disable a scale in stacked line chart
I tried to hide an axis in stacked line chart, it kinda works but the area stays there.
How can I delete that area in the picture and connect the other axises between.
Thanks in advance!
y3: {
...
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 ...
0
votes
1
answer
99
views
Chart.js totally local mode
I recently discovered the possibility of easily creating charts thanks to the Chart.js library. I have added the necessary elements to my test site to evaluate the library using the online link, and ...
-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-...
0
votes
0
answers
120
views
Javascript & Chart.JS & wkhtmltopdf don't render
I have an application over flask and I use chart.js and some basic js to create a report page with graphics.
But wkhtmltopdf doesn't want to present my data, my data shows in browser without any issue....
0
votes
1
answer
52
views
Removing or Changing the color of the axis in the 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
const MAINCHARTCANVAS = document.querySelector(".main-chart")
new Chart(MAINCHARTCANVAS, {
...
0
votes
0
answers
68
views
How can I make various line charts in html with chart.js using multiple datasets from python?
I am doing a website in django for a project and I have to display graphics about the data I am collecting from two sensors using AWS DynamoDB. I am using python for the backend and I checked my data ...
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, ...
0
votes
1
answer
88
views
Chart.js column graph still not rendering data
I am trying to create a crypto homepage which tracks and manages data relating to bitcoin.
Currently I am rendering a graph which displays the amount of miners in a pool using the blockchain.com API, ...
0
votes
1
answer
69
views
Chart.js column graph not rendering data
I am trying to create a crypto homepage which tracks and manages data relating to bitcoin.
Currently I am rendering a graph which displays the amount of miners in a pool using the blockchain.com API, ...