12,380
questions
0
votes
0
answers
7
views
AlpineJs 3 and Charts.js (4.4.6) gives Uncaught RangeError: Maximum call stack size exceeded when calling Chart.update()
I'm tring to update my chart with new data. But whenever I call update functions I get error: Maximum call stack size exceeded.
<div x-data="chartComponent()" class="max-w-xl mx-...
- 61
1
vote
3
answers
2k
views
How to use chart.js drawing multiple lines from line sets with (X, Y) values?
I'm not going to chart multiple lines by months as Chart.js document.
I have some data like:
line1={(X=1.1, Y=100), (X=2.1, Y=200), ... }
line2={(X=1.2, Y=110), (X=2.2, Y=210), ... }
......
I want all ...
- 1
0
votes
0
answers
9
views
Graph shrinks after resize() when pointRadius is positive
I encountered an issue where the size of the chart changes unexpectedly when the pointRadius of a dataset is modified. Here's a minimal explanation of the behavior:
Initial state: I initialize a ...
- 1
0
votes
1
answer
59
views
Chart.js: Stacked Bar Chart Layout Issue with Additional Single Bar
I'm facing an issue with the layout of my Chart.js stacked bar chart. I'm trying to display a single bar for "前年電力量" (Previous Year's Power Consumption) alongside a stacked bar for "...
- 50.1k
1
vote
1
answer
28
views
Setting Chart.js scales y title gives compile time error " type '_DeepPartialObject"
I subscribe to data from the backend to fill my charts, when the data is received I would like to set some options so it goes like this:
this.chart.config.options.scales.y.title.display = true;
This ...
- 51.1k
111
votes
19
answers
302k
views
Chart.js canvas resize
In (Android WebView HTML5 canvas error) i posted a question regarding plotting graphs using Graph.js library.
The problem i have now is that if i call the function to plot the graph multiple times, ...
0
votes
0
answers
31
views
Chart.js Panning Not Working in ASP.NET MVC Application Using chartjs-plugin-zoom
I'm developing an ASP.NET 8 MVC application where I'm using Chart.js to display two real-time line charts: one for "Penetration Depth" and another for "Hydrophone Audio Levels." I’...
- 1
-2
votes
0
answers
28
views
Hide fillText when I move mouse at the tooltip
I'm using version 2.9.4. My appp shows weather. There are some fillText texts with temperature. But: I want hide these fillText (animation, onProgress) values when there is my mouse which shows some ...
- 15.9k
2
votes
2
answers
4k
views
Add watermark/logo to Chart.js
I've been looking through docs and other SO posts, but it seems this hasn't been asked before.
Is there any way to add a watermark or logo to a chart made with Chart.js?
I need this mainly for when ...
- 480
0
votes
1
answer
31
views
How to Make a Baseline Bar Behind Stacked Bars in Chart.js?
I’m trying to create a stacked bar chart in Chart.js where one specific bar (labeled "予想" - prediction) acts as a baseline or background layers. The goal is for this bar to sit visually ...
- 50.1k
0
votes
3
answers
11k
views
How to remove the inside-border from a single-element doughnut chart? Chart.js
If there is only one element (segment) in a Pie or Doughnut chart, a single radius line is drawn at the start/end of that single segment.
I want to remove the marked white line to make it a uniformly ...
- 1
0
votes
0
answers
26
views
"You may need an additional loader to handle the result of these loaders" - issues with babel config potentially
Currently working with @mui/x-charts and keep getting the same error no matter what I try. I was trying to work with Chart.js and was getting errors to.
./node_modules/@mui/base/Popper/Popper.js 151:...
2
votes
3
answers
6k
views
How to draw horizontal Lines using chart.js 3.x ? Cannot get it working
Goal
I would like to create a graph comprising of three horizontal lines overlaying my actual dataset line using Chart.js 3.x by CDN integration in my html page.
So, I have no own Chart.js ...
- 8,665
0
votes
0
answers
39
views
How to add labels outside the canvas in Javascript using ChartJS
Hello guys i got this problem where im trying to put some labels or kind of annotations outside a canvas that i generate with ChartJS, but im new to using ChartJS and idk if im doing the right way to ...
- 208k
0
votes
0
answers
29
views
Chart.js Streaming Plugin in FilamentPHP: Error: "realtime" is not a registered scale
I'm trying to integrate the chartjs-plugin-streaming plugin with Chart.js in a Laravel project using FilamentPHP for real-time data visualization. My goal is to use the realtime scale provided by ...
- 198
0
votes
0
answers
35
views
How to make snap scrollable chart like an apple health?
I want to create a chart similar to the orange-colored chart in the GIF which is in Apple Health App with snap-scroll capabilities at both day and week levels,
but I'm not sure how to approach it. Is ...
- 4,501
3
votes
1
answer
82
views
Donut with rounded edges in one direction and white border between the segements
Chart js Donut segment is not displayed in one direction. First and last segments are not working as expected
Expectation : Need chart js donut rounded segments displayed in one direction with white ...
- 7,705
6
votes
3
answers
2k
views
Chart.js get array of currently visible points on graph
Using Chart.js with zoom/pan enabled, I am trying to write a function to export only what is visible on the canvas to CSV.
But I cannot figure out how to get only the visible datapoints after the ...
- 2,414
26
votes
6
answers
55k
views
Chart.js - Writing Labels Inside of Horizontal Bars?
In Chart.js, is there any way to write the labels inside of the horizontal bars in a "horizontalBar" chart? As in something like:
Is anything similar to this possible in Chart.js?
Thanks!
- 251
0
votes
0
answers
28
views
Move ChartJS charts to original position when window maximized
I have a page with multiple charts using ChartJS, each contained in its own div like so:
<div class="formgrid grid gap-2">
...
- 81
0
votes
1
answer
47
views
Is it possible to hide segments in chart.js?
I wonder if I can set the lines to be hidden in chartjs datasets->segment,
like this:
const down = (ctx, value) => ctx.p0.parsed.y > ctx.p1.parsed.y ? value : undefined;
const up = (ctx, ...
- 7,968
1
vote
1
answer
36
views
Is it possible to create a graph in which a single broad bar contains multiple bars in Angular?
I want to create a graph like this
I haven't been able to find a solution.
I asked ChatGPT for the solution. The code it gave out did not work even after trying to make it work.
At the end of ...
- 51.1k
2
votes
2
answers
1k
views
Update Chart vue3-chart with new data
I have Chart.js Chart in a Vue component using vue3-chart-v2.
Everything works fine untill I want to update the data.
Right now, I am using a watcher to check if the data changes.
This works, but ...
2
votes
2
answers
1k
views
Make time series show last date in axis?
So in Chart.js i have a time series based on a range of dates. The chart can't show all the dates as axis label so it shows a reasonable selection. It always shows the first date on the left but not ...
0
votes
2
answers
1k
views
Charts.js line chart: Show the most recent date on x-axis when setting ticks.maxTicksLimit
I'm currently using making a line chart with Charts.js over the past 30 years.
Although I have a data point for every year, I can't put a label for each year on the x-axis. 30 years won't fit there. ...
0
votes
0
answers
37
views
Rails 7 - ExecJS::RuntimeError: SyntaxError: Unexpected token: operator (=) - production assets:precompile error
Upgrading chart.js from version 2.9.4 to 4.4.4.
Locally(Machine is MAC OS), rails app is generating charts with upgraded version.
When deploying to AWS EC2, Jenkins build is failing with this error ...
- 524
0
votes
0
answers
24
views
How to shift line bar graph in chart.js
I am using chart.js to render a bar graph with a line graph overlay. Basically I'm showing revenue vs expenses with the line graph being the net income for the period. I'm showing last year as a ...
- 219
2
votes
1
answer
1k
views
Vue 3 chart js cause Cannot read properties of null (reading 'getContext')?
I have button which toggle data passed to this ChartComponent. If hold any seconds after toggle and retoggle so its work but if we doing it a bit fast, it is cause
Cannot read properties of null (...
3
votes
1
answer
16k
views
Chart.js: adding a custom label to each item, and displaying it with a custom tooltip
I'm building my data items like this:
data.push({ x: moment(new Date(e.StartDate)).week(), y: e.title, label:`${e.title} ${e.type} ${e.percentage}%` });
How do I write a custom tooltip callback to ...
CommunityBot
- 1
5
votes
2
answers
12k
views
How to change font size, padding of chart title only, in chart.js 3.x
I am trying to reduce padding and increase title text font size , I went though few example but dont seem to work. Even on placing the parameter at multiple places.
const labels1_1 = ['1','2','3', '4',...
- 5,007
57
votes
3
answers
78k
views
Chartjs change grid line color
First I don't know what's it called. But how do you change its color from gray to white? Or is it even possibe?
- 5,007
1
vote
1
answer
38
views
How to make a line chart with unequally spaced x values
Making a scatter plot with vue-chartjs <Scatter> was perfect:
Now the user asks for the same chart but with points connected. So I tried to change <Scatter> to <Line>. But the ...
- 326
1
vote
1
answer
9k
views
How to rotate a linear graphic in chart.js?
I have generated a linear graph using chart js, but I must show it in a different position than the one shown by default.
I have seen examples of how to rotate the labels generated by the graphic, ...
CommunityBot
- 1
17
votes
6
answers
37k
views
chartjs datalabels change font and color of text displaying inside pie chart
I am using chartjs
and datalabels
I have achieved everything I needed from chartjs and its plugin. Here is my final out
Here is my code
( function ( $ ) {
"use strict";
...
- 5,007
5
votes
2
answers
3k
views
This method is not implemented: Check that a complete date adapter is provided
I'm trying to get Chart JS to work with time axes, but I get this error in the browser:
Uncaught (in promise) Error: This method is not implemented: Check that a complete date adapter is provided.
I ...
- 15.1k
110
votes
9
answers
121k
views
Chart.js — drawing an arbitrary vertical line
How can I draw an vertical line at a particular point on the x-axis using Chart.js?
In particular, I want to draw a line to indicate the current day on a LineChart. Here's a mockup of the chart:
...
- 480
63
votes
13
answers
114k
views
Hiding labels on y axis in Chart.js
I need to hide labels in line chart drawn using library chart.js. I googled but no luck. Could that be hidden?
Thanks
- 1
2
votes
2
answers
678
views
How to Use Two Different Colors for the Same Bar in a Chart.js Horizontal Bar Chart?
I am working with a horizontal bar chart using Chart.js, and I need to display two different colors for each bar based on their values. Specifically, if a bar's value exceeds 150, I want the portion ...
- 107
66
votes
9
answers
85k
views
Hide/disable tooltips chart.js
I'm trying to hide the tooltips in a line chart using chart.js.
I have tried this code, but they never hide.
Chart.defaults.global.tooltipenabled = false;
You can see all the code here of the chart:...
- 2,795
1
vote
1
answer
80
views
How to avoid chartjs line coming down when adding new value?
I’ve created a line chart in Chart.js that updates every second with new values. However, there's a small issue: when a new value is added, the animation starts from the bottom and moves up to the ...
- 7,705
1
vote
1
answer
45
views
How to change value in tooltip charJS
Im using LightningWebCharts here is the documentation link https://salesforcelabs.github.io/LightningWebChartJS/
I want add 'k' in tooltip value. Tooltip documentation https://salesforcelabs.github.io/...
- 7,705
3
votes
1
answer
4k
views
Chart JS pass in custom data for points
I am trying to create a line chart plugin that will draw reference letters under some points. To do so, the plugin uses a custom afterDatasetsDraw function to perform the drawing. However, I am ...
- 5,007
6
votes
1
answer
9k
views
How to hide value in Chart JS bar
I try to hide the value inside the bars of my bar chart. The reason for that is that I placed the value on top of the bars, and the value should not be shown twice.
I tried different options to hide ...
- 5,007
50
votes
9
answers
111k
views
Chart.js - how to disable everything on hover
How can I set the code that there will be no hover effects, hover options, (hover) links etc on chart?
I'm using chart.js. Below is my code, where I set pie chart.
Html..
<div id="canvas-holder" ...
- 5,007
0
votes
1
answer
47
views
Customize ChartJS Dougnut Border on Hover
I have this following Prototype created by our Designer using Figma.
My stack is:
Vuejs
Bootstrap
ChartJS
So my questions is can we add this custom border on certain segment on click?
Goals:
Add &...
- 7,705
0
votes
1
answer
52
views
Chart Js; Bar chart; Can the X axis labels be simply left aligned/justified rather than appearing centered?
Can the labels on the X axis be left aligned/justified as opposed to appearing centered like the following example?
i.e. the requirement is that the label should be aligned with the grey vertical ...
- 91
4
votes
2
answers
9k
views
How do you add custom text to tooltips in charts.js
I am currently fiddling around with some charts, and I would like for there to be a string of text to come up as you hover over certain data points.
So for example, currently my dataset looks like ...
CommunityBot
- 1
1
vote
1
answer
60
views
Issues with Installing ng2-charts and chart.js in Angular Standalone Component
I'm currently working on an Angular project where I want to implement charts using ng2-charts and chart.js. However, I'm facing some dependency resolution issues. Here’s a summary of the situation:
...
- 51.1k
-1
votes
0
answers
35
views
Why is the chart in Bootstrap example dashboard not loading?
I am having trouble loading the chart in the Bootstrap examples when loaded into Express. I am looking to replicate a local version of https://getbootstrap.com/docs/4.0/examples/dashboard/.
When I ...
- 1
2
votes
3
answers
2k
views
Custom Tailwind CSS colors in chart.js
I have a React application that utilizes Chart.js for rendering charts. I want to customize the colors of labels in the chart using custom colors defined in my Tailwind CSS configuration. I have ...
- 183