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

How to set correct hourly ticks of time-scale X-axis on chart.js

I have a problem with chart.js (2.8.0). Probably I am doing something wrong, but can't find myself. I want to set hourly ticks on time scale X-axis and set the time as unit: 'hour', displayFormats: { hour: 'HH:MM'} I expected to have x-axis ticks…
toshikisa
  • 49
  • 3
4
votes
1 answer

Specify varying thickness of each bar in Chart.js bar chart

Working on a custom chart that can determine the thickness of a bar in a bar or horizontal bar chart based on a value provided by the data, not a pre-set width as possible with barThickness or barPercentage / categoryPercentage. Goal: I can create a…
tanner
  • 149
  • 2
  • 9
4
votes
1 answer

Rotate 90 degrees clockwise the scaleLabel (no ticks or labels) on a Chart.js line chart

How can I rotate 90 degrees clockwise the display of scaleLabel on the yAxis? Not the ticks or labels but the single element which is usually on the left side of the yAxis. In this example, containing the string: labelString:'My Label' var options…
Victor Polo De Gyves Montero
  • 1,055
  • 1
  • 8
  • 16
4
votes
1 answer

Chart.js Y axis label, reverse tooltip order, shorten X axis labels

I am creating a stacked bar chart using Chart.js. However, I cannot find in the documentation how to change some things. How to add a label on the Y axis. How to shorten the label on the X axis so it displays only the first 10 letters. How to…
Dimitar Arabadzhiyski
  • 272
  • 1
  • 7
  • 21
4
votes
0 answers

Personalize labels with CSS in Chart.js v2.4.0

In previous versions of the library, I remember I could target an HTML element with CSS and style it. .legend li {...} Now it's all drawn in the Canvas and seems impossible to style the lables (I want to create checkbox like when you click on the…
Wakkos
  • 99
  • 1
  • 4
4
votes
1 answer

Converting Returned PHP Data into JavaScript Object

I have a dataset that needs to be in the same format as a JavaScript variable like below: var theData = { datasets: [ { label: "My First dataset", backgroundColor: "rgba(179,181,198,0.2)", borderColor:…
TheLettuceMaster
  • 15,594
  • 48
  • 153
  • 259
4
votes
1 answer

How is it possible to create a stacked bar / horizontal chart with Chart.JS?

I can create a "traditional" bar chart using Chart.JS, and even a stacked bar chart that looks like this: But I need to create one that sports horizontal, rather than vertical, bars and which displays percentages along the bottom, a la this example…
B. Clay Shannon-B. Crow Raven
  • 8,547
  • 144
  • 472
  • 862
4
votes
3 answers

chart.js plugin for making waterfall charts

I want to create a chart.js plugin to create waterfall charts. I am new to working with chart.js. I was thinking to extend the bar-chart to create a waterfall chart. The draw function in the bar chart controller is as follows: draw: function(ease)…
Sabyasachi
  • 411
  • 4
  • 9
  • 21
4
votes
0 answers

Creating a chart.js pie without hover zoom

I have this code using the latest version of chart.js: // Set chart default options Chart.defaults.global.legend.display = false; Chart.defaults.global.tooltips.enabled = false; Chart.defaults.global.animation.duration = 0; // Create the chart new…
Asken
  • 7,679
  • 10
  • 45
  • 77
3
votes
1 answer

How to increase space between label and chart area?

All my labels are on the top of the bars. I can see this: but I want that would be like this: Padding doesn't work for xAxes but works for yAxes. legend: {display: false}, scales: { xAxes: [{ position: 'top', stacked:…
Владислав
  • 45
  • 1
  • 7
3
votes
3 answers

Multiple labels for multiple data-sets in chart.js

I am using chart.js in react to create Line charts. I have to show data of the day, month and year. For the day I have different labels and data, for the month I have different labels and data, while for the year I have also different labels and…
Pranay kumar
  • 1,983
  • 4
  • 22
  • 51
3
votes
1 answer

Chart.js Legend Padding-Left

I have been playing with the solution found here from user Frosty Z (chart.js 2.5+) to try and apply padding to my legend. The solution works great if the legend is above the chart but trying to add padding in between the chart and legend when the…
FamousAv8er
  • 2,345
  • 2
  • 9
  • 27
3
votes
2 answers

How to properly update chart in React & Chart.js app using API data

I am receiving data from an API and I want to take that data and have it populate my chart. I can see where the API data is being called and is being passed into setState but I cannot seem to correctly take this data and pass it to my chart. I have…
DRD
  • 53
  • 1
  • 8
3
votes
1 answer

Display image on bar chart.js along with label (chartjs-plugin-datalabels)

chartjs-plugin-datalabels supports displaying of inforamtion related to the value, data, context of the graph content. Need to display image along with the text label on each graph based on the values . Refer attached snapshot Tried custom option…
Manhar Sapra
  • 659
  • 1
  • 11
  • 21
3
votes
3 answers

remove strikethrough behavior in chart.js bar chart

i am trying to change the look of the legends by removing the strikethrough effect , wihtout using legendCallback function in chart.js. The reason why i do not want to use the legendCallback function because i have my own custmizations in …
Hunt
  • 8,215
  • 28
  • 116
  • 256
1 2 3
…
29 30