react donut resizable chart
npm install react-resizable-donut-chartnpm install react-resizable-donut-chart --save
---
``js
import { DonutResizableChart } from 'react-resizable-donut-chart';
export const ResizableDonut = () => {
const [pieData, setPieData] = useState({
data: [
{
value: 40,
color: '#18FFFF',
selected: true,
resizing: false,
},
{
value: 26,
color: '#0288D1',
selected: false,
resizing: false,
},
{
value: 10,
color: '#BF360C',
selected: false,
resizing: false,
},
{
value: 13,
color: '#F4511E',
selected: false,
resizing: false,
},
{
value: 11,
color: '#F9A825',
selected: false,
resizing: false,
},
],
selectedId: 0,
});
return
}
`
---
| Name | Required | Default | Description |
|----------------|----------|---------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| data | true | [] | To display the diagram, the necessary data is an array of objects, each object must contain 2 parameters "color" and "value". To specify which part of the diagram will be highlighted by default, you must specify "selected: true". Example: `[{color: 'red', value: 50, selected: true},{color:'black, value: 50, selected: false}]` |({data, selectedId, isDonutResize, resizingValue, moveDirection}) => {}
| changePieData | true | | data - returns a data object with the changed value, "selected: true" or "selected: false", as well as whether this object changes at a given moment or not resizing: true or resizing: false id
selectedId - returns the of the currently selected object in the array datatrue
isDonutResize - returns or false depending on whethervalue
resizingValue is currently underway or not - returns the current modified of the selectedup
moveDirection object - returns the or down direction if a recycle occurs, otherwise null |null
| cornerRadius | false | | Specify the radius of the chart line | false
| isNotResizable | false | | Is it possible to change the values of individual parts of the graph |12
| strokeWidth | false | | stroke-width for chart parts |#fff` | stroke-color for chart parts |
| strokeColor | false |