Questions tagged [react-chartjs-2]
452 questions
1
vote
0 answers
To Draw a Bar Chart with multiple data set
Survey is conducted with different gender
Age is in x-axis and number of people is in y axis
Age should be from 1-100
Ages of male ['28', '13', '17', '34', '37', '36', '35', '25', '32', '31', '26', '30', '29', '18', '27', '33']
Number of Male ['1',…
Sadananda Sherigara
- 11
- 2
1
vote
0 answers
ChartJS bar graph to show different width for different graph
I have created a Marimekko chart using chartjs and react , but i have a problem in assigning different width for each stack bar . I tried barPercentage,categoryPercentage but nothing works .
below is my chart , as seen every bar has same width , i…
alankritha mani
- 11
- 1
1
vote
1 answer
Custom plugin chartAreaBorder is not the right type but it works
This is how i am using the plugin. How to make typescript to shut up about this?
const options: ChartOptions<"line"> = {
plugins: {
chartAreaBorder: {
borderColor: gridColor,
borderWidth: 1,
}
}
...other…
lowzyyy
- 53
- 4
1
vote
0 answers
How to make a line chart with stacked values in react-chartjs-2?
I have this code in chart.js.
const data = {
datasets: [
{
label: 'Dataset #1',
backgroundColor: 'rgba(255,99,132,0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 2,
hoverBackgroundColor:…
GollyJer
- 23,857
- 16
- 106
- 174
1
vote
2 answers
How do we change the position of legend in chart.js-2 react
i am trying to move the legends from top to bottom but not able to move the position
Since i am learning charts and trying to implement it to react need some help
also i need to change the size of the doughnut chart(should be small/thin) and need to…
R9102
- 687
- 1
- 9
- 32
1
vote
0 answers
How to set filled color in react-chartjs-2 with gradient color
I am trying to fill the background color with the gradient color just like below image. I have tried multiple methods to achieve the gradient but failed in most of them.
This is what I have tried till now:
import React from "react";
import {
…
Steven
- 231
- 1
- 8
1
vote
1 answer
How to change the color of a specific y-axis in Chart.js?
I'm working with Chart.js to create a line chart that displays two datasets with different y-axes. I want to change the color of one of the y-axes, The x-axis contains the no of tests which starts from 1, so the first tick in the x-axis is 1 and the…
Rohith Nambiar
- 2,957
- 4
- 17
- 37
1
vote
0 answers
How can I prevent component rendering in react-chartjs-2 and chart.js 4.2.1 to optimize performance and ux
I'm struggling with the react-chartjs-2 component nested within a parent component. Whenever I set the useEffect or useState in another component, the chart flickers and undergoes excessive re-rendering, causing it to disappear altogether. I am…
Thee
- 33
- 5
1
vote
1 answer
Word cloud/tag chartJS TSX Expanding/moving
I have implemented the worldcloud of this form: [https://www.npmjs.com/package/chartjs-chart-wordcloud] in a tsx project. The cloud is implemented and mostly doing fine. I have useEffect on the chart, but it's only suuposed to run one (maybe twice…
Guten
- 11
- 2
1
vote
2 answers
How to add data labels in Doughnut Chart in react-chartjs-2?
I want to add data label in the doughnut chart.I have attached a screenshot as i want the required the output.
Shahzad Qasir
- 21
- 3
1
vote
1 answer
Disable y-axis scaling when zooming with react-chartjs-2
Is there a way to disable the auto scaling of y-axis when I'm zooming on a time series chart ?
You can observe the behavior here : https://codesandbox.io/s/react-chartjs-2-line-zoom-pan-9cz0eh
When you zoom the y-axis will scale so the data occupies…
Oni_
- 35
- 7
1
vote
0 answers
How to specify transition animations for show and hide react-chartjs-2
I am having trouble editing the show and hide transition animation options. The documentation for this part of the animations section on chartjs is lacking. I want full control of the show and hide animations, but can't seem to figure it out or find…
DavidCincotta
- 13
- 5
1
vote
0 answers
Couldn't read property from data received from websocket?
I tried to add curves to visualise data from a python program connected to the app.js program via a websocket. The data is well retrieved through the websocket as it is continuously displayed in the boxes of panel 1.
The graph displays well in the…
Feyto
- 255
- 11
1
vote
1 answer
Image as a pointStyle with ChartJS in React
I'm using chartjs/react-chartjs-s to draw some plots in React/NextJS. I want to use an image for the pointStyle for one plot in specific. In plain JavaScript, an image can be created using const i = new Image() and used as a pointStyle in…
WhoDatBoy
- 329
- 4
- 15
1
vote
0 answers
How to prevent overlapping in react-chartjs-2 and make chart bar scrollable?
I am trying to draw a bar chart using react-chartjs-2, i am using typescript
because i have a big amount of data, there is overlapping in the chart, i want to prevent overlapping, instead of that, i want horizontal scrolling
my config is as…
kadro larino
- 11
- 2