Syncfusion Flutter Cartesian Charts Remove Grey 'Border'

Question

I am using Syncfusion, Flutter Cartesian Charts. I am trying to remove the grey coloured lines circled in black, in the photo. I have set the width of majorGridLines, minorGridLines, majorTickLines, minorTickLines to zero but it still appears. Any ideas on how I could remove them? Ideally, I would only want to show the axes.

Widget _buildGraphs() {
    return Container(
      height: MediaQuery.of(context).size.width,
      width: MediaQuery.of(context).size.width,
      padding: const EdgeInsets.all(10),
      child: SfCartesianChart(
        primaryXAxis: NumericAxis(
          title: AxisTitle(text: 'x / m'),
          crossesAt: 0,
          interval: 0.5,
          rangePadding: ChartRangePadding.additional,
          majorGridLines: const MajorGridLines(width: 0),
          minorGridLines: const MinorGridLines(width: 0),
          majorTickLines: const MajorTickLines(width: 0),
          minorTickLines: const MinorTickLines(width: 0),
        ),
        primaryYAxis: NumericAxis(
          title: AxisTitle(text: 'y / m'),
          crossesAt: 0,
          interval: 0.5,
          rangePadding: ChartRangePadding.additional,
          majorGridLines: const MajorGridLines(width: 0),
          minorGridLines: const MinorGridLines(width: 0),
          majorTickLines: const MajorTickLines(width: 0),
          minorTickLines: const MinorTickLines(width: 0),
        ),
        series: <CartesianSeries>[
          ScatterSeries<PointCharge, double>(
            dataSource: _pointCharges,
            xValueMapper: (PointCharge data, _) => data.x,
            yValueMapper: (PointCharge data, _) => data.y,
            markerSettings: const MarkerSettings(
              shape: DataMarkerType.circle,
            ),
          ),
          ..._lineGraphDataList.map<CartesianSeries>((seriesData) {
            return LineSeries<LineGraphData, double>(
              dataSource: seriesData,
              xValueMapper: (LineGraphData data, _) => data.x,
              yValueMapper: (LineGraphData data, _) => data.y,
              enableTooltip: false,
            );
          }).toList(),
        ],
        enableAxisAnimation: true,
        zoomPanBehavior: ZoomPanBehavior(
          enablePinching: true,
          enableDoubleTapZooming: true,
        ),
      ),
    );
  }

Answer 1

Your code looks fine for the most part. However, the grey lines you see might be due to the axis lines. To remove or hide them, you can set the color of the axis lines to transparent using the axisLine property for both primaryXAxis and primaryYAxis.

primaryXAxis: NumericAxis(
  ...
  axisLine: AxisLine(color: Colors.transparent), // Add this line
  ...
),
primaryYAxis: NumericAxis(
  ...
  axisLine: AxisLine(color: Colors.transparent), // Add this line
  ...
),

Answer 2

You should set plotAreaBorderWidth: 0 for this issue.