Positioning charts

[recharts]

Positioning charts

[xile611]

@kennetpostigo
I think you should set the cx, cy, innerRadius, outerRadius of RadarChart and RadialBarChart to be a percent value.

<ResponsiveContainer  width='100%' height='100%'>
        <AreaChart className="area" data={data}
              margin={{top: 10, right: 30, left: 0, bottom: 0}}>
            <XAxis dataKey="name"/>
            <YAxis/>
            <CartesianGrid strokeDasharray="3 3"/>
            <Tooltip/>
            <Area type='monotone' dataKey='uv' stackId="1" stroke='#8884d8' fill='#8884d8' />
            <Area type='monotone' dataKey='pv' stackId="1" stroke='#82ca9d' fill='#82ca9d' />
            <Area type='monotone' dataKey='amt' stackId="1" stroke='#ffc658' fill='#ffc658' />
        </AreaChart>
      </ResponsiveContainer>

      <ResponsiveContainer width='100%' height='100%'>
        <RadialBarChart className="radial" cx="50%" cy="70%" innerRadius="20%" outerRadius="80%" data={data2}>
          <RadialBar minAngle={15} label background clockWise={true} dataKey='uv'/>
          <Legend iconSize={10} width={90} height={140} layout='vertical' verticalAlign='middle' wrapperStyle={style}/>
        </RadialBarChart>
      </ResponsiveContainer>

      <ResponsiveContainer width='100%' height='100%'>
        <RadarChart className="radar" cx="50%" cy="50%" outerRadius="80%" data={data3}>
            <Radar name="Mike" dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6}/>
            <Radar name="Lily" dataKey="B" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.6}/>
            <PolarGrid />
            <Legend />
            <PolarAngleAxis dataKey="subject" />
            <PolarRadiusAxis angle={30} domain={[0, 150]}/>
          </RadarChart>
      </ResponsiveContainer>
    </div>

You can see the demo.

[Cloudo]

@kennetpostigo can you show some code?

[kennetpostigo]

I have the following:

    <div className="DashCharts">
      <ResponsiveContainer  width='100%' height='100%'>
        <AreaChart className="area" data={data}
              margin={{top: 10, right: 30, left: 0, bottom: 0}}>
            <XAxis dataKey="name"/>
            <YAxis/>
            <CartesianGrid strokeDasharray="3 3"/>
            <Tooltip/>
            <Area type='monotone' dataKey='uv' stackId="1" stroke='#8884d8' fill='#8884d8' />
            <Area type='monotone' dataKey='pv' stackId="1" stroke='#82ca9d' fill='#82ca9d' />
            <Area type='monotone' dataKey='amt' stackId="1" stroke='#ffc658' fill='#ffc658' />
        </AreaChart>
      </ResponsiveContainer>

      <ResponsiveContainer width='100%' height='100%'>
        <RadialBarChart className="radial" cx={150} cy={150} innerRadius={20} outerRadius={140} barSize={10} data={data2}>
          <RadialBar minAngle={15} label background clockWise={true} dataKey='uv'/>
          <Legend iconSize={10} width={90} height={140} layout='vertical' verticalAlign='middle' wrapperStyle={style}/>
        </RadialBarChart>
      </ResponsiveContainer>

      <ResponsiveContainer width='100%' height='100%'>
        <RadarChart className="radar" cx={300} cy={250} outerRadius={90} data={data3}>
            <Radar name="Mike" dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6}/>
            <Radar name="Lily" dataKey="B" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.6}/>
            <PolarGrid />
            <Legend />
            <PolarAngleAxis dataKey="subject" />
            <PolarRadiusAxis angle={30} domain={[0, 150]}/>
          </RadarChart>
      </ResponsiveContainer>
    </div>

[kennetpostigo]

Okay thank you!