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
6
votes
2 answers

Can't get bar chart colors in Chart js working in React Js

This is my first time working with Chart Js and I managed to get it displaying on my page but the keys 'label', 'backgroundColor', 'borderColor', and 'borderWidth' won't display. The keys 'labels' and 'data' work just fine as I can see the labels…
Banner
  • 583
  • 2
  • 6
  • 19
6
votes
1 answer

How to dynamically set ChartJs line chart width based on dataset size?

I'm using ChartJS (v2.1) to create line charts. I don't have a fixed size dataset, and I want the line chart to adjust its width based on how big the dataset is: Large dataset: Smaller dataset: I want the large dataset to make the chart wider…
Bora B.
  • 175
  • 2
  • 7
6
votes
2 answers

Category scale on Y-axis and time on x-axis in bubble chart in Chartjs

Is is possible to have a category scale on y-axis in Bubble chart? I am trying to create a bubble chart where on y-axis-> days of the week and x-axis-> time in "hh:mm a" format. (only because Chart.js allows timescale only on the x axis). Please…
jasonry
  • 61
  • 1
  • 4
5
votes
1 answer

Laravel 8 ConsoleTvs 7 - Apply dataset configuration through extra argument of advancedDataset method

I am sending my data to the front-end of ConsoleTvs 7 Chartisan chart using the built in back-end advancedDataset method. As the third parameter I decided to send extra dataset configurations in array data type: // Example of extra info data that…
Hmerman6006
  • 1,622
  • 1
  • 20
  • 45
5
votes
4 answers

How to hide label for chart.js

I have chart which show 3 types of label I want to keep two of them and want to hide one Invoice Income Report. How can I hide that one label? I am using chart.js v2 var myChart = new Chart(ctx, { type: 'bar', data: { labels: labels, …
Bilal Arshad
  • 51
  • 1
  • 2
5
votes
2 answers

Chart.js - How To Show Value of Label as Percent of X and Y Values - Currently Always 100%

I am using Chart.js along with a Chart.js plugin, chart-labels. I am wanting to show the labels at the top of the bar chart, and in the label show the percentage of the x value in relation to the y value (e.g., 16 is 94% of 17), but the label values…
Joyrex
  • 1,103
  • 14
  • 24
5
votes
2 answers

Chart.js 2.7.0 Grouped Horizontal Bar Chart, how to get tooltip to display data for one bar, not whole group?

Here is a Grouped Horizontal Bar Chart: http://jsfiddle.net/jmpxgufu/185/ var ctx = document.getElementById("myChart").getContext("2d"); var chart = { options: { scales: { yAxes: [{ barPercentage: 1.0 }], …
JustLooking
  • 2,405
  • 4
  • 28
  • 38
5
votes
1 answer

Chart.js OnClick event with a mixed chart, which chart did I click?

EDIT: Modified to add options, and a suggested (from the answer) chartClickEvent, here is a jsfiddle: http://jsfiddle.net/jmpxgufu/174/ Imagine if you will a Chart.js mixed chart with the following config: var config = { type: 'bar', data: { …
JustLooking
  • 2,405
  • 4
  • 28
  • 38
5
votes
1 answer

Adding a label to a doughnut chart in Chart.js shows all values in each chart

I'm using Chart.js to draw a series of charts on my site and I've written a helper method to draw different charts easily: drawChart(ctxElement, ctxType, ctxDataLabels, ctxDataSets, midLabel) { var ctx = ctxElement; var data = { …
erol_smsr
  • 1,454
  • 4
  • 24
  • 49
5
votes
0 answers

Chartjs: multiline year datasets to display in a one year span

I've created this chart with the code below, that takes a time span of multiple years for data comparison. I have a dataset similar to the one below, but each set can be either shorter or longer than another. { label: 2013, data: [{y: 266, x:…
omegbule
  • 51
  • 4
5
votes
2 answers

Chartjs 2.0 - Increase height of x-axis labels

JSBin here: http://jsbin.com/xukuhanota/1/edit?output I'm trying to increase the height (or essentially, the top/bottom padding) of the labels (ticks?) along the x axis. Here is the relevant bit of code for the chart: xAxes: [{ id: 'x-axis-0', …
elzi
  • 5,442
  • 7
  • 37
  • 61
4
votes
1 answer

How to use react hook in Bubble chart using chart.js

I'm trying to add new bubble in the chart whenever we click on add button I am able to update the state of data i.e. Chartdata using usestate hook but the chart does not re-render and does not show the chart according to the new updated…
James_sheford
  • 153
  • 2
  • 13
4
votes
1 answer

Treemap chart.js text wrap

In my code below, I am able to draw a Treemap and also display the tag in each tree cell. But the text is overflowing the tile if it's a long word I need to ensure the word stays in the tile even If it means putting .... after certain characters.…
mewbie
  • 63
  • 2
4
votes
2 answers

Can't bind to 'chartType' since it isn't a known property of 'canvas' with angular12

I have created angular 12 application and trying to include barchart with my application using 'ng2-charts and chart.js' I have imported NgChartsModule in both app.module.js and my component.module.js file. But, Still I am facing the below error "…
RajiK
  • 71
  • 1
  • 5
4
votes
0 answers

When using chart.js, custom tooltips disappear immediately after rendering

I'm using chart js 2 to display several Line graphs. I want to set a custom tooltip to allow me to view additional data when the user hovers over a point on the graph. However, every time I add a callback function (no matter what the function…
Jonny Bischoff
  • 41
  • 1
1 2 3
…
29 30