javascript - 更改图表失败

Question

我有这样的问题，

我使用 chartjs 来查看我拥有的数据。

但我想把他们的设计改成这样：

这是我制作的代码：

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

const App = () => (
  <div>
    <Bar
      data={{
        labels: ["1", "2", "3", "4"],
        datasets: [
          {
            label: "test",
            data: [50, 10, 20, 35],
            backgroundColor: [
              "rgb(207,207,207)",
              "rgb(207,207,207)",
              "green",
              "rgb(207,207,207)"
            ]
          }
        ]
      }}
      width={100}
      height={400}
      options={{
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false
          }
        }
      }}
    />
  </div>
);

render(<App />, document.getElementById("root"));

这就是它的样子：

标签： javascriptreactjs