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
3
votes
0 answers

Getting chart.js to fill the vertical space

I have founds lots of answers for ways to get chart.js plots to fill the horizontal space (using option responsive = true), but they only offer one of two behaviours for the vertical space: Either maintainAspectRatio is true and the vertical size…
Jmb
  • 18,893
  • 2
  • 28
  • 55
3
votes
0 answers

Dart Chartjs Bubble Example

I'm struggling to get the chart.js dart port to properly render a bubble chart when serving the web app with the --release flag. Using dart2js seems to be breaking the chart, as it works perfectly with --no-release. The chart renders in properly,…
Sam
  • 1,234
  • 3
  • 17
  • 32
3
votes
1 answer

chart.js tooltip keeps remembering old data after update

I show a chart with chart.js and when a user hovers over it a tooltip is displayed. This works fine. However, I want to add option that users can un-check data-points. I did and this is done correct, but the tooltip-functionality remembers both the…
CorneeldH
  • 593
  • 1
  • 8
  • 21
3
votes
1 answer

Darkening certain ticks in a chart

Graph so far: I am trying to darken the ticks where 0,5, and 11 are but I cannot seem to find any information in the chart.js website. I am using chart.js2 and angular 5. I am hiding the other labels so that I only show certain labels depending…
andrz
  • 63
  • 1
  • 7
3
votes
0 answers

Chart.js canvas in Angular 6 is showing previous chart on mouse hover over the canvas

I am trying to show multiple types of charts by giving user the option to select the type of chart he/she is interested in viewing. User can select the type of chart from the following HTML radio group code.
Debjyoti Pandit
  • 33
  • 9
3
votes
1 answer

How to get the actual chart width and height in chart.js

I have line chart in canvas and want to know exact width and height of chart(not canvas width and height). Please help.
Ganesh Jaybhay
  • 31
  • 1
  • 2
3
votes
1 answer

How can I make line on chart thinner?

Is there any properties to make line in line chart thicker or thinner excluding "borderWidth"? I need to make line chart with lines thinner than default and don't know how do so
Alex
  • 393
  • 3
  • 7
3
votes
0 answers

HeatMap / Histogram Chart in Chart.js

How to create histogram / heat map chart like the snapshot in chart.js. Requirement is to plot days of week on x axis (Sun, Mon, Tues) and time in hour on y axis (1-12 or 24). All the values will be shown in the color range lighter to darker
Manhar Sapra
  • 659
  • 1
  • 11
  • 21
3
votes
1 answer

Chart.js stacked bar chart - sorting values in bar by value

I try to implement a stacked bar chart using Chart.js framework (version 2.7) und faced following problem: single data elements are drawn in each bar in the same order as provided in JSON structure (which is absolutely logical and understandable). I…
Daniil
  • 913
  • 8
  • 19
3
votes
2 answers

Removing ChartJS 2 border and shadow from point style legend

I am using the following option to get point style legend with ChartJS 2: options: { legend: { labels: { usePointStyle: true } } } However, as displayed in the next image, each dot includes a border and a…
Laurent
  • 14,122
  • 13
  • 57
  • 89
3
votes
0 answers

define chart.js tooltip width

I added as a callback custom string to afterLabel in chart.js tooltip. tooltips: { callbacks: { afterLabel: function (tooltipItems, data) { return 'my nice string' } } }, I am using default…
Mik_A
  • 266
  • 5
  • 16
3
votes
3 answers

ChartJS Annotation Hide /Show

I am using an annotation plugin to draw the horizontal line in my chart. Is there any way to hide & show annotation based on condition? my code: annotation: { drawTime: 'afterDatasetsDraw', annotations: [{ id: 'hline1', type:…
monu
  • 37
  • 1
  • 7
3
votes
1 answer

Hiding the ticks on the x-axes clips the chart (Chart.JS)

I am trying to hide the ticks on the x-axis of a bubble chart. I tried using "display: false" within the ticks property. It does remove the ticks however the chart is now being clipped. Is there a way I can hide these ticks without affecting the…
Josh Gomes
  • 193
  • 4
  • 16
3
votes
1 answer

ChartJS: add a clickable text in title

I am using ChartJS to draw a line chart. I want to update the chart with the different dataset but that is another case. Right now i am having trouble in adding a button in the title because no callback function is available for this. Any thing from…
fat potato
  • 503
  • 1
  • 9
  • 29
3
votes
2 answers

How to add comma in this chart js

I am using Chart.js and here what I want to happen. My Sample Graph I need to attach comma on those values to indicate thousand. Ex: 1,000 animation: { duration: 500, easing: "easeOutQuart", onComplete: function (label) { var ctx…
JsonCM
  • 53
  • 7
1 2 3
…
29 30