如何在图表的绘图区域增加空间？

Question

注意，图表顶部的线比地图区域内的线更薄，因为它落在边缘。

我可以解决这个问题吗？

i我尝试添加

margin

属性，但这添加了整个图表组件周围的空间，而不是增加绘图区域。我不希望我的积分落在边缘。这是图表库中的常见配置。

<LineChartPro 
  width={600}
  height={300}
/>

可能不是最好的解决方案，但它可能会帮助您朝着正确的方向前进。在MUI文档上，他们有这个例子

Answer 1

。 它在左侧有一个图表，右侧有一个部分，一个堆栈看起来像包装两个组件。

    <Stack
      direction={{ xs: 'column', md: 'row' }}
      spacing={{ xs: 0, md: 4 }}
      sx={{ width: '100%' }}
    >
     Content
    </Stack>

我将返回体更改为此

return (
<Stack
  direction={'row'}
  sx={{ width: '80%' }}
>
    <LineChart
      {...lineChartsParams}
      onAreaClick={(event, d) => setItemData(d)}
      onMarkClick={(event, d) => setItemData(d)}
      onLineClick={(event, d) => setItemData(d)}
      onAxisClick={(event, d) => setAxisData(d)}
    />
</Stack>

）;

留下了这个

我可以通过将宽度更改为

来使其更小

< 80 %. For example, 50%

不确定这是否有帮助。如果您在模态或其他变量宽度父div中显示图表，则可能会遇到一些问题。或者，如果您使用的是旧版本的MUI.

运气好！