Syncfusion Category axis offset

[Samamoah]

There is a gap at the begging and end of x-axis. How can i fix this. I want the S right beneath the 0 on the first axis and last item on last axis

[sfHariHaraSudhan]

Hi @Samamoah,

We suspect that you are rendering the x-axis using the DateTimeCategoryAxis based on the provided snapshot and the mentioned requirement can be achieved using the labelPlacement property. In both CategoryAxis and DateTimeCategoryAxis, there is an option to render the axislabels between the ticks or on the tick using the labelPlacement property and its default value is LabelPlacement.betweenTicks. Therefore, we suggest you to set the labelPlacement property as LabelPlacement.onTicks to render the axislabel at the beginning and end of the x-axis.

Kindly refer the code snippet below:

class _MainAppState extends State<MainApp> {
  late List<ChartSampleData> _chartData;

  @override
  void initState() {
    _chartData = [
      ChartSampleData(DateTime(2023, 09, 10), 30),
      ChartSampleData(DateTime(2023, 09, 11), 20),
      ChartSampleData(DateTime(2023, 09, 12), 50),
      ChartSampleData(DateTime(2023, 09, 13), 60),
      ChartSampleData(DateTime(2023, 09, 14), 40),
      ChartSampleData(DateTime(2023, 09, 15), 50),
      ChartSampleData(DateTime(2023, 09, 16), 70),
    ];

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(10.0),
          child: SfCartesianChart(
            primaryXAxis: DateTimeCategoryAxis(
                intervalType: DateTimeIntervalType.days,
                // labelPlacement: LabelPlacement.betweenTicks,
                labelPlacement: LabelPlacement.onTicks,
                dateFormat: DateFormat('E')),
            primaryYAxis: NumericAxis(),
            series: <CartesianSeries<ChartSampleData, DateTime>>[
              SplineSeries<ChartSampleData, DateTime>(
                dataSource: _chartData,
                xValueMapper: (ChartSampleData data, _) => data.x,
                yValueMapper: (ChartSampleData data, _) => data.y,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Snapshot:
Between Ticks :

On Ticks :

If you have further queries, please get back to us.

Regards,
Hari Hara Sudhan. K.

[Samamoah]

Thank you @sfHariHaraSudhan this worked perfectly. But I am facing 1 more issue that I need help with. Not all the labels are showing on this bar chart, i reduced the font size to like 2 pixels and still the rest were not showing. How can i fix it, its suppused to show from Jan to Dec. Or should i open a different issue and close this ?

[Samamoah]

I have fixed the issue @sfHariHaraSudhan