How to add data to charts.js in react - reactjs

Question

Need your help. Component is already created for Bar chart as it is said in the documentations. Now want to add data to the Bar chart but it is not adding. The code is following
const data = {
type:"bar",
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: 'Statistics',
data: [4, 10, 7, 1, 8, 9],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
],
borderWidth: 4,
responsive: true,
},
],
};
const options = {
scales: {
YAxes: [
{
ticks: {
beginAtZero: 8,
},
},
],
},
};
const Dashboard = (props) => {
const addDatasets= ()=>{
const myChart= new Chart()
const newData= {
label:"Statistics of activity",
data:[8,10,9, 17,25, 31],
backgroundColor: [
"red",
],
borderColor: [
'blue',
],
borderWidth: 4,
}
data.datasets.push(newData)
myChart.update()
}
return (
<>
<div className='header'>
<h1 className='title'>Vertical Bar Chart</h1>
<div className='links'>
<a
className='btn btn-gh'
href='https://github.com/reactchartjs/react-chartjs-2/blob/master/example/src/charts/VerticalBar.js'
>
Github Source
</a>
</div>
</div>
<Bar data={data} options={options} />
<button onClick={addDatasets}>Add Datasets</button>
</>
);
};
Think that the problem is comming from this part
const myChart= new Chart()
in the internet can not find sources to solve the problem. What is the problem?

Answer 1

I used class component in the chartjs shared my usage in the below,
const options = {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
};
#observer
export class Home extends React.Component<{}, IHomeState> {
constructor(props: any) {
super(props);
this.state = {
isReady: false,
isLoading: false,
data: {
labels: ["", ""],
datasets: [],
},
};
this.handleSelect = this.handleSelect.bind(this)
this.getKeywords = this.getKeywords.bind(this);
}
async getKeywords() {
this.setState({
isReady: false,
data: {
datasets:[],
labels:[]
},
isLoading: true,
})
let labels: string[] = []
const data = {
labels: ['', ''],
datasets: [],
} as any;
try {
let graphData1: DocumentResponseModel[] = await BaseMapper.mapToGraphData();
//How many types of the result / positives,negatives and mixed
graphData1.forEach((item: DocumentResponseModel) => {
if (!labels.includes(item.sentiment)) {
labels.push(item.sentiment)
}
})
this.setState({
isReady: true,
isLoading: false,
data: {
labels: "first","second"],
datasets: data.datasets
},
})
} catch (e) {
alert(e)
}
}
async componentDidMount() {
}
render() {
let {isReady, isLoading} = this.state;
const renderLoading = () => {
if (!isReady && isLoading) {
return (
<CircleToBlockLoading/>
)
} else {
return
}
}
return (
<div className={styles.container}>
<Button variant="contained" onClick={this.getKeywords} color="primary">Get</Button>
<Bar data={this.state.data} options={options} type={"bar"}/>
</div>
);
}
}