Is there a limit on custom data labels?

[Julian Meier]

Hi there,

I am currently building a chart with 17 horizontal spline series which have a fixed vertical interval of 50 points. Each spline series shows 18 custom data labels (arrows). Up until the 9th spline series everything is working as expected (see screenshot 1). When I add the 10th spline series, all data labels disappear and only their dashed lines remain (see screenshot 2).

Is there a limit on how  many data labels can be shown?

Or maybe is there a debug mode which allows checking if there are any errors occurring inside the chart that might help pinpoint the error?

Thanks a lot for your help!

Kind regards,

Julian Meier

Here is my chart code:

SfCartesianChart(

              key: UniqueKey(),

              margin: const EdgeInsets.symmetric(

                horizontal: 2.5,

              ),

              plotAreaBorderWidth: 0,

              primaryXAxis: NumericAxis(

                isVisible: false,

              ),

              primaryYAxis: NumericAxis(

                isVisible: true,

                isInversed: true,

                labelPosition: ChartDataLabelPosition.inside,

                labelAlignment: LabelAlignment.end,

                labelStyle: Theme.of(context)

                    .textTheme

                    .merge(

                      const TextTheme(

                        overline: TextStyle(

                          fontSize: 10,

                          color: Colors.white54,

                        ),

                      ),

                    )

                    .overline,

                maximum: maximum,

                minimum: minimum,

                axisLine: const AxisLine(

                  width: 0,

                ),

                majorGridLines: const MajorGridLines(

                  width: 0,

                ),

                majorTickLines: const MajorTickLines(

                  size: 0,

                ),

                minorGridLines: const MinorGridLines(

                  color: Colors.white12,

                ),

                minorTickLines: const MinorTickLines(

                  width: 0,

                ),

                interval: 100,

              ),

              series: [

                SplineSeries<ForecastHour, int>(

                  dataSource: hours,

                  xValueMapper: ((data, index) => index),

                  yValueMapper: ((data, index) => 200),

                  color: Colors.red,

                  opacity: 0.1,

                  dataLabelSettings:

DataLabelSettings(

        isVisible: true,

        labelAlignment: labelAlignment,

        builder: (

          dynamic data,

          dynamic point,

          dynamic series,

          int pointIndex,

          int seriesIndex,

        ) {

          final ForecastHour hour = data;

          final threeHoursCondition =

              !isHourly && pointIndex > 1 && pointIndex % 3 == 2;

          final hourlyCondition =

              isHourly && pointIndex > 0 && pointIndex % 9 == 6;

          if (threeHoursCondition || hourlyCondition) {

            final value = hour.windDirection1000;

            final arrowColor = Colors.white;

            return Transform.translate(

              offset: Offset.zero,

              child: DirectionArrow(

                direction: value,

                size: 15,

                arrowColor: arrowColor,

              ),

            );

          }

          return Container();

        },

      )

,

                ),

// The rest of the spline series is the same as above just with a differr just a variation of the above

              ],

            )

Attachment: Screenshots_2ebe10c0.zip

[Julian Meier]

Apparently it has something to do with tickPosition. Once I remove it, everything works as expected.

However, this introduces a new problem:

I want the chart to extend from edge to edge (without any padding).

By removing tickPosition a padding is shown on the left side.

How do I make that go away?

Attachment: Screenshot.png_fc054053.zip

[Julian Meier]

After some deeper investigation I came to the conclusion that it would be perfect to have DataLabelSetting's that allowed to make each data label independent from its neighbors.

By that I mean that it would behave like a positioned element (overlapping other data labels and chart elements if necessary) so that I could have full control over how and how many data labels are shown.

Is there any way I could accomplish the described above already?

If not, is there any chance this could find it's way into Syncfusion Flutter Charts sometime soon?

For now I am stuck with working around this functionality by adding custom widgets above the charts using IgnorePointer widgets as wrappers to continue allowing interaction with the chart.

I would very much appreciate if you could implement this functionality or point me in the right direction so I can solve this issue without hacky workarounds.

Thanks a lot!

[Julian Meier]

After another investigation I have finally found a solution:

Instead of using data labels I now use annotation which do not care about overlapping etc.

Also I found a way to fix the left side padding: I had to set both major and minor tick line sizes and widths to 0.

[Yuvaraj Gajaraj]

Hi Julian,

We are happy to hear that the solution was found by yourself. If you have any further queries, please get back to us. We are always happy to assist you.

Regards,

Yuvaraj.