interactive react charting components using the chart.js framework
interactive react charting components using the chart.js framework
Questions tagged [react-chartjs]
585 questions
0
votes
1 answer
How to create a Pie chart in react?
I have tried to create pie chart like this:
import React from 'react';
import {Pie} from 'react-chartjs-2';
const state = {
labels: ['January', 'February', 'March','April',
'May', 'June', 'July', 'August',
'September',…
Aniket_1997
- 11
- 2
0
votes
3 answers
How to send an array of object as a prop?
I have a state which is an object containing an array and that array contains an object which looks something like this
[{"tone":"negative","value":0},{"tone":"neutral","value":91},{"tone":"positive","value":9}].
So I want to plot a bar chart…
henrydoe
- 398
- 2
- 7
- 22
0
votes
1 answer
Which is the right way to clone component in Reactjs?
I am a newbie to React. I am using react-chartjs-2 to create line chart. There are 6 different type of data with the same structure. I created a single Line chart component and cloned 5 others. Then I passed data like this:
let liveChart1 =…
khang nguyen
- 31
- 2
0
votes
1 answer
Line 3:13: 'zoom' is defined but never used no-unused-vars' while using Chartjs-2 in React.js
I am making a line graph in React.js using react-chartjs-2. I am using a zoom and pan option. I imported zoom from react-chartjs-2 and used it later in my code. Note: If I remove this import line, the zoom function in the graph stop working:
import…
Sim
- 65
- 1
- 7
0
votes
1 answer
How to filter react-chartjs-2
I am using react-chartjs-2 in my project, and I am creating a grouped stacked bar chart with it, to remove duplicate labels I have created a custom generateLabels function, but the problem with custom generateLabels function is that when I click on…
user10070377
0
votes
0 answers
How to make a chart display only a certain number of labels out of total labels in chartjs?
So I have a chart that has over 400 values on the x-axis, taken throughout the day at a certain equal interval. I want to show only 24 labels at the bottom, representing the 24 hrs of the day and the rest be shown the points on the chart itself but…
bhav_yea
- 63
- 6
0
votes
1 answer
get data from API to React Chart Canvasjs
I need to get data from my API in Front and put in in ReactChart module.
This is my API in Front :
componentDidMount(){
const head = localStorage.getItem('head');
const payload = localStorage.getItem('payload');
const…
mitsu
- 429
- 2
- 10
- 23
0
votes
1 answer
How can I use npm-plugins with react-chartjs-2?
I use react-chartjs-2 with chartjs in my app and I want to use chartjs-plugin-datalabels to display titles. How can I register this plugin in react-chartjs-2?
I have further studied the problem. And I found out that there is a problem with the…
buben
- 1
- 3
0
votes
0 answers
ChartJS in React does not change even if props changes - Hooks
I am building a website where the user can select a date(s) and a product(s) and see the relative inventory. The representation of the inventory is made via a table and a chart (using react-chartjs-2). I am using React Hooks
The props are sent…
Magofoco
- 5,098
- 6
- 35
- 77
0
votes
1 answer
Why is only a single chart of three updated with react-chartjs-2?
It turns out that I have a modal, which contains a text field that records numerical values. Then the value that is recorded is passed through a loop to fill an arrangement with the amount that was recorded in the text field. After this the values…
0
votes
1 answer
React chart.js dynamic data update not rendering
I'm building a dynamic chart using chart.js.
Within componentDidMount, I'm calling getNewData() every second with setInterval.
This updates the data within my dataset, for some reason the chart won't update / re-render when state is updated.
How…
Filth
- 3,116
- 14
- 51
- 79
0
votes
1 answer
show values just above the respective bar
I am using react-chartjs-2 for bar graph I am working on. I have plotted the data and for displaying the values above the respective bar, i used chartjs-plugin-datalabels but it is not displaying the value just above the bar.
I have done the…
Serenity
- 3,884
- 6
- 44
- 87
0
votes
0 answers
Chart.js horizontal lines cutting vertical ones
I'm using react-chartjs-2 to draw a bar chart where my vertical gridlines are of different colour than the horizontal ones. I want the vertical lines to go over horizontal ones but it's the other way around. I wasn't able to find an option that…
Chen Guevara
- 324
- 1
- 4
- 14
0
votes
1 answer
Chartjs line chart gets all scrambled up when an x value coincides with a label
I'm using react-chartjs-2 to draw a line chart but when I use the following code
const data = {
labels: [0, 11, 21, 31, 41, 50],
datasets: [
{
label: 'Radiant',
data: [1, 5, 10, 15, 20, 25, 30, 35, 40, 45,…
Chen Guevara
- 324
- 1
- 4
- 14
0
votes
1 answer
My chartJS axios.get is fired twice causing chart to render twice too and i don't know why. I'm using react-chartjs-2
I'm encountering a problem where my api call is being fired twice instead of once and because of that it's rendering 2 charts as well. Why?
export default class Graph extends Component {
constructor(props) {
super(props);
this.state:…
Shaho Soltani
- 1
- 1