StackedBar100Series Data Labels Not Shown When More Than 2 Characters

[Alex]

Hi,

I'm having trouble with data labels not showing when they are more than 2 characters in length on StackedBar100Series.

Here's the code:

import 'package:flutter/material.dart';

import 'package:syncfusion_flutter_charts/charts.dart';

void main() {

  runApp(MaterialApp(

    home: ChartPage(),

  ));

}

class ChartPage extends StatefulWidget {

  @override

  _ChartPageState createState() => _ChartPageState();

}

class _ChartPageState extends State<ChartPage> {

  @override

  void initState() {

    super.initState();

  }

  @override

  Widget build(BuildContext context) {

    List<StackedBarSeries<SingleStackedBarData, String>> chartData = [];

    var data = [

      SingleStackedBarData('Win Ratio', 45, Colors.red),

      SingleStackedBarData('Win Ratio', 132, Colors.blue),

      SingleStackedBarData('Win Ratio', 55, Colors.green),

    ];

    data.forEach((element) => chartData.add(

      StackedBarSeries<SingleStackedBarData, String>(

        color: element.barColor,

        dataSource: [element],

        xValueMapper: (data, _) => data.axisLabel,

        yValueMapper: (data, _) => data.value,

        dataLabelSettings: DataLabelSettings(

          isVisible: true,

        ),

      )

    ));

    return Scaffold(

        appBar: AppBar(),

        body: Container(

          height: 75,

          child: SfCartesianChart(

            plotAreaBorderWidth: 0,

            primaryXAxis: CategoryAxis(isVisible: false),

            primaryYAxis: NumericAxis(isVisible: false),

            series: chartData,

          ),

        )

    );

  }

}

class SingleStackedBarData {

  final String axisLabel;

  final int value;

  final Color barColor;

  SingleStackedBarData(this.axisLabel, this.value, this.barColor);

}

StackedBar100Series - the label for '132' doesn't show

StackedBarSeries - works fine, you can see the label for '132'

[Alex]

Should note that this happens on both Chrome (Version 83.0.4103.61 (Official Build) (64-bit)) and Firefox (76.0.1 (64-bit).

I also thought I'd try using a dataLabelMapper:

        dataLabelMapper: _dataLabelMapper,

String _dataLabelMapper(SingleStackedBarData data, int index) {

  return 10.toString();

}

As expected the data labels are '10' but the middle, which was originally greater than 2 characters, is still missing:

[Sriram Kiran Senthilkumar]

Hi Alex, 

  

Greetings from Syncfusion. We have analyzed your scenario and we are able to replicate the reported issue. We will consider this issue as a bug and will include the fix for the reported issue in the upcoming patch release which is expected to be rolled out on 2^nd June 2020. We will update you once the release is rolled out. We appreciate your patience until then. 

  

Regards, 

Sriram Kiran. 

[Alex]

Thanks Sriram, very fast turn around!

[Sriram Kiran Senthilkumar]

Hi Alex, 

  

Most welcome. As stated earlier, we will update you once the weekly patch release got rolled out.

 

Regards,

Sriram Kiran.

[Sriram Kiran Senthilkumar]

 Hi Alex, 

  

Thanks for your patience. The reported issue regarding the datalabels not rendering properly in the stackedBar100 series is fixed and included in the weekly patch release. To overcome the reported issue, kindly upgrade the chart widget package below. 

 https://pub.dev/packages/syncfusion_flutter_charts/versions/18.1.55 

  

Regards, 

Sriram Kiran. 

[Alex]

Brilliant. That's working now. Thanks Sriram

[Sriram Kiran Senthilkumar]

Hi Alex, 

  

Most welcome. We are always happy in assisting you. Kindly revert us if you have further queries. 

  

Regards, 

Sriram Kiran