CODEWITHSUNDEEP
reactjspie-chartrecharts
M.I
M.I

Reputation: 409

how to make custom recharts legends with space between words

so i am trying to do a pie chart using recharts, but i want to do a custom legend like this:

legend

so what i tried to do is create an ul and setting it next to it but the problem is its not responsive so thats why i'm thinking about custom legend. what i did so far:

what i did

i have no idea how to set up a margin that will make them equal or style them like this i really need help.

code:

<Row>
          <Col lg="9">
            <ResponsiveContainer width="100%" height={220}>
              <PieChart data={testMeasurments.data}>
                <Tooltip />
                <Legend
                height={170}
                layout="vertical"
                  iconType="circle" align="right"
                //   iconType="circle" align="right" wrapperStyle={{
                //     // marginBottom: "10%",
                //     // marginRight: "30%",
                //     // marginLeft:"20%"
                //     // lineHeight: "-20px"
                //   }}
                payload={
                  testMeasurments.map(
                    item => ({
                      id: item.name,
                      color:item.fill,
                      type: "circle",
                      value: `${item.name}` +" " + `${item.value}measurments` ,
                    })
                  )
                }
                  >
                </Legend>

                {testMeasurments.map((s) =>
                  <Pie
                    dataKey="value"
                    isAnimationActive={false}
                    data={s.data}
                    outerRadius={100}
                    innerRadius={70}
                    fill="fill"
                  ><Label value={value} position="center" />
                  </Pie>
                )}

              </PieChart>
            </ResponsiveContainer>
          </Col>
          
        </Row>

Upvotes: 2

Views: 11419

Answers (2)

maha.benjebara
maha.benjebara

Reputation: 242

old question but this might help someone. You can customise the legend using the content prop, you can check the doc

const renderLegend = (props) => {
  const { payload } = props;

  return (
    <div style={{display: 'grid', gridTemplateColumns: 'max-content max-content', gap: '1em'}}>
      {
        payload.map((entry, index) => (
          <div>entry.value</div><div>measurments</div>
        ))
      }
    </div>
  );
}
<Legend content={renderLegend} />

Upvotes: 4

bex
bex

Reputation: 1

You could use CSS to target each li item in the legend. Recharts uses the class ".recharts-legend-item".

.recharts-legend-item {
    margin-bottom: 10px;
 }

Upvotes: 0

Related Questions