Extra space on X-axis

[Sanwarul Haque Sourav]

How can i set constant space for each element of X axis?

Here is my code:

SfCartesianChart(
crosshairBehavior: _crosshairBehavior,
plotAreaBorderWidth: 0,
zoomPanBehavior: _zoomPanBehavior,
// tooltipBehavior: _tooltipBehavior,
trackballBehavior: _trackballBehavior,
primaryXAxis: CategoryAxis(
  interactiveTooltip: const InteractiveTooltip(
    enable: false,
  ),
  //rangePadding: ChartRangePadding.auto,
        axisBorderType: AxisBorderType.withoutTopAndBottom,
        majorGridLines: const MajorGridLines(
          width: 0,
        ),
        majorTickLines: const MajorTickLines(width: 0),
        axisLine: const AxisLine(width: 0),
        labelIntersectAction: AxisLabelIntersectAction.hide,
        labelRotation: 0,
        edgeLabelPlacement: EdgeLabelPlacement.shift,
        labelStyle: TextStyle(
          color: AppColors.textColor,
          fontFamily: 'Inter',
          fontSize: 10.sp,
          fontStyle: FontStyle.italic,
          //fontWeight: FontWeight.w900,
        ),
        labelAlignment: LabelAlignment.end,
  labelPlacement: data.oneYearGraphModel!.graph!.length == 1
      ? LabelPlacement.betweenTicks
      : LabelPlacement.onTicks,
        maximumLabelWidth: Get.width,
        //maximumLabels: 6
      ),
      primaryYAxis: NumericAxis(
        interactiveTooltip: const InteractiveTooltip(
          enable: false,
        ),
        axisBorderType: AxisBorderType.withoutTopAndBottom,
        borderWidth: 0,
        axisLine: const AxisLine(width: 0),
        majorGridLines: const MajorGridLines(
          width: 0,
        ),
        majorTickLines: const MajorTickLines(width: 0),
        labelIntersectAction: AxisLabelIntersectAction.hide,
        labelRotation: 0,
        labelStyle: TextStyle(
            color: AppColors.textColor,
            fontFamily: 'Inter',
            fontSize: 8.sp,
            fontStyle: FontStyle.italic,
            fontWeight: FontWeight.w900),
        labelAlignment: LabelAlignment.center,
      ),
      series: <ChartSeries<OneYearProductGraph, String>>[
        data.oneYearGraphModel!.graph!.length == 1
            ? ColumnSeries<OneYearProductGraph, String>(
          dataSource: data.oneYearGraphModel!.graph!,
          width: .01,
          gradient: AppColors.graphGradient,
          xValueMapper: (plot, _) => plot.monthWiseTime,
          yValueMapper: (plot, _) => plot.floorPrice,
        )
            :
        SplineAreaSeries<OneYearProductGraph, String>(
          dataSource: data.oneYearGraphModel!.graph!,
          borderColor: const Color(0xff2093D7),
          borderWidth: 1,
          gradient: AppColors.graphGradient,
          xValueMapper: (plot, _) => plot.monthWiseTime,
          yValueMapper: (plot, _) => plot.floorPrice,
          xAxisName: 'Duration',
          yAxisName: 'Total',
          enableTooltip: true,
          dataLabelSettings: const DataLabelSettings(
            isVisible: false,
            angle: 270,
          ),
          splineType: SplineType.monotonic,
          cardinalSplineTension: 0.3,
        ),
      ],
    )

[Sriram Kiran Senthilkumar]

Hi Sanwarul,

We have checked your query at our end, and we would like to let you know that in your code snippet, we can see that you have set labelIntersectAction to ‘hide’ due to which the intersecting labels are getting hidden. To overcome this, you can set constant width for the axis label with the help of maximumLabelWidth property. If the provided width is lesser than the axis label’s width, the label gets trimmed, and the tooltip is shown when clicking/tapping the axis label. We have appended the user guide documentation for it below for reference.

https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#axis-label-width-customization

Please check and get back to us if you require further assistance.

Regards,

Sriram Kiran

[Sanwarul Haque Sourav]

Thanks for your reply. I have tried following your suggestion .but still now i am facing this problem.

[Sriram Kiran Senthilkumar]

Hi Sanwarul,

We have checked your query at our end and provided the following suggestions to show the axis labels in the chart based on your sample code.

1: Setting labelIntersectAction to wrap mode.

You can set the labelIntersectAction property to AxisLabelIntersectAction.wrap to wrap the axis labels that are getting intersected. 

SfCartesianChart(

              plotAreaBorderWidth: 0,

                primaryXAxis: CategoryAxis(

                    axisBorderType: AxisBorderType.withoutTopAndBottom,

                    labelAlignment: LabelAlignment.end,

                    // Set label intersection action to wrap mode.

                    labelIntersectAction: AxisLabelIntersectAction.wrap,

                    edgeLabelPlacement: EdgeLabelPlacement.shift,

                    majorTickLines: const MajorTickLines(width: 0),

                    axisLine: const AxisLine(width: 0),

                    labelRotation: 0,

                    labelStyle: const TextStyle(

                      fontFamily: 'Inter',

                      fontSize: 14,

                      fontStyle: FontStyle.italic,

                    ),

                    labelPlacement: LabelPlacement.onTicks,

                    ),

                  // other configurations

}

2: Setting labelAlignment to center and labelIntersectionAction to wrap.

You can set the labelIntersectAction to wrap and labelAlignment to center so that the axis labels which are intersecting will be wrapped and render at the center.

SfCartesianChart(

              plotAreaBorderWidth: 0,

                primaryXAxis: CategoryAxis(

                    axisBorderType: AxisBorderType.withoutTopAndBottom,

                    // Set label alignment to center.

                    labelAlignment: LabelAlignment.center,

                    // Set label intersection action to wrap mode.

                    labelIntersectAction: AxisLabelIntersectAction.wrap,

                    edgeLabelPlacement: EdgeLabelPlacement.shift,

                    majorTickLines: const MajorTickLines(width: 0),

                    axisLine: const AxisLine(width: 0),

                    labelRotation: 0,

                    labelStyle: const TextStyle(

                      fontFamily: 'Inter',

                      fontSize: 14,

                      fontStyle: FontStyle.italic,

                    ),

                    labelPlacement: LabelPlacement.onTicks,

                    ),

                  // other configurations

}

3: Setting interval for the axis if you don’t want to show all the axis labels in the axis.

You can set interval for the category axis to display the axis labels at the fixed intervals. Please check the code snippet below.

SfCartesianChart(

              plotAreaBorderWidth: 0,

                primaryXAxis: CategoryAxis(

                    axisBorderType: AxisBorderType.withoutTopAndBottom,

                    labelAlignment: LabelAlignment.end,

                    labelIntersectAction: AxisLabelIntersectAction.hide,

                    edgeLabelPlacement: EdgeLabelPlacement.shift,

                    majorTickLines: const MajorTickLines(width: 0),

                    axisLine: const AxisLine(width: 0),

                    labelRotation: 0,

                    labelStyle: const TextStyle(

                      fontFamily: 'Inter',

                      fontSize: 14,

                      fontStyle: FontStyle.italic,

                    ),

                    labelPlacement: LabelPlacement.onTicks,

                    // Set fixed interval for the category axis.

                    interval: 3,

                    ),

                  // other configurations

}

Also appended the user guide documentation for labelIntersectAction, labelAlignment and interval properties below for reference.

• https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#smart-axis-labels

• https://help.syncfusion.com/flutter/cartesian-charts/axis-types#displaying-labels-after-a-fixed-interval

• https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#axis-label-alignment

Please check with the above suggestions and get back to us if you require further assistance.

Regards,

Sriram Kiran

[Sanwarul Haque Sourav]

It works. Thank you so much

[Sriram Kiran Senthilkumar]

Hi Sanwarul,

Most welcome. Kindly get back to us if you have further queries. We are always happy to assist you.

Note: If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Sriram Kiran