Graph width Problem

[Sanwarul Haque Sourav]

When i get 2/3 data then the graph width looks like the image.can i increase the width that time?

My code is:

SfCartesianChart(
  plotAreaBorderWidth: 0,
  zoomPanBehavior: _zoomPanBehavior,
  tooltipBehavior: _tooltipBehavior,
  trackballBehavior: _trackballBehavior,
  primaryXAxis: CategoryAxis(
    //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: data.singleProductModel!.graphType == '0' ? 9.sp : 10.sp,
      fontStyle: FontStyle.italic,
      //fontWeight: FontWeight.w900,
    ),
    labelAlignment: LabelAlignment.end,
    //maximumLabels: 6
  ),
  primaryYAxis: NumericAxis(
    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<SingleProductGraph, String>>[
    SplineAreaSeries<SingleProductGraph, String>(
      dataSource: data.singleProductModel!.graph!,
      borderColor: const Color(0xff2093D7),
      borderWidth: 1,
      gradient: AppColors.graphGradient,
      xValueMapper: (plot, _) => data.singleProductModel!.graphType == '0'
          ? plot.hourWiseTime
          : data.singleProductModel!.graphType == '1'
          ? plot.dayWiseTime
          : data.singleProductModel!.graphType == '2'
          ? plot.dayWiseTimeWithDate
          : data.singleProductModel!.graphType == '3'
          ? plot.dayWiseTimeWithDate
          : 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,

Greetings from Syncfusion.

We have checked your query at our end, and we would like to let you know that you can set the labelPlacement property to ‘LabelPlacement.onTicks’ for the category x-axis of your chart so that the extra space at the edges of the chart will be excluded and series will start render from the edges. We have also appended the user guide documentation for labelPlacement property below.

https://help.syncfusion.com/flutter/cartesian-charts/axis-types#placing-labels-between-the-ticks

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

Regards,
Sriram Kiran

[Sanwarul Haque Sourav]

Thanks A Lot. Now it's Working

[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