Questions tagged [react-chartjs-2]
452 questions
0
votes
1 answer
How to set values of y axis in react-chartjs-2?
I can't find any documentation on how to change the y axis values from the default ones. The data im plugging into the chart can have any value from 0-150. However, the y-axis starts at 84 and ends at 98. Here's the link to it's npm page. …
cris
- 265
- 3
- 11
0
votes
1 answer
why am I getting a runtime error by importing react-chartjs-2
I'm new to React. I'm trying to use charjs as a react component.
as soon as I add the following import statement, I get a runtime error:
import { Bar } from 'react-chartjs-2';
runtime error:
The component compiles and causes the above…
afshin
- 1,783
- 7
- 22
- 39
0
votes
1 answer
react-chartjs-2 Multiple charts with different datasets
Situation: I am get multiple datasets from my server, each dataset is loaded into a state and then broken into labels, data with the keys and values respectively. I have a chart for each dataset.
I can confirm that the data is being retrieved.…
TrannyCyborg
- 47
- 2
- 8
0
votes
1 answer
chartjs doesn't render dates properly
I made a custom chartjs component in reactjs and want to render dates in xAxes and numbers from -1 to 1 in yAxes but it renders data not in a proper way.
import React, { useRef, useEffect } from "react";
import Chart from "chart.js";
const…
Emad Baqeri
- 2,333
- 2
- 14
- 29
0
votes
1 answer
how can I render multiple charts in chartjs?
These are the data that I have to render using chartjs in react. I made a custom component for rednering the charts, It's working properly for single line charts can't just render multiline charats here.
This is my Chartjs Custom component
import…
Emad Baqeri
- 2,333
- 2
- 14
- 29
0
votes
1 answer
Chart JS - Is there a way to connect two datasets in a line chart?
I am trying to connect two data in a dataset of Chart but I can't figure out how to do so, currently my chart looks like this:
I wanted to connect it like this:
Here's my code:
so_mc
- 149
- 1
- 7
0
votes
1 answer
What are these line-boxes called in Chart.js, and how do I turn them off?
I'm displaying a Chart.js doughnut chart via react-chartjs-2 in React, and by default, there are these line-box things showing for each doughnut section. Here's an example:
What are these line-box things called, and how do I turn them off?
Also,…
HartleySan
- 7,404
- 14
- 66
- 119
0
votes
1 answer
how to add color to each data in chartjs scatter plot
let dataSet = [];
Object.keys(stateData).map((item) => {
let short = {};
let medium = {};
let long = {};
if (stateData[item].horizon === "Short-term") {
short["label"] = "Short-term";
…
Sai Charan
- 3
- 2
0
votes
1 answer
the "undefined " will appear in my Bar chart in react-chartjs
I use the react-chartjs-2 to create a bar chart. I have the data as follow:
const chartData = {
labels: ['Dealer1', 'Dealer2', 'Dealer3', 'Dealer4', 'Dealer5', 'Dealer6'],
datasets: [
{
…
Sahar
- 39
- 4
0
votes
1 answer
How to change graph grid and axis colors in react-chartjs-2
I'm new to react and also just found react-chartjs-2 graphing npm package. So I implemented this to my react project. Now I need to change the grid lines and axis colours to white. So I tried this line of two code also in two times.But it didn't…
Tharindu Gimras
- 33
- 3
- 14
0
votes
1 answer
Aligning zero on y axis to the labels on x axis of line chart in chartjs
I am building a line chart in chartjs, similar to this
Here is what I have achieved:
How can I make the zero on y-axis on the same level as the labels on the x axis.
I have tried almost everything from the chartjs documentation, but nothing seems to…
pc.97
- 153
- 1
- 4
- 12
0
votes
2 answers
How can I remove the grid line in the background of the line chart?
I am working on a React JS project. In my project, I need to create line chart components. I am trying to use Chart JS 2 library for React JS. But, now I am having a little problem customising the line chart. I want to remove the grids and the lines…
Wai Yan Hein
- 13,651
- 35
- 180
- 372
0
votes
2 answers
How to hide labels by two ticks? chartjs
How can we customize labels and hide it 2 ticks/line (see the expected output below)? I already tried the code below but it did nothing. Is there any chance we can hide it specifically?
legend: {
labels: {
filter: function(label) {
…
schutte
- 1,949
- 7
- 25
- 45
0
votes
1 answer
Creating mixed Bar Chart with ReactJS using recharts or react-chartjs-2
image screen shot I am trying to implement multiple Bar chart for the below requirement of chart in ReactJS using recharts or react-chartjs-2 library.
I was unable to find any direct solution available. Any suggestions how to create a similar type…
Teja
- 25
- 9
0
votes
0 answers
Draw rounded edges in doughnut chart in React
How to draw doughnut chart in ReactJs using the library reactchartjs-2 and chart.js. The expected chart is something like below.
Ashish Prajapathi
- 23
- 1
- 4