12,374
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
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
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
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 ...
- 2,660
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 "...
- 133
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 ...
- 133
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:...
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 ...
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
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, ...
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
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 ...
- 838
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 ...
- 33
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 ...
- 1,709
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/...
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 ...
- 27.3k
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 ...
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 &...
- 31
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:
...
- 11
-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
1
vote
1
answer
71
views
Applying custom plugins to specific charts in Chart.js (not globally)
I have 3 charts on a component in my angular app.
I need to create text label plugins to show on the chart. Each chart needs to have specific plugin assigned to it. I have searched a lot and could not ...
- 15
-1
votes
0
answers
47
views
Vue error: Cannot read properties of null (reading 'addEventListener')
I am using the Chart.js library to build a bar chart. My app has a <select> with some elements inside. The chart is generated well. I added a zoom plugin which works fine the first time the ...
- 1
0
votes
0
answers
52
views
Rails 7 chart.js upgrade from version 2.9.4 to 4.4.4 - Uncaught ReferenceError: Chart is not defined
I am trying to upgrade chart.js from version 2.9.4 to 4.4.4.
Javascript is managed by Yarn tool.
Package.json file
`"chart.js": "^4.4.4",`
Application.rb file had this path for ...
- 524
1
vote
1
answer
60
views
How to use string time data with moment.js in Chartjs
I have an array of lap times as strings shown below:
['00:01:41.413000', '00:01:38.790000', '00:01:38.917000', '00:01:38.470000', '00:01:37.906000', '00:01:37.997000', '00:01:37.774000', '00:01:37....
- 13
-1
votes
0
answers
77
views
How to overlap weeks
I have datasets with date time as x-axis.
I did split the datas by weeks like "2024W41", "2024w42"...
I would like to display two lines, one for each week.
Sadly, as its based on ...
- 578
1
vote
1
answer
60
views
how to adjust draggableElement to have correct x and y position
I have implemented chart js to plot a two curve indicated by red and blue line. I want to add a slider (black vertical line) so that it remains always within two curves and user can move it left and ...
- 81
2
votes
1
answer
71
views
Hide and collapse x-Axis when no data available
I would like to create a graph using chart.js where the x-Axis shows only those ticks for whose there is data available. Of course I could do some preprocessing of the data and eliminate those labels ...
- 443
2
votes
1
answer
52
views
Group data differently in bar chart
I am trying to build a bar-graph using chart.js where i add "random" groups of data. Each group should be labeled with a group name and each bar with the property it really represents.
Data ...
- 443
0
votes
0
answers
27
views
Fill graph doesn't work for line charts in chart.js 3.9.1 version
I'm plotting a line chart in my react project using chart.js (3.9.1). This is the data I'm passing to the chart. I can see the chart but I don't see the fill color for the chart. Strangely I see the ...
0
votes
0
answers
28
views
Chart.Js Chart's layout is not updated in storybook
my goal
I'm trying to make Chart preview with using StroyBook and Chart.Js.
what I Did
make Chart Component with using Chart.Js
make Story Component with using Chart Component
versions
"chart....
- 21
1
vote
0
answers
49
views
Chartjs: chart is blurry when using webworker
I am trying to use chart.js with webworker.
I am able to create the webworker and show the chart on the screen with the right dimensions.
The problem is: the chart is blurry and a bit "zoomed in&...
- 311
1
vote
1
answer
55
views
Chart.js - Alignment of 0 values for multiple datasets
I am trying to compare 2 datasets in chart.js. There are large differences in values so in order to compare the values a have decided to graph the data on 2 different y axes.
1 of the datasets has ...
- 493
1
vote
1
answer
61
views
Dataset scaling in a Chart.js bar chart for better comparison
I’m using Chart.js to graph two datasets on the same bar chart for a time-based comparison (x-axis). However, I’m encountering an issue where the height of one graph squashes or expands to fit the ...
- 493
1
vote
0
answers
53
views
Where are the Java classes BarScale, CategoryTicks and BarOptions.IndexAxis?
I am migrating from PrimeFaces 13 to 14. The migration guide says the new chart component allows raw JSON or XDEV Chart.js Java Model. I copied the Java code for the bar chart example from the ...
- 495
0
votes
0
answers
44
views
Combine upload image with chart.js
Is it possible to upload an image and then use it as a background in Chart.JS? I found two separate codes but cannot combine them. It is possible to combine the two codes?
window.addEventListener('...
- 11
1
vote
1
answer
36
views
Chart height is messing on creating new chart after destroying a canvas
During the creation of my chart initially it is rendering up perfectly like you can see below
but when i use my filter to get the dynamic datasets and render my chart, after destroying the initial ...
0
votes
1
answer
57
views
Issue with Dark and Light Mode in Chart.js using react-chartjs-2 with React, TypeScript, Vite, and Bootstrap
I'm working on a React project with TypeScript, Vite, and Bootstrap, and I'm using react-chartjs-2 and Chart.js to display a bar chart. The chart is displayed correctly, but I'm having trouble setting ...
1
vote
0
answers
51
views
Line chart rendering based on dynamic duration changes with suffixes
prTimeToMergeChartOptions : any = comboChartOptions;
prTimeToMergeChartsOptions(){
this.prTimeToMergeChartOptions.scales.x.title.text = "duration"
this.prTimeToMergeChartOptions....
0
votes
0
answers
20
views
How to force scripted chart.js element color changes to persist, rather than immediately revert to default values
I am creating a bubble graph plotting each bubble as a separate dataset. An event handler displays additional information about each dataset when the corresponding point is clicked on. The display is ...
- 55
2
votes
2
answers
55
views
How to remove extra paddings on top and bottom of bar chart in ChartJS?
I have created a single line stacked horizontal bar chart with ChartJS v4.4.4. Additionally, I disabled the legend display, made the point radius equal to 0. I also added negative padding for layout ...
- 131
2
votes
1
answer
55
views
How to control the ticks labels major or minor?
I have not been able to control the labels from scales/x/ticks/major or minor.
Here is a simple code to illustrate the problem.
<!DOCTYPE html>
<html lang="en">
<head>
&...
- 429
0
votes
0
answers
58
views
Chartjs > Display tooltip on two charts when hovered over anyone of the chart
on Hover tooltip works for one chart at a time, it should display tooltip on both the charts. The second chart does displays active points but not the tooltip. The tooltip is a custom one used here.
...
0
votes
1
answer
27
views
Android WebView cannot render ChartJs bitmap on device but works in emulator
WebView does not create a bitmap when ChartJs is used in the webview. The resulting bitmap is all white. It does work on the emulator but not on an actual device.
UPDATE: I set hardwareAccelerated ...
1
vote
1
answer
77
views
Tooltip for a 2 dataset doughnut chart is being presented when mouse's rover is out of the dataset placement
I have a doughnut chart implemented with Chart.js 4.4.1. This chart has 2 datasets, one in an outside dataset doughnut, and the other one in the inside dataset doughnut.
Each dataset has his own ...
- 73
0
votes
1
answer
50
views
Chart JS Curved Labels in Polar Area
I am working on a web project using Chart.js to create a PolarArea chart that dynamically updates based on the selected class from a dropdown menu. I have encountered an issue where the labels are ...
- 1
1
vote
0
answers
54
views
URL segment "undefined" when clicking on item in chart.js
I'm having trouble with Chart.js where clicking on a chart segment always redirects to an undefined value. I have a doughnut chart and want each segment to redirect to a specific URL based on the ...
