리차트를 사용하여 응답형 차트의 높이와 폭을 설정합니다(Barchart).

리차트를 사용하여 응답형 차트의 높이와 폭을 설정합니다(Barchart).

BarChart(바 차트)그...width={600} ★★★★★★★★★★★★★★★★★」height={300}바르차르트어떻게 하면 바르차트가 반응할 수 있을까요?를 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★width={'50%"} height={"40%"}하지만 효과가 없었다.

import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';


<BarChart className="barChart" width={600} height={300} data={data}
          margin={{top: 5, right: 30, left: 20, bottom: 5}} label="heaf">
      <CartesianGrid strokeDasharray="3 3"/>
      <XAxis dataKey="name"/>
      <YAxis/>
      <Tooltip/>
      <Legend />
      <Bar dataKey="occupied" barSize={10} fill="#05386b" />
      <Bar dataKey="available" barSize={10} fill="#fdaa00" />
      <Bar dataKey="cleaning" barSize={10} fill="#379583" />
      <Bar dataKey="reserved" barSize={10} fill="#c60505" />
</BarChart>

'어울리다'를 써야 요.ResponsiveContainer효과가 있습니다.또한 대괄호 없이 백분율 값을 사용합니다.

<ResponsiveContainer width="95%" height={400}>
   // your chart
</ResponsiveContainer>

잘 :) 잘요. :)

출처:응답성 컨테이너 문서

하시면 됩니다.ResponsiveContainer★★★★★★★★★★★★★★★★★★ recharts

문서ResponsiveContainer라고 말합니다

차트를 상위 컨테이너의 크기에 맞게 조정하기 위한 컨테이너 구성 요소입니다.소품 폭과 높이 중 하나는 백분율 문자열이어야 합니다.

다음은 작업 코드 https://codesandbox.io/s/react-recharts-responsive-stack-overflow-863bi 입니다.출력 창 너비의 크기를 조정해 보십시오.

import React from "react";
import ReactDOM from "react-dom";
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer
} from "recharts";

import "./styles.css";

const data = [
  { name: "Page A", uv: 4000, pv: 2400, amt: 2400 },
  { name: "Page B", uv: 3000, pv: 1398, amt: 2210 },
  { name: "Page C", uv: 2000, pv: 9800, amt: 2290 },
  { name: "Page D", uv: 2780, pv: 3908, amt: 2000 },
  { name: "Page E", uv: 1890, pv: 4800, amt: 2181 },
  { name: "Page F", uv: 2390, pv: 3800, amt: 2500 },
  { name: "Page G", uv: 3490, pv: 4300, amt: 2100 }
];

const SimpleAreaChart = () => {
  return (
    <ResponsiveContainer>
      <BarChart data={data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Bar dataKey="pv" fill="#8884d8" />
        <Bar dataKey="uv" fill="#82ca9d" />
      </BarChart>
    </ResponsiveContainer>
  );
};

const rootElement = document.getElementById("container");
ReactDOM.render(<SimpleAreaChart />, rootElement);

here여의의ssssssssss이다의 .container

#container {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  height: 400px;
  background-color: #fff;
}

경우는, 「크기 조정」을 사용해 .aspect

<ResponsiveContainer aspect={1.2}>
   // chart with width = 1.2 height
</ResponsiveContainer>

<ResponsiveContainer aspect={0.8}>
   // chart with width = 0.8 height
</ResponsiveContainer>

이 경우 높이/폭은 상위 컨테이너의 100%가 됩니다.

막대 차트를 Div로 감습니다.

<div style={{ position: 'relative', width: '50%', paddingTop: '40%' }}>
  <div style={{ position: 'absolute', height: '100%' }}>
    <BarChart />
  </div>
</div>

outer div의 경우: 폭 50%는 용기 폭에 대한 것입니다. paddingTop은 용기 폭의 40%입니다.

inner div의 경우: 높이가 100%이면 paddingTop인 컨테이너 전체를 차지합니다.

이것은 나에게 효과가 있었다.

<ResponsiveContainer width="95%" height={data.length*x}>

data.length -> y축 컴포넌트 수

x - > 셀 크기를 늘렸다(내 경우는 33개가 정상적으로 동작했다)

언급URL : https://stackoverflow.com/questions/52134350/set-height-and-width-for-responsive-chart-using-recharts-barchart