Hi,

thanks for the early fix.

1. One more thing: the legend doesn't get the 'bold' font-weight when pie-chart is hovered.
   Update :

<div className="portlet light col-md-4 dashboard-pie">
                <div className="pie-legend">
                {data.map(({label, value, color}, i) => (
                        <div key={i}>
                            <span style={{"background": color}}></span>
                            <span style={{"fontWeight": this.state.expandedSector === i ? "bold" : null, "color": color}}>
                                {label} : {value}
                            </span>
                        </div>
                    ))}
                </div>
                <div className="pie-chart">
                    <PieChart
                        data= {data}
                        expandedSector={expandedSector}
                        onSectorHover={this.handleMouseEnterOnSector}
                        sectorStrokeWidth={2}
                        expandOnHover
                        shrinkOnTouchEnd
                    />
                </div>
            </div>

removing <span style={{"background": color}}></span> from the above fixes the issue 1

2. Also still getting this error in console:

Error: <path> attribute d: Expected number, "… A150,150 0 1,1 NaN,NaN z".
setValueForProperty @ DOMPropertyOperations.js:141
Error: <path> attribute d: Expected number, "M150,150 LNaN,NaN A150,150…".
setValueForProperty @ DOMPropertyOperations.js:141

many thanks

Iam getting this error ..

Error: attribute d: Expected number, "… A150,150 0 1,1 NaN,NaN z".

Could you add a way to change colors of the rendered sectors? This will pass a better informed message.

Console gives me Encountered two children with the same key ''. That's because of g tag under svg. There's no way to pass a value to key in this tag.

Hello guys. Any idea how I would add animation to this pie chart?

•Facebook : 100
•Twitter : 60
•Google Plus : 1
•Pinterest : 2
•Linked In : 1

Run chart with that parameters. You'll see chart isn't responsive... Component can't draw adequately with other parameters.
Chunk with the biggest value drown with small width.

I'm trying to use this pie chart but in my case I'm having only two objects in data, one with value 1 and one with 0, when just one value is 1 the pie chart should show 100% but it just disappears. Do you guys have a solution for this or maybe suggest other piecharts which have this option? it would be greatly appreciated.

Many thanks.

1、my code set style height={300}, but it has no effect , how do i set to change the whole pie size ,
while viewBoxSize don't change 's height .
`<PieChart
data={Piedata}
// If you need expand on hover (or touch) effect
expandOnHover
expandSize={1}
// If you need custom behavior when sector is hovered (or touched)
viewBoxSize={15}
strokeWidth={1}
onSectorHover={(d, i, e) => {
if (d) {
console.log("Mouse enter - Index:", i, "Data:", d, "Event:", e)
} else {
console.log("Mouse leave - Index:", i, "Event:", e)
}
}}
style={{height: 300}}

/>
`

We got following issue when we were trying to build our app on Altus.
npm WARN [email protected] requires a peer of react@~15.3.0 but none was installed.

Is it possible we make the peer dependency for this plug more flexible? like
"peerDependencies": {
"react": "^15.3.0"
},

We are passing in 2 values in data: a 0 and a 1. We get the full circle drawn as expected but it is drawn in the color for the 1st value which is 0 and not for the second value which is 1. What we see and the Props from the React debug tool:

Props
data: Array[2]
0:{…}
color: "#2ecc71" <--- green color
value: 0
1:{…}
color: "#3498db" <--- blue color
value: 1

expandOnHover: false
expandSize: 5
onSectorHover: null
sectorStrokeWidth: 1
shrinkOnTouchEnd: false
strokeColor: "#fff"
strokeLinejoin: "round"
strokeWidth: 1
viewBoxSize: 100

I think import { PieChart } from 'components/piechart' is obviously wrong.

how to change radius of the pie without changing the distance between arcs of the pie

Hi,
I realised that the onSectorHover doesn't work for iOS touch gestures. But there is more than one way to implement it and I'm not sure how optional you would want to add this feature.

1. Just adding onTouchStart

        return (
          <path
            key={'sector' + i}
            d={dPath}
            fill={d.color || palette[i % palette.length]}
            stroke='#fff'
            strokeWidth={sectorStrokeWidth}
            onTouchStart={() => this.handleSectorHover(i)}
            // onTouchEnd for only expanding while touching?
            onMouseEnter={() => this.handleSectorHover(i)}
            onMouseLeave={() => this.handleSectorHover(null)}
          />
        )

2. Make it optional:

<PieChart
  data={ data }
  expandedSector={expandedSector}
  onSectorHover={this.handleMouseEnterOnSector}
  sectorStrokeWidth={2}
  expandOnHover
  expandOnTouch // optional
/>

You library is cool because it's very lightweight so I did not want to add big conditions (2. solution) in the code if you like the first approach more.

Cheers

Currently, the title is visible only when the section is hovered, could there be added a prop that would let the title be displayed in the data section all the time.

Hi,
I keep getting
npm WARN [email protected] requires a peer of react@^0.14.0 but none was installed.

even though the latest repo shows this updated. Triggering a new NPM install doesn't do anything

I am using version 2.1.0.

This is my code:

<ReactSvgPieChart data={[{"title":"a","value":0.3,"color":"#123456"},{"title":"b","value":0.4,"color":"#654321"}]} />

And this is the result:

It seems that this happens when there is more than one section and at least one of the values is less than 1.