All Questions
Tagged with chart.js javascript
7,414
questions
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
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
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
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
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 ...
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
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
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
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 ...
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....
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.
...
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 ...
0
votes
1
answer
44
views
Chart.js 3.9 and Vue: Unable to handle onClick event
Usually, StackOverflow is my last resort cause I don't enjoy being annoyed and I assume neither do you, but I'm desperate.
I want to capture a click on a graph Bar but I don't see a trace in the logs ...
- 454
1
vote
0
answers
46
views
Line chart displays incomplete data when adding multiple datasets
I have an issue with my chart. When I only update the temperature, the graph will be okay. But when I add the humidity, the chart is only filling up halfway:
// Declare chart variables
let ...
0
votes
1
answer
55
views
Combining multiple datasets in chartjs
Currently I have 2 points in my line chart's dataset as seen in the screenshot.
Now I want to add 4th dataset like in the screenshot, its the non-linear dataset.
But 4th non-linear dataset is a ...
- 1,913
1
vote
1
answer
40
views
Radar Chart Color Transition and Border Smoothing Issue
"I am trying to make smooth color transitions in graphics using Radar Chart. At the same time, I want the lines to be smooth, but I cannot get the results I want. The color transitions are smooth,...
- 13
2
votes
1
answer
54
views
ChartJS v4 - Using Points in a line chart will result in all x-values at 0
I am facing a rather strange problem with line charts and ChartJS. Given the following very simple code. I expect to have a line chart where 3 data points (at x: 0, x:1 and x: 2). But instead, all ...
- 1,683
0
votes
0
answers
89
views
chartjs-chart-financial in next.js is not showing
I am working on a simple Chart dashboard app in Next.js, using Chart.js. I am trying to add a Candlestick chart component, for which I use the chartjs-chart-financial library. However I only get an ...
- 21
1
vote
1
answer
48
views
Chart.js: Aligning multiple side-by-side bar charts with inconsistent label widths
I'm using Chart.js (4.4) to create multiple bar charts side by side, each representing a different country. My current implementation uses separate <canvas> elements for each chart. However, I'm ...
0
votes
0
answers
57
views
Chart Js - Doughnut chart - Setting data circumference to less than 180 degrees renders the chart off center?
I'm not sure if i have a fundamental misunderstanding of doughnut charts.
I'm looking to render a doughnut chart with 1 data point (we'll call this datapoint 'completed_A).
The full circumference of ...
- 348
1
vote
1
answer
69
views
ChartJS Bar chart - Modify legend
I am new to ChartJS and I am trying to build a bar graph. This graph should have the following information:
labels = ['D1', 'D2', 'D3', 'D4', 'D5', 'D6', 'D7', 'D8', 'D9', 'D10']
data = [1,2,3,4,5,6,...
0
votes
0
answers
62
views
Why do my line graph dashed grid lines disappear when I hover over graph point data?
My Chart.js line graph dashed border grid line vanishes for few few seconds when I hover over graph point data. This also happens when I activate and deactivate datasets using the "This Month&...
1
vote
1
answer
37
views
combo-bar-line with differest number of element
I would like to make a graphic design showing the trend of amounts.
Specifically a bar graph with the monthly delta and a graph with the cumulative total so far.
In my situation, the starting amount ...
- 59
0
votes
0
answers
106
views
chartjs 4 - ecg graph with 12 derivations, problems with the scale
I'm building a graph in chartjs to show ECG data. The data comes from PHP/Livewire, but, let's say that the data is an array.
For context a typical ECG comes in a grid representing 25mm/s (x = time) ...
- 975
0
votes
1
answer
104
views
React Chart.js is not rendering lines when state changes
I am using React Chart.js V2 and I am trying to update my chart when the state changes. However it is only rendering the y-labels on the left side and is not drawing the lines. The dataset and label ...
- 49
0
votes
1
answer
74
views
Using Webworkers for both parallel rendering and data generation in Chartjs
I am changing from Dygraph to Chartjs because of rendering webworkers and wish to fully multithread the graph to keep main thread empty as much as possible. I am trying to use Workers for handling ...
1
vote
0
answers
35
views
Add another data to ChartJS X-Axis in relation
I am trying to add another data to my chart.
I have to line which a representing a reference data. Now I want to add some points which are showing real results.
The chart should show that the points ...
- 21
-1
votes
1
answer
50
views
How to render the coinbase API in stream line chartjs
Question: I am trying to render the level2 api in the chartjs. But unable to do it
I have kep the data in 2 variable bid, ask and trying to plot them against time.
code sandbox https://codesandbox.io/...
- 1,553
0
votes
0
answers
40
views
How to create a chart with custom visible range selection?
I want to create a chart where date is an x-parameter, so that the user can choose from what date and to what date to view the chart, as is usually implemented on cryptocurrency-related sites (I will ...
- 1
0
votes
0
answers
48
views
How to remove labels from the chart made with Chart.js on the print screen?
I'm using Chart.js for some charts and I’ve run into a bit of an issue. I’ve got these neat comparisons set up, but I need the unselected ones to not show up on the printout. Any ideas on how to do ...
- 11
1
vote
1
answer
90
views
How to group the Y and X axis labels at the very bottom left corner in Chart.js?
I'm using Chart.js v4.4.3.
My goal is to group the Y and X axis label to achieve something like this:
I wasn't able to find what options to use to group this two axes labels together in https://www....
- 627