Stack Overflow
Stack Overflow

Questions tagged [chart.js2]

Chart.js is a JavaScript library for creating animated, interactive graphs for inclusion on web pages.

Chart.js2 is a updated and newer version of Chart.js.

See Official Version Documentation for a list of what's new in v2.5.0.

For more information on Chart.js, check out the original tag.

438 questions
228
votes
12 answers

Chart.js v2 - hiding grid lines

I am using Chart.js v2 to draw a simple line chart. Everything looks fine, except there are grid lines that I don't want: The documentation for Line Chart is here: https://nnnick.github.io/Chart.js/docs-v2/#line-chart, but I can't find anything…
iSS
  • 2,598
  • 2
  • 14
  • 17
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
154
votes
7 answers

Removing legend on charts with chart.js v2

I'm making a homepage using, Bootstrap, JQuery and Chart.js (v2). I had my implementation working using v1, but recently just got into Bower and downloaded v2 using that. I'm making a grid of 4 columns each containing a pie chart, however the…
Zeliax
  • 4,987
  • 10
  • 51
  • 79
64
votes
6 answers

How to customize the tooltip of a Chart.js 2.0 Doughnut Chart?

I'm trying to show some data using a doughnut chart from Chart.js2. My current chart looks like this: My desired output must show another attribute, which is the percentage, and looks like this: I've read the documentation, but I can't cope with…
RamAlx
  • 6,976
  • 23
  • 58
  • 106
62
votes
6 answers

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 low and have not found a working solution. I know…
wrennjb
  • 623
  • 1
  • 5
  • 5
56
votes
13 answers

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 the legend. I can't figure out how to increase…
Bryan Lewis
  • 5,629
  • 4
  • 39
  • 45
30
votes
3 answers

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 working for 1.x var data = { labels: ["JAN",…
kchoi
  • 1,205
  • 5
  • 18
  • 32
18
votes
4 answers

How can I change the font (family) for the labels in Chart.JS?

I want to change the font to something snazzier in my Chart.JS horizontal bar chart. I've tried the following, but none of it works: var optionsBar = { . . . //fontFamily: "'Candara', 'Calibri', 'Courier', 'serif'" //bodyFontFamily:…
B. Clay Shannon-B. Crow Raven
  • 8,547
  • 144
  • 472
  • 862
17
votes
3 answers

chart.js stacked graph that overlaps

I am creating a stacked bar graph but I need it to not just add the two vales together and display it. For example: stackgraph This graph is supposed to display the "goal" percentage, and actual percentage. So if the column has a goal value of 70…
Mat
  • 67
  • 1
  • 3
  • 17
17
votes
1 answer

Draw horizontal lines in Chart.js 2.0

Can you help me how to extend Chart.js v2.0. I need to draw some horizontal lines in the charts, something similar to: http://jsfiddle.net/vsh6tcfd/3/ var originalLineDraw =…
Munna Khan
  • 1,902
  • 1
  • 18
  • 24
17
votes
1 answer

How do I customize y-axis labels on a Chart.js line chart?

I have the following chart and would like to manually set the Y axis labels. Instead of using 1,2,3,4,5, I want One, Two, Three, Four, Five. Is there a way to do this? Here's my options structure: options = { scales: { yAxes: [{ …
gitb
  • 1,090
  • 2
  • 12
  • 20
15
votes
2 answers

How can I increase the size of the pie (Chart.JS)?

I'm generating a pie chart with legend that looks like so: As you can perceive, the pie is pitifully puny. I prefer it to be twice as tall and twice as wide. Here is the code I am using: var formatter = new Intl.NumberFormat("en-US"); …
B. Clay Shannon-B. Crow Raven
  • 8,547
  • 144
  • 472
  • 862
14
votes
1 answer

How do I place a new line in a label with Chart.js?

I have a dataset with labels using Chart.js. I want to separate the label into two lines with a new line character. I have tried
and \n, and neither work. labels: ['(A)
Waking', '(B)', '(C)', '(D)'], labels: ['(A)\nWaking', '(B)', '(C)',…
Kale
  • 413
  • 1
  • 5
  • 12
12
votes
5 answers

Select All and Unselect Option for chart.js

I'm Working on Chart.js, wanted to implement Select All and Unselect All option for labels. I'm trying to find it out but couldn't get anything such. Please do help me out if anything such feature can be implemented.
David
  • 539
  • 3
  • 9
  • 23
11
votes
2 answers

Chart.js - style legend: smaller circles

I've create a line chart with chart.js. I changed the legend symbol form from rects to circles by using: legend: { display: true, labels: { usePointStyle: true, }, } I want to change the size of the circles. But according to the…
DarkMikey
  • 383
  • 1
  • 4
  • 24
1
2 3
…
29 30