title: How to remove padding between Xaxis and the chart of a vertical chart in rechart and also It is not appliyng color coorectly?
body: <p><strong>Problem:</strong></p>
  
  <p>I am creating a chart component using recharts in my react application.</p>
  
  <p>This is my code.</p>
  
  <pre><code>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 (
        &lt;div&gt;
          &lt;Card className="subscribers-by-region-card"&gt;
            &lt;CardTitle className="subscribers-by-region-card-title"&gt;
              Subscribers by Region
            &lt;/CardTitle&gt;
            &lt;CardBody&gt;
              &lt;ResponsiveContainer width="100%" height="100%" aspect={6.5 / 8.9}&gt;
                &lt;BarChart
                  data={data}
                  layout="vertical"
                  barGap={4}
                  margin={{
                    top: 27,
                    right: 5,
                    left: 5,
                    bottom: 0
                  }}
                &gt;
                  &lt;Tooltip /&gt;
                  &lt;XAxis className="xaxies" /&gt;
                  &lt;Bar
                    dataKey="pv"
                    fill="#8884d8"
                    maxBarSize={10}
                  &gt;
                    {data.map((entry, index) =&gt; (
                      &lt;Cell key={`cell-${index+1}`} fill={colors[index]} /&gt;
                    ))}
                    &lt;LabelList dataKey="pv" position="right" /&gt;
                  &lt;/Bar&gt;
                &lt;/BarChart&gt;
              &lt;/ResponsiveContainer&gt;
            &lt;/CardBody&gt;
          &lt;/Card&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default SubcribersByRegion;
  </code></pre>
  
  <p>This is how my chart looks like now.</p>
  
  <p><a href="https://i.stack.imgur.com/dxnIj.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dxnIj.jpg" alt="enter image description here"></a></p>
  
  <p>The tried to find a solution for why this is not showing the bar for the first element. And also I tried many ways like adding styling to Xaxias for removing the padding between xAxis and the chart. But I was unable to find any solution for It. Can someone help me to find out a solution to this problem by modifying my code? Thank you!!</p>