How to set fixed width to a column in a ColumnSerie?

[Daniel Pazos]

Hello,

I have a chart where I add new points on click. After a few clicks the existing points in the chart resizes and change their width as shown in this images:

How can I set a fixed width for all my points and avoid resizing?

This is my chart:

SfCartesianChart(
key: _chartKey,
margin: const EdgeInsets.all(15),
plotAreaBorderWidth: 0,
plotAreaBackgroundColor: Colors.white,
onChartTouchInteractionUp:
   (ChartTouchInteractionArgs args) => viewModel.addData(args),
primaryXAxis: const NumericAxis(
  minimum: 0,
  maximum: 50,
  anchorRangeToVisiblePoints: false,
  interval: 1,
  isVisible: true,
  majorGridLines: MajorGridLines(width: 1),
  minorGridLines: MinorGridLines(width: 1),
  enableAutoIntervalOnZooming: true,
),
primaryYAxis: const NumericAxis(
  minimum: -50,
  maximum: 50,
  interval: 1,
  isVisible: true,
  anchorRangeToVisiblePoints: false,
  majorGridLines: MajorGridLines(width: 1),
  minorGridLines: MinorGridLines(width: 1),
  enableAutoIntervalOnZooming: false,
),
series: viewModel.seriesList)


And my ViewModel where I set the Serie and the addData event:

class StoryChartViewModel extends ChangeNotifier {

  List<StoryPoint> data = [StoryPoint(0, 0), StoryPoint(50, 0)];

  ChartSeriesController<StoryPoint, num>? seriesController;

  List<CartesianSeries<StoryPoint, num>> seriesList = [];

  StoryChartViewModel() {

    CartesianSeries<StoryPoint, num> mainSerie = ColumnSeries<StoryPoint, num>(

        animationDuration: 300,

        animationDelay: 10,

        xValueMapper: (StoryPoint point, _) => point.x,

        yValueMapper: (StoryPoint point, _) => point.y,

        color: const Color.fromRGBO(8, 142, 255, 1),

        dataSource: data,

        onRendererCreated: (ChartSeriesController<StoryPoint, num> controller) {

          seriesController ??= controller;

        });

    seriesList.add(mainSerie);

  }

  void addData(ChartTouchInteractionArgs args) {

    final Offset value = Offset(args.position.dx, args.position.dy);

    CartesianChartPoint<dynamic> chartpoint =

        seriesController!.pixelToPoint(value);

    data.add(StoryPoint(chartpoint.x, chartpoint.y ?? 0));

    notifyListeners();

  }

}

[Yuvaraj Gajaraj]

Hi Daniel,

We would like to let you know that the ColumnSeries width is determined by the number of visible data points and the axis visible range. However, you can achieve your requirements with the help of the onCreateRenderer callback which is used to render a customer series, here you can customize the width of a column series by overriding the respective series renderer. We have shared the related UG and KB documentation below for your reference.

UG, https://help.syncfusion.com/flutter/cartesian-charts/callbacks#oncreaterenderer

KB, https://support.syncfusion.com/kb/article/11410/how-to-render-a-customized-column-chart-sfcartesianchart

Regards,

Yuvaraj.

[Daniel Pazos]

I've tried to set the Axis visible range and the datatpoints to only 50 elements but it sill changes the width.

Am I missing something? Or am I using the wrong properties?

primaryXAxis: const NumericAxis(

                                minimum: 0,

                                maximum: 50,

                                initialVisibleMaximum: 50,

                                initialVisibleMinimum: 0,

                                interval: 1

                              ),

                              primaryYAxis: const NumericAxis(

                                minimum: -25,

                                maximum: 25,

                                interval: 1

                              )

[Preethika Selvam]

Hi Daniel,

As per our pervious update the ColumnSeries width is determined by the number of visible data points and the axis visible range. However, you can achieve your requirements by using a custom series. By utilizing the onPaint method, you can draw a custom segment. Within this paint, there is a segmentRect which can be used to draw the segment. You can get the actual top and bottom of the column rectangle in the segmentRect's centerTop and centerBottom. By modifying the segmentRect's left and right according to your needs, you can create a new rectangle to draw the segment with the desired width.

Please let us know if you need any further assistance.

Regards,

Preethika Selvam.

[Daniel Pazos]

Thanks for the help. I thought it would be easier but using a custom Column Serie worked like a charm.

[Preethika Selvam]

Hi Daniel,

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

Regards,

Preethika Selvam.