toomuchdesign/react-minimal-pie-chart

Svg is filling all the space and truncate when becomes larger

c0ncentus opened this issue · 1 comments

c0ncentus commented

Do you want to request a feature or report a bug?

Bug/Feature also
...

What is the current behaviour?

when I click and i select (with shift element when it is selected) then
image

...

What is the expected behaviour?

to be able to make some "margin" on the svg element. because it truncate the UI when become larger or out on it's own boxView.

Steps to Reproduce the Problem

                               <PieChart

                                    onMouseOver={(_, i) => { }}
                                    onMouseOut={(_, i) => { }}
                                    segmentsShift={(index) => (index === this.state.iSelected ? 5 : 0)}
                                    rounded lineWidth={20} paddingAngle={10} labelPosition={90} style={{ position: "relative" }}
                                    data={compact(DATA.map((el, i) => { return i === this.state.iSelected ? { ...el, color: "#FFD700" } : el.value !== 0 ? el : undefined }))}
                                    label={({ dataEntry }) => { return dataEntry.value }}
                                    labelStyle={(index) => ({ fill: "black", fontSize: '5px', fontFamily: 'sans-serif', })}
                                    onClick={(_, index) => { this.setState({ iSelected: this.state.iSelected === index ? undefined : index }) }}
                                />

Specifications

  • Version:8.2.0
  • Node 16.3
toomuchdesign commented

Hi @c0ncentus,
you should get the desired behavior by adjusting radius and/or viewBoxSize props.

  • 👍1