This is simple Chart.js Doughnut React component.
In project directory run command:
bash install.bash
then open index.html file in your browser.
You can create chart object with data and send it to the ChartDoughnut React component as data.
import React from 'react';
import ReactDOM from 'react-dom';
import ChartDoughnut from './react-chart-doughnut.js';
var chart = { msg: [], osY: [] };
for (var i=0; i<5; i++) {
//chart.msg[i] = "id: "+i;
chart.osY[i] = Math.cos(i)+Math.sin(i);
}
ReactDOM.render(
<ChartDoughnut data={chart}/>,
document.getElementById('app')
);
Note: For this type of chart you do not have to osX values. So the chart object structure looks different here. You have msg and osY arrays instead. If you not assign msg values the labels will be empty.
If you send updated chart object again to the ChartDoughnut React component as data it will update itself.
function setRandomChart() {
var chart = { msg: [], osY: [] };
for (var i=0; i<8; i++) {
chart.msg[i] = "id: "+i;
chart.osY[i] = Math.cos(i)*Math.random();
}
ReactDOM.render(
<ChartDoughnut data={chart}/>,
document.getElementById('app')
);
}
setInterval(() => { setRandomChart() }, 5000);
Note: For this type of chart you do not have to osX values. So the chart object structure looks different here. You have msg and osY arrays instead. If you not assign msg values the labels will be empty.
MIT