Apex 图表拉伸全尺寸

Question

顶点图表有问题，它不会拉伸全尺寸。我怎样才能让图形只适合它的父容器。

这里是对间隙问题的检查，如您所见，内部图表元素与其对应父元素的间距不正确：

这是当前代码：

import Chart from "react-apexcharts";

const SimpleChart = () => {
    const data = {
        series: [{
          name: 'series1',
          data: [31, 40, 28, 51, 42, 109, 100]
        }],
        options: {
          chart: {
            type: 'area',
            toolbar: { show: false },
          },
          dataLabels: {
            enabled: false
          },
          legend: {
            show: false
          },
          stroke: {
            curve: 'smooth'
          },
          grid: { show: false },
          xaxis: {
            labels: { show: false },
            axisBorder: { show: false },
            axisTicks: { show: false },
            type: 'datetime',
            categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
          },
          yaxis: { 
            labels: { show: false },
          },
          tooltip: {
            enabled: false
          },
        },
    };

    return (
        <Chart
            options={data.options}
            series={data.series}
            width="150"
            type="area"
        />
    )
}

export default SimpleChart```

Answer 1

启用迷你图选项

chart: {
  sparkline: {
    enabled: true
  }
},

Apex 图表拉伸全尺寸

Apex chart stretch full size

javascript

size

svg

reactjs

apexcharts