Stack Overflow
Stack Overflow

Questions tagged [chart.js3]

Chart.js 3.x is an updated and newer version of Chart.js.

Chart.js 3.x introduces a number of breaking changes. Major highlights of this version are listed in the 3.x Migration Guide.

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

112 questions
0
votes
1 answer

Is it possible to show each legends aligned with each bar in chart.js

I made a horizontal bar chart using Chart.js. In default setting all the legends are shown all together like this there is no gap among them. I want to show each legend aligned with each bar like this I tried so many solutions but none of them…
Alien
  • 121
  • 1
  • 1
  • 11
0
votes
0 answers

getElementsAtEventForMode() of chartJS 3.0

I'm trying to get elements on click event. Both line and bar data can be null. My question is getElementsAtEventForMode() is not working as expected When line data is null. // Same result. const elements = myChart.getElementsAtEventForMode(e,…
Sungjoon Won
  • 51
  • 1
  • 3
0
votes
1 answer

Chart.js 3.7.1 Line Chart - How can I format each label individually on the y axis?

I have a line chart. The data is anywhere between -10 and 10. The labels on the y axis are correct (-10 to 10 incremented by 1). I need the color of each label to be different, based on an array of colors. The number of labels and the number of…
kristy1024
  • 41
  • 1
  • 8
0
votes
1 answer

Chart.js 3.7.1 - How can I control the number of ticks on the y axis of a line chart?

The data will always be integers between -10 and 10, including 0 so there could be a maximum of 21 'intervals' on the y axis. Regardless of the data, I need the y axis to display from -10 to 10 (including 0) in increments of 1. So I need a total of…
kristy1024
  • 41
  • 1
  • 8
0
votes
1 answer

Adding data to line chart (chart.js with Vue.js) results in 'too much recursion' error

I'm using chart.js with vue.js. I have a line-chart and I want to add data (later automatically by SSE). I modified another sample, but the error remains the same. It 'crashes' in the call to this.moonData.push (or…
Makis42
  • 1
0
votes
1 answer

Align doughnut/pie charts vertically in the container

I have three doughnut charts side by side like so: The problem is, the number of items is different between the charts, causing the legend have different height and in turn the charts are not in line. Is it possible to align the charts to the top…
suda
  • 2,604
  • 1
  • 27
  • 38
0
votes
1 answer

How can I display `Null` value data on Y Axis using the Primitive dataset format in Chart.js V3.7.0?

I was wondering if there is a way to display or append Null values in Primitive Dataset. So far this is a short explanation in code of what my code actually does and how I try to Achieve the same thing, but with no success. PHP Code (I use php to…
Jameu Lukasli1
  • 497
  • 4
  • 22
0
votes
2 answers

How to fix size of mixed chart with bubble chart in Chart.js?

I'm implementing a graph that is a mixture of bubble and bar graphs using Chart.js 3.7.0. To prevent the canvas from resizing, I saved the size value in the canvas tag and modified the option value as follows. That is, we want the canvas to have…
Minwoo Kim
  • 497
  • 1
  • 5
  • 21
0
votes
1 answer

How do I change the grid line style on the Y axis in Chart.js?

I'm using Chart.js version 3.7.0 to draw the graph. I created a graph like the image using the following code. I want to express only the line in the red box as a normal line based on the Y axis. const myChart = new Chart(context, { type:…
Minwoo Kim
  • 497
  • 1
  • 5
  • 21
0
votes
1 answer

chart.js API returns bad x and y points

I am calling my bubbleChart via chart.js API and trying to access x,y values of points but I get this very strange behavior console.log(bubbleChart._metasets[1].data) console.log(bubbleChart._metasets[1].data[0]) when I access object.x or object.y…
Mi Ro
  • 740
  • 1
  • 6
  • 31
0
votes
1 answer

Using Chart.js version 3, How to left justify the y-axis labels on a stacked bar chart?

I'm using Chart.js version 3. I need to left justify the labels on the y-axis of a stacked bar chart. How do accomplish that?
Rodney Hickman
  • 3,133
  • 11
  • 53
  • 83
0
votes
1 answer

Chart.js zoom shows decimal points

I have implemented graphs using Chart.js and zoom feature using chartjs-plugin-zoom which works fine. However, while scrolling the y-axes is giving a large range of decimal points which is resulting in the values being out of viewpoint. How do I…
Mehadi
  • 85
  • 8
0
votes
1 answer

Chart.js sciptable options: accessing the values of the data object?

I am collecting data from an API. Comes in JSON format: [{'time':'08h00','magnitude':25, 'temper':12.6},{'time':'09h00','magnitude':39, 'temper': 5.3}] Making my chart: const ctx = document.getElementById('chart').getContext('2d'); const chart =…
Ingwe
  • 146
  • 13
0
votes
1 answer

How to log the callbacks (object) for Chart.js tooltips? (v3.0)

I'm trying to make custom tooltips for Chart.js (v3.0), however, when I console.log the context of the function it says: TypeError: Converting circular structure to JSON Is there a way to log this, so I can see the available data?? Code Example: …
Izzi
  • 2,184
  • 1
  • 16
  • 26
0
votes
1 answer

ChartJs: Is there a way to control the font options per line for a multiline axis label

I am open to learning that there is already a way (via configuration, or developing a plugin) to hook into the rendering of the label of an axis, such that I could control aspects of the font used to render each line of a multiline label (e.g., what…
Rich R
  • 21
  • 6
1 2 3 4 5
6
7 8