SfCartesianChart图表首尾空白如何去除？

方案1：移除X轴默认内边距 #

在CategoryAxis配置中添加rangePadding: ChartRangePadding.none，直接消除X轴首尾的默认空白：

SfCartesianChart(
  crosshairBehavior: CrosshairBehavior(
    enable: true,
    lineType: CrosshairLineType.vertical,
    activationMode: ActivationMode.singleTap,
    lineDashArray: [2, 2],
  ),
  primaryXAxis: const CategoryAxis(
    majorGridLines: MajorGridLines(
      color: Colors.transparent,
    ),
    rangePadding: ChartRangePadding.none, // 新增此行
  ),
  series: <AreaSeries<Map<String, dynamic>, String>>[
    AreaSeries<Map<String, dynamic>, String>(
        borderColor: graphThemeColor,
        borderWidth: 1.spMin,
        gradient: LinearGradient(
            colors: [
              graphThemeColor.withOpacity(.2),
              Colors.transparent
            ],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter),
        dataSource: graphValues,
        xValueMapper: (Map value, _) => value['x'],
        yValueMapper: (Map value, _) => value['y'])
  ],
)

方案2：强制锁定可见范围（可选） #

如果方案1效果不彻底，可手动指定X轴的首尾可见值，绑定到数据源的第一条和最后一条数据：

primaryXAxis: CategoryAxis(
  majorGridLines: const MajorGridLines(
    color: Colors.transparent,
  ),
  rangePadding: ChartRangePadding.none,
  visibleMinimum: graphValues.first['x'], // 绑定第一个x值
  visibleMaximum: graphValues.last['x'], // 绑定最后一个x值
),

说明 #

ChartRangePadding.none会完全移除轴两端的默认内边距，让图表内容紧密贴合轴的边界；若使用数值型X轴，同样可以通过这两个方案解决首尾空白问题。

内容的提问来源于stack exchange，提问作者Shanu