顶点图表拉伸全尺寸答案

【问题标题】：Apex chart stretch full size顶点图表拉伸全尺寸
【发布时间】：2021-11-20 03:47:54
【问题描述】：

顶点图表出现问题，无法拉伸完整尺寸。如何使图表仅适合其父容器。

这是对差距问题的检查，您可以看到内部图表元素与其对应的父元素的间距不正确：

这是当前代码：

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```

【问题讨论】：

标签： javascript reactjs svg size apexcharts

【解决方案1】：

启用迷你图选项

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

【讨论】：