How to style the axis label for a bar chart using React-chartjs-2

Question

bar-chart

I have to make a bar chart like in the photo above which has rounded corners with a linear gradient background and the x-axis label should also have a background and rounded corners using react-chartjs-2

My current code is: Chart.js

import React from "react";
import { Bar } from "react-chartjs-2";

function Chart(props) {
  return (
    <div className="chart" style={{ width: "15rem", height: "15rem" }}>
      <Bar
        data={props.chartData}
        options={{
          ticks: {
            stepSize: 25,
            max: 100,
          },
        plugins: {
            legend: {
                display: false,
            }
        },
          maintainAspectRatio: false,
          borderRadius: 5,
          scales: {
            x: {
              grid: {
                display: false
              }
            },
            y: {
              grid: {
                display: false
              }
            }
          },
        }}
      />
    </div>
  );
}

export default Chart;

And props received by this component are :

state = {
          chartData: {}
        };
      
        componentWillMount() {
          this.getChartData();
        }
      
        getChartData() {
          this.setState({
            chartData: {
              labels: ["Age 5", "Age 10", "Age 15", "Age 35"],
              datasets: [
                {
                  data: [2, 15, 27, 100],
                  //backgroundColor:'green',
                  backgroundColor: [
                    "rgba(255, 99, 132, 0.6)",
                    "rgba(54, 162, 235, 0.6)",
                    "rgba(255, 206, 86, 0.6)",
                    "rgba(75, 192, 192, 0.6)",
                  ]
                }
              ]
            }
          });
        }