Develop Reference

Add Data to Radar Chart Through User Input with React

I want the user to add data to a Radar Chart in React through User Input. I tried different methods but it just does not work or the chart does not get displayed. Here is the code
import './App.css';
import React from 'react'
import {
Chart as ChartJS,
RadialLinearScale,
PointElement,
LineElement,
Filler,
Tooltip,
Legend
} from "chart.js";
import { Radar } from "react-chartjs-2";
function App() {
ChartJS.register(
RadialLinearScale,
PointElement,
LineElement,
Filler,
Tooltip,
Legend
);
const data = {
labels: ["Business 1", "Business 2", "Business 3"],
datasets: [
{
label: "Number of Businesses",
data: [1300, 400, 160],
backgroundColor: "rgba(255, 99, 132, 0.2)",
borderColor: "rgba(255, 99, 132, 1)",
borderWidth: 1
}
]
};
return (
<div className='App'>
<Radar data={data} />
<form>
<input type='text' placeholder='Label' />
<input type='text' placeholder='Dataset' />
<button>Add Data</button>
</form>
</div>
);
}
export default App;
I would really appreciate any help or solution.

How to select a dataset in ChartJS without removing the others?

I've looked everywhere online and I can't find a way to select a dataset where it won't remove or hide the dataset(because I want you to be able to select the others).
This is ChartJS in React so I'm using the react-chartjs wrapper.
Here is how the example looks:
And I want to be able to click on dataset 1 and then dataset 2 and dataset 3 get greyed out(not deleted), basically showing that dataset 1 was selected.
I've put a sandbox together: https://codesandbox.io/s/chartjs-select-dataset-r1kixh
I'm unable to update the color and I'm assuming with the way I have it that if I was able to update the color I probably wouldn't be able to get back the original color unless I find a way to re-render it? Not sure how I could also deselect all?
TL;DR:
How to select one dataset without removing the other?
How to be able to select a different dataset(hence using its original color)
How to "reset" the colors by deselecting(clicking in the space where there isn't a graph maybe)
The first two questions are this stack overflow question.
Here is the code:
import React, { MouseEvent, useRef } from "react";
import {
Chart as ChartJS,
LinearScale,
CategoryScale,
BarElement,
PointElement,
LineElement,
Legend,
Tooltip
} from "chart.js";
import { Chart, getDatasetAtEvent } from "react-chartjs-2";
import faker from "faker";
ChartJS.register(
LinearScale,
CategoryScale,
BarElement,
PointElement,
LineElement,
Legend,
Tooltip
);
export const options = {
scales: {
y: {
beginAtZero: true
}
}
};
const labels = ["January", "February", "March", "April", "May", "June", "July"];
export const data = {
labels,
datasets: [
{
type: "line" as const,
label: "Dataset 1",
backgroundColor: "rgba(75, 192, 192, 1)",
borderColor: "rgba(255, 99, 132,1)",
borderWidth: 2,
fill: false,
data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 }))
},
{
type: "bar" as const,
label: "Dataset 2",
backgroundColor: "rgba(75, 192, 192, 1)",
data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })),
borderColor: "white",
borderWidth: 2
},
{
type: "bar" as const,
label: "Dataset 3",
backgroundColor: "rgba(53, 162, 235, 1)",
data: labels.map(() => faker.datatype.number({ min: -1000, max: 1000 }))
}
]
};
export function App() {
const chartRef = useRef<ChartJS>(null);
const onClick = (event: MouseEvent<HTMLCanvasElement>) => {
const { current: chart } = chartRef;
const element = getDatasetAtEvent(chart, event);
const datasetIndex = element[0].datasetIndex;
const selectedDataset = data.datasets[datasetIndex].label;
if (!chart) {
return;
}
console.log("SELECTED: ", selectedDataset);
for (let i = 0; i < data.datasets.length; i++) {
if (data.datasets[i].label !== selectedDataset) {
console.log("NOT SELECTED: ", data.datasets[i].label);
data.datasets[i].backgroundColor = "rgba(255,255,255,0.2)";
}
}
chartRef.current.update();
};
return (
<Chart
ref={chartRef}
type="bar"
onClick={onClick}
options={options}
data={data}
/>
);
}
Thanks for any help!

Creating a ref to Line chart using react-chartjs-2

I'm trying to create a ref to the chart I'm building with chart.js and react-chartjs-2.
Here's the line where I'm trying to create the ref specifying the type: const chartRef = useRef<Line>(null);
And this is the error I get:
'Line' refers to a value, but is being used as a type here. Did you mean 'typeof Line'?
I found the following documentation but since I'm new to TypeScript I don't know how to interpret it yet. Here's the complete code I'm using:
import { Line } from "react-chartjs-2";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
} from "chart.js";
import { useRef } from "react";
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Legend
);
export const data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
datasets: [
{
label: "First dataset",
data: [33, 53, 85, 41, 44, 65],
fill: true,
backgroundColor: "rgba(75,192,192,0.2)",
borderColor: "rgba(75,192,192,1)"
},
{
label: "Second dataset",
data: [33, 25, 35, 51, 54, 76],
fill: false,
borderColor: "#742774"
}
]
};
export default function App() {
const chartRef = useRef<Line>(null);
return (
<div className="App">
<h1>This is a chart.</h1>
<Line data={data} ref={chartRef} />
</div>
);
}
Can you point me in the right direction? Thanks!

I'm not terribly familiar with ChartJS, but when I changed your existing code from const chartRef = useRef<Line>(null); to const chartRef = useRef<'line'>(null); (per the docs), the linter gave me a better idea as to the what needed to be fixed (on the ref).
In your case:
export function App() {
const chartRef = useRef<ChartJS<"line", number[], string>>(null);
return (
<div className="App">
<h1>This is a chart.</h1>
<Line data={data} ref={chartRef} />
</div>
);
}
Working CodeSandbox

React-chartjs-2 Doughnut chart canvas cannot be resized

I am making a dashboard with react, I want to have doughnut charts that display some information. I am following this tutorial that uses chartjs and I have ran into an unexpected problem.
When I run my app, the dashboard does not display the doughnut chart,
however if I add a Line graph or bar chart, they display as expected
This is the dashboard when trying to rendering a doughnut chart, I have circled what I think is the canvas for the chart
This is the code
import React from 'react';
import {Pie, Doughnut} from 'react-chartjs-2';
const state = {
labels: ['January', 'February', 'March',
'April', 'May'],
datasets: [
{
label: 'Rainfall',
backgroundColor: [
'#B21F00',
'#C9DE00',
'#2FDE00',
'#00A6B4',
'#6800B4'
],
hoverBackgroundColor: [
'#501800',
'#4B5000',
'#175000',
'#003350',
'#35014F'
],
data: [65, 59, 80, 81, 56]
}
]
}
export default class App extends React.Component {
render() {
return (
<div>
<Doughnut
data={state}
options={{
width:"400",
height:"400",
responsive: true,
maintainAspectRatio: true,
title:{
display:true,
text:'Average Rainfall per month',
fontSize:20
},
legend:{
display:true,
position:'right'
}
}}
/>
</div>
);
}
}
I have looked at the following solution found on the following
question, but it is still not working. Note that the pie chart is also not displaying correctly, only bar and line charts display correctly
Can't resize react-chartjs-2 doughnut chart
TL;DR: Chart-js in react not showing doughnut chart but other charts work.

chartjs-plugin-datasource implementation in React (react2chartjs)

as the title suggest, i am trying to import data from Excel and display it as charts using ChartJs. Got some idea based on this question : (Import data from Excel and use in Chart.js) and got it working.
But what im trying to do now is to implement this in React using react2chartjs. But failed to do so, got error 'ChartDataSource' is not defined. When i did define it like this:-
import ChartDataSource from 'chartjs-plugin-datasource';
The error resides but the chart display no information
Any idea?.
THE CODE
import React, {Component} from "react";
import {Bar} from 'react-chartjs-2';
import 'chartjs-plugin-datasource';
class Chart extends Component {
constructor(props){
super(props);
this.state = {
chartData:{
datasets: [
{
hoverBorderWidth:5,
hoverBorderColor:'black',
pointStyle: 'rect',
backgroundColor:'green'
//backgroundColor:Array.apply(null, Array(4)).map(_ => getRandomColor())
},
{
hoverBorderWidth:5,
hoverBorderColor:'black',
pointStyle: 'rect',
backgroundColor:'red'
//backgroundColor:Array.apply(null, Array(4)).map(_ => getRandomColor())
}
]
}
}
}
render() {
const option = {
title:{
display:true,
text: 'Test Chart',
fontSize:23,
},
legend:{
display:true,
position:'top',
labels:{
fontColor:'Black',
usePointStyle: true
}
},
layout:{
padding:{
left:0,
right:0,
bottom:0,
top:0
}
},
tooltips:{
enabled:true
},
scales: {
yAxes: [{
ticks: {
suggestedMin: 0,
}
}]
},
plugins: {
datasource: {
url: 'Book1.xlsx',
rowMapping: 'index'
}
}
}
return (
<div className="Chart">
<Bar
data={this.chartData}
options={option}
plugins={ChartDataSource}
/>
</div>
)
}
}
export default Chart;

I know this is old, but in case anyone else comes here for a similar issue.
<Bar
data={chartData}
plugins={[ChartDataSource]}// pass as array
options={option}
/>
and url: 'Book1.xlsx' means you have Book1.xlsx in Your project\public\Book1.xlsx