interactive react charting components using the chart.js framework
interactive react charting components using the chart.js framework
Questions tagged [react-chartjs]
585 questions
2
votes
2 answers
How to increase gaps between vertical gridlines in chartjs
I have drawn a chart using Chartjs for a large number of datasets. So, there are many vertical gridlines by default which looks pathetic. I want to increase the gap between the vertical lines.
Any help will be appriciated.Thanks
Pallab Naskar
- 59
- 1
- 6
2
votes
0 answers
How to Style the legend color boxes as lines for Line, Bar and Pie charts in chartjs?
I have been trying to search for a solution to get the legend colorboxes as line using chartjs, but it looks like we can only reduce them to vertical boxes using boxWidth parameter but not horizontal due to the absence of boxLength parameter. I…
Vamsi
- 388
- 2
- 12
2
votes
1 answer
Filtering data for more visualization of data in react-chartjs-2 when you have lot of array element
I want to get proper visualized data on my chart, but it is messing up because there is 1000 of array element. I don't want to reduce the data but actually to get proper visualization because in x-axis of graph it is showing NaN…
Nitesh Singh
- 385
- 1
- 3
- 15
2
votes
1 answer
How to draw multiple line on y axis for same x axis in chartjs v2?
I have time series data in a database that looks like this:
[
{
min: 100,
max: 200,
avg: 150,
time: 12345678.. (unix timestamp)
},
{
min: ..
...
}, ...
]
I am able to draw a line chart using the avg value by pulling…
Adi.P
- 370
- 1
- 12
2
votes
3 answers
change label position in react-chartjs-3
I'm unable to change the position of the label to bottom in react-chart-js3 . It's now displaying on the top of the chart.
import React, { useState, useEffect } from "react";
import { Doughnut, Line, Pie } from "react-chartjs-3";
export default…
SajZ
- 262
- 3
- 16
2
votes
0 answers
ChartJS - Doughnut Segment Custom Size
I'm building a React component that generates a speedometer and I want to set the length of each segment (i.e. Red - 30%, Yellow - 30%, Green - 30%, and Gray - 10%).
I'm using React-ChartJS-2 and onComplete of the animation I'm drawing the text and…
miguelfeliciano
- 73
- 1
- 6
2
votes
1 answer
React Flow Chart: Connect link when drop anywhere on node
I have been using npm package react-flow-chart,
I can now create links between nodes using drag and drop.
The issue is:
I have to drop the link exactly on the port
In my case, I will always have a single input port on every node,
Is it possible to…
Keval Bhogayata
- 4,422
- 3
- 13
- 36
2
votes
1 answer
Need Infinite chart board with react-zoom-pan-pinch
I have created a flow chart using npm package react-zoom-pan-pinch
Problem :
The chart has a limit on the left and top side, and it seems infinite in the right and bottom side.
Is there any option using which I can extend the chart in all the four…
Keval Bhogayata
- 4,422
- 3
- 13
- 36
2
votes
0 answers
How to put labels on the negative side of the x-axis in chartJS?
I am creating a graph where I display how late or early x was. My labels show the intervals of time, for example, on time, 15-30 min late, 30-45 min late, I want to display late on the positive side of x-axis and early on the negative side of x-axis…
Martynas
- 309
- 1
- 2
- 9
2
votes
1 answer
React-chartjs-2 update height dynamically
I am using react-chartjs-2 library. I have used HorizantalBar which will receive data through props dynamically from parent component. I have wrapped HorizantalBar inside a div to control its height according to data. The height is getting updated…
Vedant Nare
- 163
- 1
- 8
2
votes
2 answers
Plot bar graph in reactjs
I am learning reactjs and I'm trying to plot bar graph. So I'm trying to plot population race graph which change over the time and looks like this.
Population race bar chart
For plotting graph I am using chart-race-react. But it seems like I'm doing…
kelte
- 27
- 6
2
votes
1 answer
Line chart legend border style using react-chartjs-2
Is it possible to make the legend box of dashed line in line chart to have no dashed border?
I read about generateLegend() and legendCallback but I can't understand how it works in react-chartjs-2 together with React functional component. Also, I'm…
junior
- 23
- 1
- 4
2
votes
1 answer
Implementing a choropleth chart using chartjs-chart-geo plugin with react-chartjs-2
I am trying to create a choropleth chart of the United States with functionality similar to - if not the same as this example from chartjs-chart-geo using react-chartjs-2 wrapper for chartjs.
The problem that I ran into is how to use…
cforcomputer
- 67
- 1
- 10
2
votes
0 answers
Make graph on react chart js scrollable with no issues
I am using React 15.7 & react-chartjs-2 and i want to display a line graph the has many data points whose numbers varies depending on the time of day. If i simply input these data points on the chart it becomes practically unreadable because the…
geoath
- 51
- 1
- 3
2
votes
0 answers
How to make a dropdown in a horizontal bar
Image
This is my current result bar
But I need the content to be collapsed when clicked, the content is similar to the picture below
Give a link to some library or some solution
in advance thankful
Source
John
- 129
- 6