All Questions
1,020
questions
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:...
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
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
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 ...
0
votes
0
answers
37
views
Put The Chartjs on Canvas using Nextjs
I have the problem when using chart on the image canvas, the issue is that the chart does not show/appear on the image canvas.
const drawCanvas = (canvasWidth, canvasHeight) => {
const dpr = ...
- 3
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
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
0
votes
1
answer
135
views
How to restrict the area of a react-rnd Rnd window that is draggable?
I put some ChartJS graphs in Rnd and it's mostly great but if I want to pan around in the graph, it also moves the window. Here's an example...
My current code is
<>
<Rnd
...
- 17.8k
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
1
vote
1
answer
249
views
ChartJS Pie chart with react-chartjs-2 Legend align to the right error
I am trying to create a Pie chart in react using react-chartjs-2 and chartjs.
For that I'm using "chart.js": "^4.4.3", "react-chartjs-2": "^5.2.0"
The problem ...
0
votes
0
answers
14
views
Show Tooltip on hover over label on horizontal bar graph in chart.js
i want to show the tooltip on hover over label
now what happening is when i drag my cursor from bar to label the tooltip remains i want
type: "bar",
data: {
labels: data....
- 1
1
vote
0
answers
275
views
Error: Cannot read properties of undefined (reading 'plugins')
I'm trying use chartjs-plugin-colorschemes plugin, but in your documentation says that I need install and import plugin, I use these commands:
yarn add chart.js chartjs-plugin-colorschemes react-...
1
vote
1
answer
44
views
I need to format data from a json with chartjs with reactjs to display data with 2 x axes
I can't understand what I'm doing wrong, I need it to be like this example:
Corretly graphic as example
This is the json data I receive:
[
{
"label": "Others",
"type&...
0
votes
2
answers
99
views
Prevent chart to resize due to long labels
i am using chart.js and react-chartjs-2. I have this polar chart and a dropdown at top left, as seen in the screenshots, they get resized due to long labels. when I give an empty array to display no ...
- 1,913
0
votes
0
answers
51
views
Uncaught runtime errors: ERROR dispatcher is null
Trying to use chart.js, but everytime i try fetch the data it throws me 'Uncaught runtime errors:
ERROR
dispatcher is null' this error. The page doesn't render at all, everything on there is gone, ...
- 11
0
votes
0
answers
116
views
How can I improve React Leaflet performance when rapidly updating a marker position?
I'm working on a page which reads GPX files (a series of lat/lon GPS points) and plots the route using React Leaflet as well as showing an elevation profile using react-chartjs-2.
When hovering over ...
- 1,330
0
votes
0
answers
41
views
How do I add padding for a grid in Line Chart-JS?
I want the point area with a tooltip to not break if the maximum value is reached.
There should be padding/margin in front of the top and bottom gridlines
I use "react-chartjs-2", its my ...
1
vote
2
answers
287
views
How can I force a re-render react component Chart(react-chart.js) and update the custom plugin?
I made tooltips for all points using the plugin with two background colors dark and light. But the plugin works only after refreshing page. I made a code sandbox to show a problem. When you'll open ...
0
votes
1
answer
38
views
how to position elements in the many layers of this tier circle, distributed evenly and equidistant from the center?
Image of the css concentric circles i have
I need to display items dinamically given a list of jsons, but what i need to know is how to get all the items in the correct position. I thought of doing ...
0
votes
0
answers
64
views
Error message in console while using Chart.js with NextJS: Canvas is already in use
I am trying to display some basic data within chartjs and nextjs. below there is the main code and some key notes to consider
Main code having the problem
import Chart from "chart.js/auto";
...
- 1
1
vote
0
answers
209
views
Chartjs line chart with tension not filling whole area?
I am using Chartjs(4.4.3) and react-chartjs-2(5.2.0) to show line chart in ui
I am having issue with area fill in line chart,
It is not filling completely for certain width
It happens only on latest ...
- 31
0
votes
1
answer
565
views
How to Make a Chart.js Chart Responsive with Fixed Aspect Ratio in React?
I'm working on a React project where I need to display a Chart.js chart inside a parent component which is in grid layout. The chart should resize according to its parent container while maintaining a ...
- 1
1
vote
1
answer
145
views
Chart.js - X-axis not displaying dates with timestamps in format "YYYY-MM-DDTHH:mm:ss.SSSSSS" (React chartjs-2)
I'm trying to create a line chart in React using chartjs-2 to visualize timestamps and their corresponding power measurements. My timestamps are in the format "YYYY-MM-DDTHH:mm:ss.SSSSSS" (...
0
votes
1
answer
29
views
Animation is stuttery on mobile phones [Solved]
I made a spinning wheel using chart.js pie chart and it works flawlessly on pc - basically am drawing a pie chart with datalabels for each option, and then spinning the chart accordingly. The problem ...
1
vote
1
answer
127
views
How can i change the format of my candlestick chart in chart.js?
I am using vite and react to build a node.js program where I am collecting data from coinbase exchange API to rebuild a dashboard. This is my code, where the API returns: an array of arrays of the ...
- 23
0
votes
0
answers
98
views
Pie Chart labels overlapping and getting clipped in react chart js 2
In the following code, the pie chart's labels are overlapping and clipping at the top. How can I prevent this?
For the following code, the labels that are used not only overlap but clip as well. How ...
- 1
0
votes
1
answer
37
views
Custom tooltip doesn't show for horizontal bars which cover 100% of the horizontal length of the entire chart (react chart js)
I am using v4 of react chart js. The chart type is horizontal bar and I am using a custom tooltip to generate the tooltip but the tooltip is not displaying for bars which have 100% bar length.
...
- 13
0
votes
0
answers
38
views
Unable to see center text and subtext in Chart.js doughnut chart
I am using Chart.js for a doughnut chart in a React application. I have used this component twice, but I am unable to see the center text and subtext. I am also having trouble registering the plugin.
...
- 15
1
vote
0
answers
42
views
vertical Gradient color for each bar is not working in a Grouped Bar Graph which has negative and positive bars using ChartJS
I am using Chart.js grouped bar chart. I want to show my bars with gradient colors. Grouped Bar Currently it show as shown in below image. Any help will be greatly appreciated.
How to create a ...
- 31
0
votes
0
answers
93
views
How to display the label text when we hover over the labels on X or Y axes?
I am currently working on a React project that is using ChartJS to generate charts based on the data gathered from the database. Recently I found an issue when the labels are too long,the chart will ...
- 1
0
votes
1
answer
83
views
Chart.js - How to generate time chart
I'm making a simple server log, and I want to use Chart.js to generate total hit reports by hour, day, month, or year. Here is my code:
import { ChartColors } from "$fresh_charts/utils.ts";
...
- 2,816
1
vote
1
answer
61
views
How to dynamically stack and unstack bar chart with chart.js
I have a barchart where i want to toggle if the bars are stacked or behind each others.
Note x-axes is stacked to be behinde each other.
useEffect(() => {
if (!myChart) return;
...
- 74
0
votes
1
answer
58
views
How to display data from Mongodb in ChartJS?
I have a pie chart and I need to display the data from the 'post' in it
Does anyone know how to do this?
const DoughnutChartComponent = (post) => {
const Ferum = isNaN(parseInt(post.title)) ? 0 : ...
- 1
0
votes
0
answers
48
views
Reducing white space on either side of a single-bar stacked horizontal bar chart - Chart js
I am using chart js to generate this chart within a React component.
My code is as follows:
setChartData({
labels: ['SDA300'],
datasets: [
{
...
1
vote
1
answer
56
views
Chart.js V4 Toggle each bar in chart while having different labels under each bar. How?
I am trying to create a barchart with several different datasets but I'm struggling with getting labels below each bar. This is what I currently have.
I want to have labels below the bars as well, ...
- 97
0
votes
0
answers
28
views
How can I increase the gap between the values of the x axis in a line chart and also change its width and height?
I just started using charts js in react and I wanted to know that can I increase the gap between the values of the x axis in a line chart and also in need to change the width and height of the chart.
...
0
votes
1
answer
45
views
Group Bar chart tooltips showing time data as points instead of formatted HH:MM:SS in React Chart.js
I'm working on a React application that utilizes Chart.js to display bar charts. I'm encountering an issue where the tooltips in the bar chart display time data as points instead of the desired ...
- 418
0
votes
0
answers
45
views
React - accessing an array item returns the old value, despite the log being correct
I am trying to use ChartJS, and make it possible for my labels to be editable updating my data live. Meaning all the labels on the x-axis and the value labels above the chart bar will be editable live ...
- 1
1
vote
1
answer
415
views
How to change offset of horizontal bars in react-chartjs-2
I have used following graph config to render graph:
{
type: 'horizontalBar',
indexAxis: 'y',
barThickness: 12,
scales: {
x: {
suggestedMax: 6,
suggestedMin: 0,
...
1
vote
0
answers
50
views
Chart.js Pie Chart: How to Make Data Labels Stay Fixed Relative to Segments?
I'm using Chart.js to create a pie chart with data labels. However, I'm encountering an issue where the data labels rotate freely instead of staying fixed relative to their respective segments when ...
- 11
0
votes
0
answers
22
views
Customize react-chartjs-2
My task is to create a chart with the following design using react-chartjs-2:
My current approach:
With options:
scales: {
x: {
ticks: {
maxTicksLimit: 8,
},
...
- 51
1
vote
1
answer
234
views
update data on zoom event in chart.js
I'm using chart.js & React in a project, I need to draw a chart of very large data, so I'm using sampling for ease of work and not using all available data.
but I want to update data when user ...
0
votes
1
answer
48
views
setnterval is acting unpredictably in React Project causing multiple changes to State Array
In the above component of my React project I have used setInterval to create a State Array that has a maximum size of 10 and used ChartJS to represent the changes in that Array in a Line Graph, but ...
0
votes
1
answer
151
views
Recharts/Chart js - Can I create radial stacked bar chart?
I'm evauating which library I should use for my project. For now my best options are Recharts and Chart js but i have one important type of chart that i would like to create.
So i am wondering if i ...
- 21
2
votes
0
answers
682
views
I need a react spinning wheel with an arrow at the top, with the ability to control the probabilities
I am working on a React application that utilizes Chart.js to create a pie chart. The pie chart should dynamically update based on the number of segments provided. Initially, I generated the data ...
-1
votes
1
answer
113
views
Chartjs react horizontal bar chart change y axis labels to images
In this chart I want to replace the text labels "January", "February", etc. with images:
How can I do this with Chart.js and React chart js 2?
I cannot see this document in the ...
- 7,115
0
votes
1
answer
75
views
React Chartjs not showing with dynamic values
I am using chartjs library to show charts in my application. I am using chart in a separate component. The component is showing the chart when the values are hard coded. I want to pass the values from ...
- 1,183