We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

DateTimeCategoryAxis with multiple series renders weird


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:

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.

4 Replies

LP Lokesh Palani Syncfusion Team April 10, 2023 10:07 AM UTC

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.






NL Nils Larsgård April 10, 2023 03:23 PM UTC

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.

LP Lokesh Palani Syncfusion Team April 11, 2023 12:45 PM UTC

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.



SI Santhosh Iruthayaraj Syncfusion Team April 12, 2023 11:19 AM UTC

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>>[




Live Chat Icon For mobile
Up arrow icon