reactjs - 如何使用 React-chartjs-2 设置条形图的轴标签样式

Question

条形图

我必须制作一个条形图，如上图所示，其圆角带有线性渐变背景，x 轴标签也应该有背景和圆角，使用 react-chartjs-2

我当前的代码是：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;

该组件收到的道具是：

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)",
                  ]
                }
              ]
            }
          });
        }

标签： reactjsreact-chartjschartjs-2.6.0react-chartjs-2react-charts