Victory: Victory Pie with Victory Legend

[tgoldenberg]

Not seeing any demo of this, and it seems difficult to pull off.

I tried having both a <VictoryPie /> with <VictoryLegend /> component inside a <span /> but that does not work well.

I also tried nesting both components inside a VictoryChart component. This is pretty awkward and the docs do not recommend it. I found it difficult to adjust the grid styles (could not get rid of the axis borders).

Any demos or suggestions? I'm happy to share what I have so far.

<VictoryChart
            width={width}
            height={height}
            theme={pieTheme}
            standalone={true}
        >
            <VictoryLegend x={width - 250} y={0}
                borderComponent={<g />}
                borderPadding={0}
                title="Legend"
                centerTitle
                orientation="vertical"
                gutter={0}
                style={{ border: { stroke: Colors.gray }, title: { fontSize: 12 } }}
                data={this._getVictoryData().map(({ x, y }) => ({ name: x, symbol: { fill: 'blue' } }))}
              />
            <VictoryPie
                borderWidth={0}
                animate={{ duration: 200 }}
                colorScale={this.props.colors}
                innerRadius={65}
                className="investments-chart"
                padAngle={2}
                width={width}
                labelComponent={<g />}
                height={300}
                data={this._getVictoryData()}
            />
        </VictoryChart>

[tgoldenberg]

I have tried adding an <VictoryAxis /> component, but unable to make the label go away! I have tried adjusting the styles and adding an axisLabelComponent, none of which work

[boygirl]

@tgoldenberg Here's an example that should help :)
https://jsfiddle.net/boygirl/1Lu96jq0/

[tgoldenberg]

@boygirl this is wonderful! thank you

[jtibrewal09]

@boygirl unable to run this fiddle. Can you please help?
https://jsfiddle.net/boygirl/1Lu96jq0/

[boygirl]

Hi there! it looks like that fiddle has older versions of react with the latest version of victory. The latest version of Victory requires react@^16.3.0. Here's the same example with updated deps in codesandbox:
https://codesandbox.io/s/fervent-forest-zudcw?file=/index.js