Flutter: Syncfusion charts how to explicitly set number of x axis labels to show

user_216624 0
Viewed 258

I'm using this library to show charts in my app.

With my data, the x-axis is always a DateTime

All I want to do is explicitly set the x-axis labels to show and WHERE to show them if possible, e.g.

  • Show 2 or 4 labels evenly spaced, beginning (so centred under the y-axis) and at end of the x-axis

Like this:

enter image description here

or this:

enter image description here

Here's what I have so far which doesn't quite work, but I'm not sure why:

    return DateTimeAxis(
      dateFormat: (showXAxisAsName) ? DateFormat("MMM") : DateFormat("dd/MM"),
      majorGridLines: MajorGridLines(width: 0),
      majorTickLines: MajorTickLines(width: 0),
      axisLine: AxisLine(
        width: 1,
        color: (axesColour != null) ? axesColour : GTColors.lightGrey,
      ),
      labelStyle: GTTextStyle.caption2.copyWith(
        color: (axesColour != null) ? axesColour : GTColors.lightGrey,
      ),
      minimum: (hasData) ? DateTime(first.year, first.month) : null,
      maximum: (hasData) ? DateTime(last.year, last.month) : null,
      intervalType: DateTimeIntervalType.months,
    );
x-axis syncfusion flutter charts
1 Answers

We suggest you the axisLabelFormatter to customize the axis label style and text based on your requirement,if you want to show only the first and last label then you can return the empty string in this callback except for the first and last label. In another way you have to set the interval property in the axis it defines the interval between the data points, so set the interval value based on your requirement.

UG:

• https://help.syncfusion.com/flutter/cartesian-charts/callbacks#axislabelformatter

• https://help.syncfusion.com/flutter/cartesian-charts/axis-types#customizing-interval

user_117740560
Related