[syncfusion_flutter_charts] Wrong rendering of column width with date-time axis

[ThomLen]

When setting an minimum and maximum at DateTimeAxis and only several dates are proven, the bars are rendered way too wide. In the Example, the bars have a range over 10 days (instead of one day)

syncfusion test file:
main.dart.zip

[PreethikaSelvam]

Hi @ThomLen,

We would like to let you know, that the width of the ColumnSeries is determined by the number of visible data points and the axis visible range. For your better understanding, we have attached a demo.

In this demo, we have used a slider that is mapped to the width property in the column series. When the slider value increases or decreases, the series width value will also increase or decrease. This is the default behavior of SfCartesianChart. We have shared the code snippet, sample and demo for your reference below.

Code Snippet:

`

double _sliderValue = 0.7;

 @override

 Widget build(BuildContext context) {

return Scaffold(

  appBar: AppBar(

    backgroundColor: Theme.of(context).colorScheme.inversePrimary,

  ),

  body: Column(

    children: [

      Expanded(

        child: SfCartesianChart(

          legend: const Legend(isVisible: true),

          primaryXAxis: DateTimeAxis(

            minimum: DateTime(2023, 01, 01),

            maximum: DateTime(2023, 02, 01),

            interval: 1,

          ),

          series: <CartesianSeries>[

            ColumnSeries<SalesData, DateTime>(

              width: _sliderValue,

              dataSource: <SalesData>[

                SalesData(DateTime(2023, 01, 05), 28),

                SalesData(DateTime(2023, 01, 20), 40)

              ],

              xValueMapper: (SalesData sales, _) => sales.year,

              yValueMapper: (SalesData sales, _) => sales.sales,

            ),

          ],

        ),

      ),

      Slider(

        activeColor: Colors.blue,

        value: _sliderValue,

        min: 0,

        max: 1,

        onChanged: (newValue) {

          setState(() {

            _sliderValue = newValue;

          });

        },

      ),

`
Please let us know if you have any further needs.

Regards,

Preethika Selvam.
gh1723 (1).zip

[ThomLen]

Hi Preethika,

thanks for the reply! I am aware that I can force the width of the bars using the "width" property. However, since the data is dynamic, setting the width to 0.1, for example, is not a solution, as in other constellations only hairlines are displayed. Controlling via the width property certainly makes sense with data axes, but not with DateTimeAxis, because such a data record only has ONE date. IMHO, displaying a single date over an entire period of time is not logical here.

Regards,
Thomas

[PreethikaSelvam]

Hi @ThomLen,

We would like to let you know that currently we don’t have support to ‘calculate the column width based on intervals in DateTime axis’. However, we have considered your requirement as a new feature and logged feature request for it in our feedback portal.

We will prioritize the features of every release based on demand and priority. So, this feature will be available in any of our upcoming releases. You can also track the status of the feature with the feedback below.

FR Link: https://www.syncfusion.com/feedback/51939

Regards,

Preethika Selvam.

[ThomLen]

Hi Preethika,
thanks for your replay.
My use case is very simple. On a date range of the last 28 days we have a x-axis with these 28 days. The customer has e.g. 3 events in this period. The colums bars are not shown at the 3 dates but as 3 events with a range of e.g. 4 days each. This looks like a big bug to the customer, doesn't it?
I have no way to fix this through settings.

Regards, Thomas

Hi @ThomLen,

We have prepared a workaround sample for your requirement by using the custom column series renderer through the onCreateRenderer callback. If there are more than one data points in the series, the segment width will be decreased for the respective axis labels. We calculated the segment width by determining the difference between the previous axis label and the next label. Furthermore, we reduced the segment width by calculating the difference between the minimum and maximum range using series.sbsinfo, width, and spacing in the ColumnSeries. We have shared code snippet, screenshot, and sample for your reference. Please let us know if you need any further needs.

Code Snippet:

@override
  void transformValues() {
    if (series.dataCount > 1) {
      List<AxisLabel> labels = series.xAxis!.visibleLabels;
      int length = labels.length;
      int index = -1;
      for (int i = 0; i < length; i++) {
        if (labels[i].value == x) {
          index = i;
          break;
        }
      }
      if (index > -1) {
        num diff = index > 1
            ? x - labels[index - 1].value
            : labels[index + 1].value - x;
        series.sbsInfo.minimum = -diff * series.width + series.spacing;
        series.sbsInfo.maximum = diff * series.width + series.spacing;
      }
    }
    super.transformValues();
  }

Screenshot:

Regards,
Lokesh P.

github_1723.zip