DateTimeCategoryAxis with multiple series renders weird

[Nils Larsgård]

Hi,

First of all, thank you for an awesome chart-library for flutter!

I have multiple series represented with AreaSeries and BubbleSeries. When use DateTimeCategoryAxis, the result is weird when one of the series lacks one of the x-values. It seems like the bubble placement is out of order in this case.

Code to recreate the bug with version 21.1.38:
https://gist.github.com/nilsmagnus/622783a09ebc93be3b3afa77c7d6aa20

Image of screenshot at imgbb: : https://ibb.co/gWs8MqS

The issue can be fixed by reverting the order of the series, so that the series with the most datapoints is first in the list of series in the SfChartesianChart.

[Lokesh Palani]

Hi Nils,

The DateTimeAxis is a linear intervals that displays date-time values based on range and intervals. The DateTimeCategoryAxis is a combination of both the DateTimeAxis and CategoryAxis, which displays values based on non-linear intervals. In the DateTimeCategoryAxis sample, the last two Bubble segment dataPoints were too close together. So, they overlapped with the Jan 10 segment and its previous segment.  We have shared the related UG Documentation below for your reference.

UG,

https://help.syncfusion.com/flutter/cartesian-charts/axis-types#date-time-axis

https://help.syncfusion.com/flutter/cartesian-charts/axis-types#date-time-category-axis

Regards,

Lokesh.

[Nils Larsgård]

If you have a look at the x-axis on the screenshot, you can see that the dates are in wrong order when the most sparse dataseries is first in the list of dataseries provided to SfChartesianChart.

I doubt that this is a feature.

[Lokesh Palani]

Hi Nils,

Currently, We are validating your query. We will share further details in one business day on April 12,2023. We appreciate your patience until then.

Regards,

Lokesh.

[Santhosh Iruthayaraj]

Hi Nils,

The DateTimeCategoryAxis is rendered data based on index only, so it will take the first series data point and render an axis based on this, to avoid this place the AreaSeries at first in the series list it will help you to render an axis based on area series data point. We have shared the code snippet below for your reference.

Code snippet:

series: <ChartSeries<_DataPoint, DateTime>>[

AreaSeries(),

BubbleSeries(),

LineSeries(),

ColumnSeries()

]

Screenshot:

Regards,

Yuvaraj.