DonutChart

Result

Loading...

Live Editor

const data = [ { id: '1', name: 'Data 1 Name', y: 1210000, valueName: 'Value 1', description: 'Description one, 1.21 million dollars', }, { id: '2', name: 'Data 2 Name', y: 320000, valueName: 'Value 2', description: 'Description two, 320 thousand dollars', }, ]; render( <DonutChart id="donut-chart-demo" onPointMouseOver={(pointData) => console.log('onPointMouseOver - pointData::', pointData)} onPointMouseOut={(pointData) => console.log('onPointMouseOut - pointData::', pointData)} data={data} title="Title" valueName="Value name" />, );

const data = [
    {
        id: '1',
        name: 'Data 1 Name',
        y: 1210000,
        valueName: 'Value 1',
        description: 'Description one, 1.21 million dollars',
    },
    {
        id: '2',
        name: 'Data 2 Name',
        y: 320000,
        valueName: 'Value 2',
        description: 'Description two, 320 thousand dollars',
    },
];

render(
    <DonutChart
        id="donut-chart-demo"
        onPointMouseOver={(pointData) => console.log('onPointMouseOver - pointData::', pointData)}
        onPointMouseOut={(pointData) => console.log('onPointMouseOut - pointData::', pointData)}
        data={data}
        title="Title"
        valueName="Value name"
    />,
);

Props