How to tune the margin in victory?

user_676319 0
Viewed 1058

Below is a general victory code.

 <svg viewBox={viewBox}>
          <VictoryPie
            standalone={false}
            width={width} height={height}
            data={data}
            innerRadius={innerRadius}
            colorScale={colorScale}

          />
          <VictoryLegend x={width - 50} y={30}
            title="Totals"
            centerTitle
            orientation="vertical"
            gutter={20}
            style={{
              title: { fontSize: 15 }
            }}
            data={legendDataWithStyle}
            standalone={false}
          />
</svg>

This is the corresponding Jsfiddle

I was using VictoryLegend x={width - 50} y={30} to regulate the distance of piechart and legend. But I found it's hard to precisely tune it. How can I increase the distance of the pie and legend?

victory-charts d3.js reactjs svg css
1 Answers

I can suggest you use g element with the appropriate value for transform attribute

The g SVG element is a container used to group other SVG elements. Transformations applied to the element are performed on all of its child elements, and any of its attributes are inherited by its child elements.

And width and height attributes for svg element instead of viewBox. I forked your fiddle, check please - https://jsfiddle.net/levsha/5tx2s8jj/ here the diff between your and my code.

<svg width={width + 100} height={height}> // we add 100 here to legend fits in svg

...

<g transform="translate(40,0)"> // we move legend on 40px here
  <VictoryLegend x={width} y={30}
    title="Totals"
    centerTitle
    orientation="vertical"
    gutter={20}
    style={{
     title: { fontSize: 15 }
    }}
    data={legendDataWithStyle}
    standalone={false}
  />
</g>
user_58066460
Related