Questions tagged [chartjs-2.6.0]

Chart.js is a JavaScript library for creating animated, interactive graphs for inclusion on web pages. This tag is for version 2.6.0 specific questions.

Chart.js 2.6.0

Chart.js is a javascript library that can be used to easily create animated, interactive graphs to include on web pages.

Version 2.6 provides improved stability, a new documention and new features like an advanced area chart.

Further Information

Related tags

291 questions
2
votes
1 answer

zeroLineColor and zeroLineWidth not working for the x-axis in Chartjs

How to change the width and the color of the x-axis (horizontal axis) in Chartjs? It seems to work using zeroLineColor and zeroLineWidth for the y-axis (vertical one), but it does not work for the x-axis. If we add: ticks: { beginAtZero:…
2
votes
1 answer

getting chartsjs to show key of data label instead of value

I am having trouble with my chartsjs labels. my graph generates fine, I am trying to set the chart so that the data labels are for the text part of the data and not the numbers part. my code shows the data labels as 4, 6 and 2 where as i need them…
kitchen800
  • 197
  • 1
  • 12
  • 36
2
votes
1 answer

How to change React chartjs-2 legend click functionality to hide all except the one clicked?

React Chartjs-2 : How can I implement the functionality where when a legend is clicked, instead of hiding the clicked legend, all other legends/datasets get hidden?
2
votes
2 answers

How to add border in chartjs?

I'm trying to find out how to add border in chart area but it seems all I've been found is only applicable for datasets and the whole chart. Below code does not work. Here is my code: var myChart = new Chart(ctx, { type: 'bar', gridLines: { …
2
votes
1 answer

ChartJs events in Angular

I'm making a chart where I need to click on each data label (I point this out in the image below) to then display the specific charts of the data that was clicked. Graph My problem is that I cannot click and identify which data label I am pressing,…
2
votes
1 answer

Chart.js turn off all y axis and toggle them on / off

What I have: After canvas is rendered I would like to see nothing: no curves on canvas area and no y axis - it actually works Initial view: What I need: After click on label (Dataset1, etc.) I would like to see both curve and its corresponding y…
Robert Głowacki
  • 292
  • 5
  • 22
2
votes
3 answers

Add HTML to label of bar chart - chart js

I am using the chart js to display a bar graph. It's working correctly on normal instances, but I am willing to change the color or a small portion of the label i.e, I want to include some HTML on the label of the bar chart. But, it isn't rendering…
Saroj Shrestha
  • 2,696
  • 4
  • 21
  • 45
2
votes
2 answers

Change tool-tip direction in react-chartjs2

I have implemented the react-chartjs2 https://www.npmjs.com/package/react-chartjs-2 in my react app. I have implemented it successfully but i need to change the direction of the tooltip when hovering the chart. Currently it looks like this But i…
CraZyDroiD
  • 6,622
  • 30
  • 95
  • 182
2
votes
1 answer

Remove background color in chartjs line chart

I have setup my line chart like this: How can I remove the green color from the background and make it transparent
Tony Mathew
  • 880
  • 1
  • 12
  • 35
2
votes
2 answers

How to draw one line with different colors in chartjs2?

I need to draw a chart that looks like the one on the picture. How do I do that with chartjs2? Unfortunately, I couldn't find any examples that show how to implement it.
Umbrella
  • 1,085
  • 1
  • 14
  • 30
2
votes
0 answers

Getting X, Y Axes Values on Hovering the Line in React-Wrapped Chartjs 2

I am trying to replicate the following code in react-chartjs-2: var data = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: "My First dataset", backgroundColor: "rgba(255,99,132,0.2)", …
Waleed93
  • 1,130
  • 2
  • 15
  • 24
2
votes
0 answers

How to set time on y-axes in chart js, I have the data in HH:mm format and distribute data on stacked bar chart for x-axes as date and y-axes in HH:mm

I am getting time data which I want to display in stacked bar chart. I have been able to plot dates on x-axes in chart js with the time format as per the documentation. I want to display time in HH:mm format on y axis. Moreover, the data I am…
2
votes
0 answers

On mouser over tooltip box breaking bar values react-chartjs-2/chartjs

Here I'm facing the issue in the horizontal chart using react-chartjs-2/chartjs. The issue is on page load char loads the bar along with its value as excepted but when I do on hover on the bar to display the tool-tips all bar values are getting…
Umakant Mane
  • 1,001
  • 1
  • 8
  • 9
2
votes
0 answers

chart js: Line chart, data points are shown condensed on the left of the graph

This is the graph that I have Problem is I don't understand why all the points are condensed at the left of the graph, I would like to see them spread from left to right but I couldn't find any thing that could help, this is my code for the line…
BlackSwan
  • 73
  • 1
  • 7
2
votes
0 answers

Images look blurred when I used canvasPattern as pointBackgroundColor

Expected Behavior Images should look good without blur in all screen resolutions. It looks good in the PC resolution. Current Behavior Images looks blurred on mobile resolutions. Here is my code HTML