Как прописать графику из recharts все размеры в vw вместо px?

Question

[Дмитрий]

<ResponsiveContainer width="100%" height="100%">
                    <PieChart>
                        <defs>
                            <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
                                <stop offset="0" stopColor="#40BA93"/>
                                <stop offset="1" stopColor="rgba(64, 186, 147, 0.25)"/>
                            </linearGradient>
                        </defs >
                        <defs>
                            <linearGradient id="colorUvSecond" x1="0" y1="0" x2="0" y2="1">
                                <stop offset="0" stopColor="#358269"/>
                                <stop offset="1" stopColor="rgba(53, 130, 105, 0.25)"/>
                            </linearGradient>
                        </defs>
                        <Pie
                            
                            startAngle={90}
                            endAngle={450}
                            data={data}
                            labelLine={false}
                            label={renderCustomizedLabel}
                            outerRadius={100}
                            stroke="none"
                            dataKey="value"
                        >
                            {data.map((entry, index) => (
                                <Cell key={`cell-${index}`}
                                      fill={index === 0 ? "url(#colorUv)" : "url(#colorUvSecond)"}/>
                            ))}
                        </Pie>
                    </PieChart>
                </ResponsiveContainer>

Ести плагин recharts с помощю которого и сделан этот график, нужно прописать ему все размеры в vw для придание эластичности. Атрибуты width и height не всегда приминяются к компонентам.

Comments

[Алексей Дубровин]

Мне кажется тут подвох
<ResponsiveContainer width="100%" height="100%">