Only one data, the chart line is too small

[BonyYeah]

I use the SfCartesianChart, When it have only one data and the first data, the line be too small, how can I fix it？
First data (error line width)

Other data(right line width)

[AswiniDileep]

Hi @BonyYeah,

We have checked the reported issue and attempted to replicate it using the SfCartesianChart with ColumnSeries. However, we were unable to reproduce the issue in the syncfusion_flutter_charts package to latest version https://pub.dev/packages/syncfusion_flutter_charts/versions/28.1.38.

However, we have ensured the scenarios mentioned with the latest version but are unable to replicate the issue.

1. Ensured with windows, web and android.
2. Tested with all axis type for primaryXAxis
3. Tested with one data point and tried with empty points.
4. Tested by setting minimum and maximum range.

We recommend you upgrade to the latest version, and if you are still experiencing the issue, we request you to replicate it in the attached sample and provide us with more details regarding the specific scenario in which you encounter this issue. This will help us to assist you more effectively.

Regards,
Aswini S.

Sample:
GH_2239.zip

[BonyYeah]

Hi @AswiniDileep
Thank you for you reply! I used your sample to test, it doesn't appear, but I changed the CategoryAxis to DateTimeAxis, and set the minimum and maximum, also the data list only one data, it appear what I met first. Here is my code:

final List<ChartData> chartData = [
      ChartData("2024-01-01 00:00", 35),
    ];
    var minAxisDate = DateTime(2024, 1, 1);
    var maxAxisDate = DateTime(2024 + 1, 1, 1).subtract(Duration(days: 1));

    return Center(
      child: SfCartesianChart(
        primaryXAxis: DateTimeAxis(
          labelRotation: -20,
          minimum: minAxisDate,
          maximum: maxAxisDate,
          plotOffset: 12,
        ),
        primaryYAxis: NumericAxis(
          maximumLabels: 5,
        ),
        series: <CartesianSeries<ChartData, DateTime>>[
          ColumnSeries<ChartData, DateTime>(
            dataSource: chartData,
            xValueMapper: (ChartData data, i) {
              return DateFormat('yyyy-MM-dd HH:mm').parse(data.x ?? "");
            },
            yValueMapper: (ChartData data, _) {
              if (data.y != null) {
                return data.y;
              }
            },
          )
        ],
      ),
    );

And the screenshot:

I'm looking forward to your reply. Thank you!

[SpotHenrik]

Facing the exact same issue using SfCartesianChart, DateTimeAxis and ColumnSeries like in @BonyYeah 's example

[Baranibharathip]

Hi @BonyYeah,

Query 1: Thin Bar in Column Series with One Data Point

We have reviewed your query and we would like to inform you are using a ColumnSeries with only one data point, the entire chart plot area is allocated to that single point, making the column appear thin due to setting minimum and maximum values for the axis, the available width is evenly distributed among all possible segments within the specified range. This is how DateTimeAxis behaves it divides the space equally based on the provided minimum and maximum values. Due to this the width of segment for one data point in column series is thin. This is the excepted behavior.

Query 2: Also one thing I noticed, the chart assumes that the data is in December and the other column is in January, but looking at the data does not really match that

We have ensured your query and ensured the below cases.

• Ensured with both DateTimeAxis and DateTimeCategoryAxis
• Enabled enableSideBySideSeriesPlacement with true and false.
• Ensured with different values x and y values
• Ensured with same x values with different y values

However, we were unable to reproduce it in our end. Please check the attached sample, and if you are still experiencing the issue, we request that you replicate it in the attached sample and provide us with more details regarding the specific scenario in which you are encountering this issue. This will help us to assist you more effectively.

Query 3: DateTimeCategoryAxis not working fine with Minimum and Maximum Values

We would like to inform you that indexed axes perform based on the given data points, and the minimum and maximum values are updated according to the provided data range. In your case, the chart will always display only one column when there is a single data point, regardless of the minimum and maximum values set. These parameters become relevant only when multiple data points are present in the chart.

final List<ChartData> chartData = [
    ChartData("2024-01-01 00:00", 35),
    ChartData("2024-02-01 00:00", 35),
    ChartData("2024-03-01 00:00", 35),
    ChartData("2024-04-01 00:00", 35),
    ChartData("2024-05-01 00:00", 35),
  ];
 DateTime minAxisDate = DateTime(2024, 1, 1);
 DateTime maxAxisDate = DateTime(2024, 3, 1);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SfCartesianChart(
          primaryXAxis: DateTimeCategoryAxis(
            minimum: minAxisDate,
            maximum: maxAxisDate,
            plotOffset: 12,
          ),
        ),
      ),
    );
  }

Let me know if you need further assistance.

Sample : GH_2239.zip

Regards,
Baranibharathi P.

[LavanyaGowtham2021]

Please reopen this ticket, if you need further assistance with this.