Skip to main content

All Questions

Tagged with
Filter by
Sorted by
Tagged with
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 ...
Ever Luna's user avatar
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"> ...
not_castillo's user avatar
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&...
Rejuan hossain's user avatar
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 ...
ramedju's user avatar
  • 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() { ...
ajit singh's user avatar
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 ...
aasf's user avatar
  • 1
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 ...
Bruno brunko_hacks Bruno's user avatar
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:...
LG .i1's user avatar
  • 1
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, ...
Fire Aussie's user avatar
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 ...
Fábio Seyiji's user avatar
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], ...
Beep's user avatar
  • 2,803
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 : ...
wanwan's user avatar
  • 95
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 ...
Marcos Carvalho's user avatar
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 ...
faraz's user avatar
  • 57
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/...
JoeK's user avatar
  • 41
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 ...
Jadore Thompson's user avatar
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 ...
Rehman Ahmed Khan's user avatar
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 ...
Addy's user avatar
  • 1
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 ...
HopeFull's user avatar
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 ...
akaumn's user avatar
  • 1
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 ...
Kris F's user avatar
  • 21
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 ...
Will's user avatar
  • 315
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 ...
felipe's user avatar
  • 21
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 ...
modzking4's user avatar
  • 143
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 ...
Santanu Dhabal's user avatar
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/...
Andrés Calderón's user avatar
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 ...
CodeBox's user avatar
  • 51
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 ...
Wildan Shalahuddin's user avatar
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 ...
Lucas Sitzmann's user avatar
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 ...
Vignesh Ravi's user avatar
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, ...
felipe's user avatar
  • 21
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 ...
dudeputthataway's user avatar
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). ...
Tom Gob's user avatar
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="...
ádám homonnay's user avatar
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 <!...
Marco Moldenhauer's user avatar
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 ...
Tom Gob's user avatar
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 ...
Aimal's user avatar
  • 97
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 ...
Lisa's user avatar
  • 61
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 ...
Denzel Omachonu's user avatar
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-...
Dylan Pageot's user avatar
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: { ...
Holeng's user avatar
  • 27
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 ...
xyz.sml's user avatar
  • 45
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 ...
Timino's user avatar
  • 3
-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-...
Rj 45's user avatar
  • 11
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....
Claudiu's user avatar
  • 613
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, { ...
Rj 45's user avatar
  • 11
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 ...
Ana Ferreira's user avatar
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, ...
ckot's user avatar
  • 349
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, ...
C0SM1C0ST's user avatar
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, ...
C0SM1C0ST's user avatar

1
2 3 4 5
22