Issue with Y Axis Scaling when using StackedColumnChart with panning

Question

Hello,

I am trying to create a StackedColumnSeries that is zoomed in to a certain region but can be panned to show more data if the user wants to.
When I zoom in using the primary x axis using zoom factor and position (I do not want the user to be able to edit the zoom themselves), the y axis scaling breaks and hides the data.
I have tried turning on anchorRangeToVisiblePoints and/or enableAutoIntervalOnZooming but it does not fix it.

Please see code:

class StackedChartExample extends StatefulWidget {
  const StackedChartExample({Key? key}) : super(key: key);

  @override
  State<StackedChartExample> createState() => _StackedChartExampleState();
}

class _StackedChartExampleState extends State<StackedChartExample> {
  @override
  Widget build(BuildContext context) {
    final List<ChartData> chartData = [
      ChartData('A', 12, 10, 14, 20),
      ChartData('B', 14, 11, 18, 23),
      ChartData('C', 16, 10, 15, 20),
      ChartData('D', 18, 16, 18, 24),
      ChartData('E', 18, 16, 18, 24),
      ChartData('F', 18, 16, 18, 20),
      ChartData('G', 18, 16, 18, 30),
      ChartData('H', 18, 16, 18, 40),
      ChartData('I', 18, 16, 18, 50),
      ChartData('J', 12, 10, 14, 20),
      ChartData('K', 14, 11, 18, 23),
      ChartData('L', 16, 10, 15, 20),
      ChartData('M', 18, 16, 18, 24),
      ChartData('N', 18, 16, 18, 24),
      ChartData('O', 18, 16, 18, 20),
      ChartData('P', 18, 16, 18, 30),
      ChartData('Q', 18, 16, 18, 40),
      ChartData('R', 18, 16, 18, 50)
    ];

    return Center(
      child: SfCartesianChart(
        zoomPanBehavior: ZoomPanBehavior(
          zoomMode: ZoomMode.x,
          enablePanning: true,
        ),
        primaryYAxis: NumericAxis(
          anchorRangeToVisiblePoints: true,
          enableAutoIntervalOnZooming: true,
        ),
        primaryXAxis: CategoryAxis(
          zoomFactor: 0.5,
          zoomPosition: 0.5,
        ),
        series: <ChartSeries>[
          StackedColumnSeries<ChartData, String>(
              dataSource: chartData,
              xValueMapper: (ChartData data, _) => data.x,
              yValueMapper: (ChartData data, _) => data.y1),
          StackedColumnSeries<ChartData, String>(
              dataSource: chartData,
              xValueMapper: (ChartData data, _) => data.x,
              yValueMapper: (ChartData data, _) => data.y2),
          StackedColumnSeries<ChartData, String>(
              dataSource: chartData,
              xValueMapper: (ChartData data, _) => data.x,
              yValueMapper: (ChartData data, _) => data.y3),
          StackedColumnSeries<ChartData, String>(
              dataSource: chartData,
              xValueMapper: (ChartData data, _) => data.x,
              yValueMapper: (ChartData data, _) => data.y4)
        ],
      ),
    );
  }
}

class ChartData {
  ChartData(this.x, this.y1, this.y2, this.y3, this.y4);
  final String x;
  final int y1;
  final int y2;
  final int y3;
  final int y4;
}

At first it looks like this:

As soon as it pans it turns into this:

Has anyone come across this? Any ideas what is causing the issue?

1 Reply

YG Yuvaraj Gajaraj Syncfusion Team March 9, 2022 05:30 PM UTC

Hi Danial,

We suggest you set the anchorRangeToVisiblePoints to false that will help you to resolve your scenario, please find the code snippet below for your reference.

Code snippet:

primaryYAxis: NumericAxis(

anchorRangeToVisiblePoints: false

),

Regards,

Yuvaraj.

Yuvaraj Gajaraj · Answer

Hi Danial, 
 
We suggest you set the anchorRangeToVisiblePoints to false that will help you to resolve your scenario, please find the code snippet below for your reference. 
 
Code snippet: 




primaryYAxis: NumericAxis( 
  anchorRangeToVisiblePoints: false 
), 
 
Regards, 
Yuvaraj.