Stack Overflow
Stack Overflow

Questions tagged [chart.js]

Chart.js is an open source JavaScript library for creating animated, interactive charts for inclusion on web pages.

Chart.js

Chart.js is an open source JavaScript library that allows you to draw different types of charts by using the HTML5 canvas element. Since it uses canvas, you have to include a polyfill to support older browsers.

Chart.js supports Line, (horizontal and vertical) Bar, Radar, Polar, Area, Pie and Doughnut charts, is responsive and provides options to extend these chart types and write new ones.

Useful Links

Latest release: v3.9.1 released on August 3, 2022

Related tags

12144 questions
272
votes
18 answers

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 the script? var ctx =…
Vincent T
  • 3,044
  • 2
  • 9
  • 18
260
votes
20 answers

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?
Rajendra Thorat
  • 3,248
  • 3
  • 15
  • 24
185
votes
9 answers

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: [{ label: 'I want to remove this…
Raptor
  • 53,206
  • 45
  • 230
  • 366
182
votes
17 answers

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 values correctly... My code: var ctx =…
adanlif
  • 1,999
  • 3
  • 13
  • 8
166
votes
7 answers

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 = { "datasets": [{ "data": data, …
Mohamed Taboubi
  • 6,663
  • 11
  • 55
  • 87
163
votes
4 answers

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 lines are shown across the chart …
Suganthan Raj
  • 2,330
  • 6
  • 31
  • 42
162
votes
13 answers

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..
FuSsA
  • 4,223
  • 7
  • 39
  • 60
153
votes
18 answers

How to add text inside the doughnut chart using Chart.js?

How to render Text inside the doughnut chart, I am using ChartJs.
shashisp
  • 2,879
  • 7
  • 19
  • 29
140
votes
23 answers

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 Chart(targetCanvas).Line(chartData); But the…
Adam Jones
  • 2,370
  • 5
  • 23
  • 40
138
votes
10 answers

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 this with css? var lineChartData = { labels :…
DaniKR
  • 2,418
  • 10
  • 39
  • 48
134
votes
10 answers

Setting width and height

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, and cuts off the far right end. How/where am I…
Fellow Stranger
  • 32,129
  • 35
  • 168
  • 232
132
votes
23 answers

Destroy chart.js bar graph to redraw other graph in same

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 canvas: var grapharea =…
Syed Uzair Uddin
  • 3,296
  • 7
  • 31
  • 47
124
votes
15 answers

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, but couldn't find any parameter that would limit…
mmmm
  • 3,768
  • 9
  • 36
  • 63
121
votes
21 answers

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", "002", "003", "004", "005", "006", "007"], …
BoooYaKa
  • 2,051
  • 2
  • 16
  • 17
120
votes
4 answers

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.
Dan
  • 1,812
  • 3
  • 13
  • 27
1
2 3
…
99 100