如何使用材料UI图表来增加宽度Y轴？

Question

有一个图表，在其中我增加了for字幕显示宽度，将单元更改为r $（reais）并格式化值，就像当我将光标放在条上时一样。我无法造型Y轴

import { BarChart } from "@mui/x-charts/BarChart";
import { useEffect, useState } from "react";
import axios from "axios";
import Loading from "../Loading";
import { axisClasses } from "@mui/x-charts";

export const Chart = () => {
  const [dataset, setDataset] = useState([]);

  useEffect(() => {
    const getTransactions = async () => {
      try {
        const token = localStorage.getItem("token");
        const response = await axios.get("http://localhost:4000/transactions", {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });

        const data = response.data.data;

        let objectYears = {};
        for (let i = 0; i < data.length; i++) {
          const dateObj = new Date(data[i].date).getFullYear();

          if (!objectYears[`${dateObj}`]) {
            objectYears[`${dateObj}`] = { income: 0, expense: 0 };

            objectYears[`${dateObj}`][`${data[i].type.toLowerCase()}`] =
              data[i].amount;
          } else {
            objectYears[`${dateObj}`][`${data[i].type.toLowerCase()}`] +=
              data[i].amount;
          }
        }

        const dataset = [];

        for (const [key, value] of Object.entries(objectYears)) {
          dataset.push({
            year: key,
            income: value.income ?? 0,
            expense: value.expense ?? 0,
          });
        }

        setDataset(dataset);
      } catch (_) {}
    };
    getTransactions();
  }, []);

  const chartSetting = {
    yAxis: [
      {
        label: "Reais",
      },
    ],
    height: 400,
    width: 700,
    sx: {
      [`.${axisClasses.left} .${axisClasses.label}`]: {
        transform: "translate(-20px, 0)",
      },
    },
  };

  const valueFormatter = (value) => `R$ ${value / 100}`;

  return (
    <>
      {dataset.length ? (
        <BarChart
          dataset={dataset}
          xAxis={[{ scaleType: "band", dataKey: "year" }]}
          series={[
            { dataKey: "income", label: "Income", valueFormatter },
            { dataKey: "expense", label: "Expense", valueFormatter },
          ]}
          {...chartSetting}
        />
      ) : (
        <Loading />
      )}
    </>
  );
};

export default Chart;

我已经插入宽度和格式插入yaxiswidth，就像chatgpt向我展示，但它没有起作用

const chartSetting = {
    yAxis: [
      {
        label: "rainfall (mm)",
      },
    ],
    height: 400,
    width: 700,
    yAxisWidth: 80, 
    sx: {
      [`.${axisClasses.left} .${axisClasses.label}`]: {
        transform: "translate(-20px, 0)",
      },
    },
  };

Renan.

Answer 1

如果您在V7上，您应该能够增加

margin

道：

const chartSetting = {
    yAxis: [
      {
        label: "rainfall (mm)",
      },
    ],
    height: 400,
    width: 700,
    margin: { left: 40, top: 20, bottom: 20, right: 20 },
    sx: {
      [`.${axisClasses.left} .${axisClasses.label}`]: {
        transform: "translate(-20px, 0)",
      },
    },
  };

从v8开始，您应该可以直接在

yAxis

prop中设置y轴的宽度：

const chartSetting = {
    yAxis: [
      {
        label: "rainfall (mm)",
        width: 40,
      },
    ],
    height: 400,
    width: 700,
    sx: {
      [`.${axisClasses.left} .${axisClasses.label}`]: {
        transform: "translate(-20px, 0)",
      },
    },
  };