Chart has wrong zoom when first load

[Jaehwi Kim]

Hi, 

I'm working with StackedColumnSeries of SfCartesianChart.

I have a stacked column chart which shows visibleMaximum of 8 data, (or visibleMax of number of data if smaller than 8) and make user to scroll through the chart to see additional data.

However, when the data first loads, There seems to an empty space on the left which disappears when the user starts scrolling. 

Here is the screenshot of the data when it gets loaded (only 2 data):

You can see that although only 2 data is shown, there is an empty space on the right.

However, when the user starts scrolling in the graph, 

The intended view for the graph is shown correctly having no empty space.

Here is my code for the chart part.

SfCartesianChart(
    zoomPanBehavior: ZoomPanBehavior(enablePanning: true,),
    plotAreaBorderWidth: 0,
    primaryXAxis: CategoryAxis(
      visibleMaximum: 8,
      maximumLabels: 6,
    ),
    primaryYAxis: NumericAxis(
    ),
    trackballBehavior: TrackballBehavior(
      activationMode: ActivationMode.singleTap,
      tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,
      tooltipAlignment: ChartAlignment.center,
      enable: true,
      builder: (BuildContext context, TrackballDetails trackballDetails) {
        ...return customTrackball;
      },
    ),
    legend: Legend( ...),
    onTooltipRender: (TooltipArgs args){
      ... some text conversion
    },
    series: <CartesianSeries>[
      ...3 stacked column series,
    ]
),

Thanks.

[Dharanitharan Palanisamy]

Hi Jaehwi, 

 

Greetings from the team at Syncfusion. We have investigated your request and can assure you that the scenario you have described works properly on our end. As a result, please recreate the reported issue in the accompanying sample to assist us in analyzing your case and providing a solution more quickly. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/167377/ze/F167377_stacked_zoom1522339048 

 

Thanks, 

Dharanitharan. P 

[Jaehwi Kim]

Hi,

I have recreated the issue with the sample above.

When I have commented out 5 of the data, the chart would have empty space on the left.

However, when the user tries to scroll on the chart, the chart would automatically zoom to fit the left empty space.

I believe the correct behavior would be that when there is less than visible maximum number of data, the chart would automatically fit to fill the empty space without the user manually scrolling on the chart.

I couldn't upload the recreated sample because it is too large, so I'll just post the part I have changed (I have just commented out 5 ChartSampleData from above sample).

List<ChartSampleData> chartData = [
  ChartSampleData(
      x: '0', open: 98.97, high: 101.19, low: 9536, close: 97.13),
  ChartSampleData(
      x: '1', open: 98.41, high: 101.46, low: 9342, close: 101.42),
  ChartSampleData(
      x: '2', open: 101.52, high: 101.53, low: 9239, close: 97.34),
  ChartSampleData(x: '3', open: 96.47, high: 9733, low: 93.69, close: 94.02),
  ChartSampleData(x: '4', open: 93.13, high: 9635, low: 92.59, close: 93.99),
  // ChartSampleData(x: '5', open: 95.02, high: 9889, low: 94.61, close: 96.04),
  // ChartSampleData(
  //     x: '6', open: 96.31, high: 98.0237, low: 9332, close: 96.91),
  // ChartSampleData(
  //     x: '7', open: 96.86, high: 103.75, low: 9665, close: 103.01),
  // ChartSampleData(
  //     x: '8', open: 102.39, high: 102.83, low: 1005, close: 102.26),
  // ChartSampleData(
  //     x: '9', open: 106.5, high: 106.5, low: 1005, close: 109.5),
];

How it looks when there are only 5 data:

How it should look when there are only 5 data:

Thank you.

 

[Sriram Kiran Senthilkumar]

Hi Jaehwi, 

  

Thanks for your update. We have checked the sample as you mentioned and we can reproduce the reported one. This is occurred due to visibleMaximum property, which is set in the primaryXAxis of the sample. When we set the visibleMaximum property, the axis range will be calculated and rendered based on the provided value of visibleMaximum irrespective of provided data (x-value of data source), since the visibleMaximum property value has higher priority. Therefore, in the provided sample, when we remove the last five data and set the visibleMaximum property as 8, the series is rendered for the provided data and the axis range is calculated till the visibleMaximum range. 

To avoid this, you can either not to set the value for visibleMaximum or set the actual value based on the x-value provided in the data source. If you want to dynamically remove the visibleMaximum value, you can also set null to it. 

  

Regards, 

Sriram Kiran