12,385 questions
293
votes
19
answers
456k
views
Set height of chart in Chart.js
I want to draw a horizontal bar chart with Chart.js but it keeps scaling the chart instead of using the height I assign the canvas form the script.
Is there any way to set the height of the graph from ...
- 3,262
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
198
votes
11
answers
362k
views
How can I hide dataset labels in Chart.js v2?
I have the following code to create a graph using Chart.js v2.1.3:
var ctx = $('#gold_chart');
var goldChart = new Chart(ctx, {
type: 'line',
data: {
labels: dates,
datasets: [{...
- 54.1k
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
174
votes
4
answers
214k
views
how to set start value as "0" in chartjs?
here is my code. i need to set initial value as "0" in both x and y axis scales. I have tried latest version scales option.
graphOptions = {
///Boolean - Whether grid ...
- 2,426
169
votes
7
answers
155k
views
Chart.js : straight lines instead of curves
I'm using Chart.JS to plot a dataset,
However I got a smooth effect !
Here is the curve I've got :
Here is my code :
function plotChart(data, labels) {
var lineChartData = {
"...
- 7,001
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
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
143
votes
10
answers
263k
views
Setting width and height [closed]
I'm trying out the example code for Chart.js given in the docs.
Width and height is specified inline on the canvas element at 400px/400px.
But when rendering the chart it's blown up to full page width,...
- 33.9k
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
141
votes
11
answers
230k
views
In Chart.js set chart title, name of x axis and y axis?
Does Chart.js (documentation) have option for datasets to set name (title) of chart (e.g. Temperature in my City), name of x axis (e.g. Days) and name of y axis (e.g. Temperature). Or I should solve ...
- 2,448
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
129
votes
5
answers
133k
views
Hide points in ChartJS LineGraph
Originally I set the fill color for each point to be completely transparent. If I run my mouse over the graph, the points pop up. I want to hide all points so that the line graph is smooth.
- 1,932
114
votes
3
answers
161k
views
How to use two Y axes in Chart.js v2?
I am trying to create a line chart with two datasets, each with its own Y scale / axis (one to the left, one to the right of the graph) using Chart.js.
This is my code (jsfiddle):
var canvas = ...
- 2,265
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
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
105
votes
4
answers
77k
views
Comparison between d3.js and chart.js (only for charts) [closed]
I have used chart.js in my projects several times but I have never used d3.js. A lot of people say that d3.js is the best javascript framework for charts but none of them is able to explain why, ...
- 1,225
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
98
votes
3
answers
79k
views
Chart.js - How to set a line chart dataset as disabled on load
Using chart.js v2, is it possible to mark a dataset in a line chart as being disabled on initial load?
Didn't find an option for it in the documentation.
- 983
96
votes
11
answers
97k
views
Skip decimal points on y-axis in chartJS
I am using this library to draw charts in my web app. The issue is that I am having decimal points in my y-axis. You can see that in the image below
Is there a way that I can restrict it to only ...
- 4,405
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
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
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
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
91
votes
8
answers
105k
views
ChartJS Line Charts - remove color underneath lines
Okay, so I have a ChartJS line chart working that populates directly from data coming for my db.
What I need now is to get rid of the color underneath each of the lines. [as seen in the screenshot ...
- 1,043
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
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
85
votes
8
answers
94k
views
Change the Y-axis values from real numbers to integers in Chart.js
I have a chart that I want to include in my website using Chart.js. In the Y-axis, it gives me real numbers instead of integers. How can I change the number to integers?
Here's a picture of what I ...
- 14k
84
votes
10
answers
106k
views
Charts.js Formatting Y Axis with both Currency and Thousands Separator
I'm using Charts.js to show a graph on my site. Currently, the label shows as a long string of numbers (i.e 123456).
I want it to show as currency with thousands separator: (i.e $123,456)
I'm using ...
- 3,230
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
82
votes
12
answers
147k
views
Charts.js graph not scaling to canvas size
I'm trying to make a graph with Charts.js (current one is just a really simple example I'm trying to get working, somewhat taken from the Chart.js documentation) and the graph isn't scaling to the ...
- 1,181
78
votes
8
answers
215k
views
chart js 2 how to set bar width
I'm using Chart js version: 2.1.4 and I'm not able to limit the bar width. I found two options on stackoverflow
barPercentage: 0.5
or
categorySpacing: 0
but neither of one works with the mentioned ...
- 1,389
74
votes
8
answers
177k
views
Chart.js axes label font size
In chart.js how can I set the set the font size for just the x axis labels without touching global config?
I've already tried setting the 'scaleFontSize' option my options object.
I've also tried ...
- 1,561
72
votes
10
answers
124k
views
How to hide y axis line in ChartJs?
I am using bubble chart and gotta hide the y axis line. I've tried the following but it doesn't work.
yAxes: [{
angleLines: {
display: false
}
}]
- 1,309
70
votes
13
answers
82k
views
NG2-Charts Can't bind to 'datasets' since it isn't a known property of 'canvas'
I am trying to use the basic example of NG2-Charts (http://valor-software.com/ng2-charts/)
I copy pasted the HTML part
<div style="display: block">
<canvas baseChart
[datasets]...
- 4,905
69
votes
9
answers
100k
views
How to vary the thickness of doughnut chart, using ChartJs.?
How to vary the thickness of doughnut chart, using ChartJs
- 2,969
68
votes
4
answers
180k
views
How to format x-axis time scale values in Chart.js v2
I am able to format the tooltips when I hover over a datapoint on a line chart via options.scales.xAxes.time.tooltipFormat, but I can't seem to do it for the x-axis tick lables. My data.labels is an ...
- 6,398
67
votes
12
answers
167k
views
JavaScript Chart.js - Custom data formatting to display on tooltip
I have looked at various documentation and similar questions on here, but cannot seem to find the particular solution. Apologies if I have missed anything obvious or have repeated this question!
As a ...
- 693
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
66
votes
9
answers
85k
views
Hide/disable tooltips chart.js
I'm trying to hide the tooltips in a line chart using chart.js.
I have tried this code, but they never hide.
Chart.defaults.global.tooltipenabled = false;
You can see all the code here of the chart:...
- 10.7k
66
votes
5
answers
48k
views
Chart.js core.js:6162 ERROR Error: "line" is not a registered controller
const gainContext = this.gainRef.nativeElement.getContext('2d')
gainContext.canvas.height = '300px'
new Chart(gainContext, createChartConfig(gainConfig))
function createChartConfig({type, labels,...
- 1,555
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
64
votes
6
answers
99k
views
Chart.js 2.0 doughnut tooltip percentages
I have worked with chart.js 1.0 and had my doughnut chart tooltips displaying percentages based on data divided by dataset, but I'm unable to replicate this with chart 2.0.
I have searched high and ...
- 643
64
votes
13
answers
114k
views
Hiding labels on y axis in Chart.js
I need to hide labels in line chart drawn using library chart.js. I googled but no luck. Could that be hidden?
Thanks
- 835
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
60
votes
4
answers
65k
views
Chart.js multiTooltip labels
I'm trying to get charts.js to display the label name from each dataset in the tooltip.
My code:
var barChartData = {
labels : ["January","February","March","April","May","June","July"],
...
- 9,091
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