Как настроить перезарядку на устройствах?

Question

Проблема:

Я создал компонент реакции, чтобы показать гистограмму. Вот как это выглядит.

import React, { Component, PureComponent } from "react";

import { Card, CardBody, CardTitle } from "reactstrap";
import {
  Bar,
  BarChart,
  Tooltip,
  XAxis,
  YAxis,
  ResponsiveContainer,
  Cell,
  LabelList
} from "recharts";

import "./SubcribersByRegion.css";

const colors = [
  "#138185",
  "#26a0a7",
  "#65d3da",
  "#79d69f",
  "#cbe989",
  "#ebf898",
  "#f9ec86",
  "#fad144",
  "#ec983d",
  "#d76c6c"
];

const data = [
  {
    name: "Page A",
    pv: 2400,
    amt: 2400
  },
  {
    name: "Page B",
    pv: 1398,
    amt: 2210
  },
  {
    name: "Page C",
    pv: 9800,
    amt: 2290
  },
  {
    name: "Page D",
    pv: 3908,
    amt: 2000
  },
  {
    name: "Page E",
    pv: 4800,
    amt: 2181
  },
  {
    name: "Page F",
    pv: 3800,
    amt: 2500
  },
  {
    name: "Page G",
    pv: 4300,
    amt: 2100
  },
  {
    name: "Page H",
    pv: 4300,
    amt: 2100
  },
  {
    name: "Page I",
    pv: 4300,
    amt: 2100
  },
  {
    name: "Page J",
    pv: 4300,
    amt: 2100
  }
];

class SubcribersByRegion extends Component {
  render() {
    return (
      <div>
        <Card className="subscribers-by-region-card">
          <CardTitle className="subscribers-by-region-card-title">
            Subscribers by Region
          </CardTitle>
          <CardBody>
            <ResponsiveContainer width="100%" height="100%" aspect={5.0 / 6.0}>
              <BarChart
                data={data}
                layout="vertical"
                barGap={4}
                margin={{
                  top: 6,
                  right: 50,
                  left: 2,
                  bottom: 0
                }}
              >
                <Tooltip />
                <XAxis type="number" className="xaxies" dy={1}/>
                <Bar
                  dataKey="pv"
                  fill="#8884d8"
                  maxBarSize={10}
                >
                  {data.map((entry, index) => (
                    <Cell key={`cell-${index+1}`} fill={colors[index]} />
                  ))}
                  <LabelList dataKey="pv" position="right" />
                </Bar>
              </BarChart>
            </ResponsiveContainer>
          </CardBody>
        </Card>
      </div>
    );
  }
}

export default SubcribersByRegion;

Вот так выглядит файл CSS.

@media only screen and (min-width: 1024px) {
  .subscribers-by-region-card {
    margin-left: 5.5%;
    margin-top: -5.1%;
    width: 107%;
    height: 4% !important;
    margin-bottom: 13px;
    padding-bottom: -20%
  }

  .subscribers-by-region-card-title {
    font-weight: 700;
    text-align: left;
    padding-left: 3%
  }


}

@media only screen and (min-width: 308px) and (max-width: 1024px) {
}

@media only screen and (min-width: 1666px) {
  .subscribers-by-region-card {
    margin-left: 6.8%;
    margin-top: 5%;
    width: 115.5%;
    height: 50% !important;
  }

  .subscribers-by-region-card-title {
    font-weight: 700;
    text-align: center;
  }

  .xaxies{
    margin-top: -50%
  }
}

То, что я хочу сделать, это изменить размер полосы, когда устройство меняется, и показать ось Y. А также я хочу удалить пространство между осью X и графиками, как на рисунках ниже.

Так должно выглядеть на нормальных устройствах.

Когда он открывается на большом экране, он должен увеличить размер бара и размер графика, а также должен показать ось Y. Может ли кто-нибудь помочь мне решить эти проблемы?

Вот так выглядит мой сгенерированный код shart.