1,135 questions
167
votes
13
answers
443k
views
How to display data values on Chart.js
Is it possible using Chart.js to display data values?
I want to print the graph.
Thanks for any advice..
- 4,297
156
votes
19
answers
335k
views
How to add text inside the doughnut chart using Chart.js?
How to render Text inside the doughnut chart, I am using ChartJs.
- 2,969
61
votes
16
answers
102k
views
Chart.js - Increase spacing between legend and chart
I have a bar chart where I have drawn 3 vertical lines, each with it's own label at the top. I would like those labels to be above the top of the y-axis (above the 30% line in the example) but below ...
- 5,977
184
votes
17
answers
483k
views
Dynamically update values of a chartjs chart
I created an basic bar chart using chartjs and it works fine. Now I want to update the values on a time based interval. My problem is that after I created the chart, I do not know how to update its ...
- 2,039
110
votes
10
answers
121k
views
Chart.js — drawing an arbitrary vertical line
How can I draw an vertical line at a particular point on the x-axis using Chart.js?
In particular, I want to draw a line to indicate the current day on a LineChart. Here's a mockup of the chart:
...
- 1,103
33
votes
5
answers
71k
views
Chart.js v2: How to make tooltips always appear on pie chart?
I have found similar questions in Stack Overflow, but all of them were addressed one and two years ago. Now Chart.js has come up in version 2, and lots of the documentation changes. Can someone please ...
- 553
154
votes
24
answers
288k
views
Destroy chart.js bar graph to redraw other graph in same <canvas>
I am using the Chart.js library to draw a bar graph, it is working fine, but now I want to destroy the bar graph and make a line graph in the same canvas. I have tried these two ways to clear the ...
- 3,628
274
votes
20
answers
517k
views
How to set max and min value for Y axis
I am using line chart from http://www.chartjs.org/
As you can see max value (130) and min value (60) for Y axis are chosen automatically , I want max value = 500 and min value=0. Is this possible?
- 3,438
87
votes
14
answers
232k
views
Click events on Pie Charts in Chart.js
I've got a question regard Chart.js.
I've drawn multiple piecharts using the documentation provided. I was wondering if on click of a certain slice of one of the charts, I can make an ajax call ...
- 6,180
112
votes
19
answers
303k
views
Chart.js canvas resize
In (Android WebView HTML5 canvas error) i posted a question regarding plotting graphs using Graph.js library.
The problem i have now is that if i call the function to plot the graph multiple times, ...
- 1,423
91
votes
8
answers
146k
views
Chart.js - Formatting Y axis
I'm using Chart.js to draw a simple bar plot and I need to format its Y axis like
123456.05 to 123 456,05 $
I don't understand how to use scaleLabel : "<%=value%>"
I saw someone pointing to ...
- 46.1k
58
votes
10
answers
172k
views
ChartJS: datalabels: show percentage value in Pie piece
I have a piechart with four labels:
var data = [{
data: [50, 55, 60, 33],
labels: ["India", "China", "US", "Canada"],
backgroundColor: [
"#4b77a9",
"#5f255f",
"#...
- 844
46
votes
8
answers
77k
views
ChartJS - Different color per data point
Is there a way to set a different color to a datapoint in a Line Chart if its above a certain value?
I found this example for dxChart - https://stackoverflow.com/a/24928967/949195 - and now looking ...
- 1,005
24
votes
5
answers
51k
views
Chart.js - draw horizontal line
I would like to draw a horizontal line in a chart using Chart.js. But I'm not able to do it.
I've read this question - Chart.js — drawing an arbitrary vertical line - but I can't transform the code ...
- 439
50
votes
8
answers
152k
views
How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
I'd like to create a line chart with Chart.Js but have the Y-Axis not move when I scroll.
I'm assuming I can use a fixed width, and put it in a container div with overflow:auto, but then The Y-axis ...
- 676
142
votes
23
answers
203k
views
How to clear a chart from a canvas so that hover events cannot be triggered?
I'm using Chartjs to display a Line Chart and this works fine:
// get line chart canvas
var targetCanvas = document.getElementById('chartCanvas').getContext('2d');
// draw line chart
var chart = new ...
- 2,440
131
votes
21
answers
300k
views
Different color for each bar in a bar chart; ChartJS
I'm using ChartJS in a project I'm working on and I need a different color for each bar in a Bar Chart.
Here's an example of the bar chart data set:
var barChartData = {
labels: ["001&...
- 2,161
130
votes
15
answers
159k
views
Limit labels number on Chart.js line chart
I want to display all of the points on my chart from the data I get, but I don't want to display all the labels for them, because then the chart is not very readable. I was looking for it in the docs, ...
- 3,938
30
votes
3
answers
30k
views
Moving vertical line when hovering over the chart using chart.js
I've been trying to add a vertical line that shows up with a tooltip when hovering over the chart. But I'm using chart.js 2.6 and the syntax from 1.x seems to be outdated.
I've the following code ...
- 1,215
16
votes
2
answers
64k
views
How to put rounded corners on a Chart.js Bar chart
I have created a bar chart in chart.js using the below code. However I want to give the bars rounded corners instead of edged ones at the top of the bars. I can't find any way to do this using the ...
- 163
8
votes
2
answers
26k
views
chart.js - link to other page when click on specific section in chart
So I want to click on a slice in the pie chart. The slice should act as a normal link to another page in our system. Here is the HTML and JS for this. My chart works fine otherwise.
Also: I've tried ...
- 121
102
votes
24
answers
216k
views
chart.js load totally new data
The API for chart.js allows one to edit points of the datasets loaded into it, for example:
.update( )
Calling update() on your Chart instance will re-render the chart with
any updated ...
- 20.7k
91
votes
10
answers
189k
views
Remove x-axis label/text in chart.js
How do I hide the x-axis label/text that is displayed in chart.js ?
Setting scaleShowLabels:false only removes the y-axis labels.
<script>
var options = {
scaleFontColor: "#fa0",
...
- 1,343
65
votes
7
answers
119k
views
How to set ChartJS Y axis title?
I am using Chartjs for showing diagrams and I need to set title of y axis, but there are no information about it in documentation.
I need y axis to be set like on picture, or on top of y axis so ...
- 1,406
17
votes
6
answers
34k
views
How to create rounded bars for Bar Chart.js v2?
Trying to round the bars on bar chart as found in this post that works as displayed in the jsFiddle provided. This is for version 1.
In the chart that I am using, it fails to load for the reference ...
- 1,440
3
votes
3
answers
1k
views
How do I put this on Real-Time? I already put (async: True) but it doesnt work
I finally made it working with AJAX but the problem is, it's not real-time whenever I change some data in phpMyAdmin, I need to refresh it on the website.
Here's my code: ajax.js
$(document).ready(...
- 59
91
votes
10
answers
118k
views
Error: "category" is not a registered scale
I'm trying to migrate Chart.js from 2.9.3 to 3.3.0 and even after applying the the changes (https://www.chartjs.org/docs/latest/getting-started/v3-migration.html) I'm still getting the error:
Error: &...
- 2,261
91
votes
13
answers
190k
views
chart.js Failed to create chart: can't acquire context from the given item
I never got into node so I am pretty sure I am doing something massively wrong here since I cannot find any info at all by googling.
I have a django site and I wanted a JS charting library, I chose ...
- 12.1k
60
votes
14
answers
42k
views
Chartjs Bar Chart showing old data when hovering
I have a bar chart that's created using chart.js. Everything works fine on page load, but when I change the time frame using a daterangepicker, a glitch appears. The new data is brought in, but when I ...
- 651
47
votes
6
answers
125k
views
Custom Legend with ChartJS v2.0
I'm trying to create a custom legend template in ChartJS v2.0. In v1* of ChartJS I simply added a property to the new Chart constructor such as...
legendTemplate : '<ul>'
+'<% for (var i=0; ...
- 4,059
27
votes
7
answers
75k
views
How to change colours for Angular-Chart.js
I use Angular-Chart.js (the AngularJS Chart.js version) to create a bar chart. The Chart is working with the options except for the colours.
Even if I set them it is indicated in the documentation, ...
- 1,664
5
votes
3
answers
65k
views
Chart.js - Getting data from database using mysql and php
I'm trying to convert the static data to using database results. I'll be using MySQL and PHP.
Example Code:
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var ...
- 1,840
83
votes
2
answers
156k
views
Grouped bar charts, in chart.js
I've seen other javascript charting libraries that supported grouped barcharts, of the sort in the image below. I've not seen this as an explicit option in chart.js's online editor.
Is it possible to ...
- 11.7k
55
votes
6
answers
115k
views
Chart.js how to get Combined Bar and line charts?
i would like to ask is that possible using Chart.js http://www.chartjs.org/ to get Combined Bar and line charts?
Thanks for any advice.
- 11.6k
51
votes
9
answers
173k
views
Show values on top of bars in chart.js
Please refer this Fiddle : https://jsfiddle.net/4mxhogmd/1/
I am working on chart.js
If you see in fiddle, you will notice that value which is top on bar is not properly displayed in some cases(goes ...
- 5,952
46
votes
7
answers
147k
views
Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
I am using Chart.js. I am trying to convert the chart to an image by getting a base 64 string. The tutorial (http://www.chartjs.org/docs/) devotes an entire 1 line on the topic:
The canvas element ...
- 19.6k
32
votes
16
answers
75k
views
ng2-charts update labels and data
I'm trying to create dynamically a chart using ng2-chart,
I get information from an angular 2 service, when I change only labels of chart it works and when I change data only it works, but When I ...
- 518
21
votes
2
answers
58k
views
Horizontal stacked bar chart with chart.js
I am trying to find out if there is any plugin to do a horizontal stacked bar chart with chart.js
I see there are plugins for stacked bar charts and also for horizontal bar charts, but I didn't find ...
- 644
18
votes
7
answers
91k
views
Chart JS custom tooltip option?
I am trying to build chart using Chart.Js. This chart.js has default option for tooltip, I want to make customized tooltip option. Is there a way to make it possible?
Here is my code
var chart = ...
11
votes
3
answers
21k
views
How to save Chart JS charts as image without black background using blobs and filesaver?
$("#NoBidsChart").get(0).toBlob(function(value) {
saveAs(value, "Summary.jpg");
});
Here i am using Chart JS(v2.5.0) for rendering charts. When i try to export the charts using Canvas to Blob ...
- 351
9
votes
6
answers
18k
views
Chart.js Line, different fill color for negative point
I need to change the fill color (internal area) in a Line Chart.js when the point is negative.
The code is simple and basic:
$(document).ready(function(){
var ctx = $("#myChart").get(0)....
- 93
7
votes
3
answers
11k
views
Hide labels on x-axis ChartJS
I want to hide labels on x-axis as i have a solution to set
$scope.labels = ['', '', '', '', '', '', ''];
but in that case labels are also getting hidden on tooltip. What i want is to show labels on ...
- 1,682
3
votes
2
answers
22k
views
How to show tooltips always on Chart.js 2
How can I show tooltips always using Chart.js version 2 (alpha)?
I have tried this Chart.js - Doughnut show tooltips always?, but seems that this have changed in this last version.
- 630
3
votes
1
answer
11k
views
Intersection point in line graph in Chart.js?
Searched a lot about this but din't got any answer on this based on chart.js. I had already asked this question here in which I was using highchart.js and got the solution but now I am using chart.js ...
- 4,250
87
votes
3
answers
160k
views
Chart.js label color
I'm using chart.js to create a bar chart and can't seem to change the label colors or the legend colors. I figured out how to change the tick colors, but I'm not sure where to put the 'scaleFontColor',...
- 2,897
67
votes
3
answers
176k
views
Chart.js Show labels on Pie chart
I recently updated my charts.js library to the most updated version (2.5.0).
This version doesn't show the labels on the chart.
I have an example of working one on fiddler: http://jsfiddle.net/...
- 3,698
66
votes
5
answers
122k
views
Chart Js Change Label orientation on x-Axis for Line Charts
I am using chart.js.
Similar to this Question, I would like to rotate my x-axis labels 90 degrees.
Currently my labels are rotated about 80 degrees with default settings.
Could somebody help me ...
- 2,535
55
votes
10
answers
105k
views
Chart.js V2: Add prefix or suffix to tooltip label
In Chart.js V1.0, I would add tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= '€' + value %>" to add a euro symbol as prefix to the tooltip label. However, this no ...
- 3,601
42
votes
8
answers
105k
views
Chart.js - add gradient instead of solid color - implementing solution
I am using Chart.js and everything is ok, but I want to replace current color background (fillColor: "rgba(250,174,50,0.5)") with a gradient.
I have a solution for replacing gradient but it'...
- 423
35
votes
2
answers
38k
views
Chart.js - Plot line graph with X , Y coordinates
I'm trying to create a simple line graph with x,y coordinates but i'm getting a blank page .
I don't want to set labels , but have them generated automatically from the x,y coordinates. I think ...
- 709