Flutter Syncfusion Chart - DataLabel is appearing in vertical form

Question

I want to show High and Low price on chart. I am using syncfusion(https://pub.dev/packages/syncfusion_flutter_charts) chart library of flutter and builder property of DataLabelSettings, But sometime value is appear in vertical form, I am not able to understand why is this happening. Below is the code I am using for same.

DataLabelSettings(
        isVisible: true,
        alignment: ChartAlignment.far,
        showZeroValue: false,
        builder: (dynamic data, dynamic point, dynamic series, int pointIndex,
            int seriesIndex) {
          double max = widget.pricesData
              ?.reduce((value, element) => value > element ? value : element);

          double min = widget.pricesData
              ?.reduce((value, element) => value < element ? value : element);

          print('max chart: ${max.toString()}');
          print('min chart: ${min.toString()}');
          if (data['value'] == max) {
            return Text(
              data['value'].toString(),
              overflow: TextOverflow.clip,
              style: TextStyle(
                fontSize: 10.0,
                fontWeight: FontWeight.bold,
              ),
            );
          } else if (data['value'] == min) {
            return Text(
              data['value'].toString(),
              style: TextStyle(fontSize: 10.0, fontWeight: FontWeight.bold),
            );
          }

          return null;
        });

SfCartesianChart(
                plotAreaBorderWidth: 0,
                enableAxisAnimation: true,

                zoomPanBehavior: ZoomPanBehavior(enablePanning: true),
                // Initialize category axis
                primaryXAxis: NumericAxis(
                  isVisible: false,
                  //labelFormat: '{value}kk'.toString().substring(2),
                ),
                primaryYAxis: NumericAxis(
                  isVisible: false,
                ),
                //tooltipBehavior: customTooltipBehavior(),
                trackballBehavior: _trackballBehavior,
                //legend: _buildLegend(),
                series: <LineSeries<Map, dynamic>>[
          LineSeries<Map, dynamic>(
              // Bind data source
              dataSource: widget.chartData,
              dataLabelSettings: _buildDataLabelSetting(),
              xValueMapper: (Map chartData, _) => chartData['time'],
              yValueMapper: (Map chartData, _) => chartData['value'])
        ])

Here's the screenshot of Chart. It would be great if we have direct option to show low and high value.

Answer 1

Greetings from Syncfusion. We have analyzed your query and we would like to share the following changed code snippet from yours. For templates, the width and height of the widget must be given in the sample to avoid this issue. By default, if the template widget is rendered beyond the plot area then it hides that template, so without giving the size of the template will show a data label template like this is vertical form. Please make use of the below code snippet to avoid the issue.

DataLabelSettings(
    isVisible: true,
    alignment: ChartAlignment.far,
    showZeroValue: false,
    builder: (dynamic data, dynamic point, dynamic series, int pointIndex,
        int seriesIndex) {
      double max = widget.pricesData
          ?.reduce((value, element) => value > element ? value : element);

      double min = widget.pricesData
          ?.reduce((value, element) => value < element ? value : element);

      print('max chart: ${max.toString()}');
      print('min chart: ${min.toString()}');
      if (data['value'] == max) {
      // Given width and height for the container
      return Container(
          width: 30,
          height: 30,
          child:Text(
          data['value'].toString(),
          overflow: TextOverflow.clip,
          style: TextStyle(
            fontSize: 10.0,
            fontWeight: FontWeight.bold,
          ),
         ),
        );
      } else if (data['value'] == min) {
      // Given width and height for the container
      return Container(
          width: 30,
          height: 30,
          child:Text(
          data['value'].toString(),
          style: TextStyle(fontSize: 10.0, fontWeight: FontWeight.bold),
        ), 
       );
      }

      return null;
    });

Please revert us if you need further assistance.

Thanks, Dharanitharan. P