Dynamic border radius for StackedColumnSeries

[Serproger]

We want to implement a plot according to attached design. Your library syncfusion_flutter_charts almost allows to do it, but we have a question.

We need to add border radius only to a top series of data in each column (and this series can be different for each column). As we can see, currently class StackedColumnSeries allows to add border radius only as a double, therefore it can only be set simultaneously for all the records belonging to one series. We don't have any builder function that allows to set border radius depending on column. Could you please elaborate on this problem and tell us how such a result can be achieved?

[Serproger]

Here is the sample of code we have written to build a plot

      SfCartesianChart(
          plotAreaBorderWidth: 0,
          margin: EdgeInsets.zero,
          primaryXAxis: CategoryAxis(
              axisLine: const AxisLine(color: Color(0xFFE5E5E5)),
              labelStyle:
                  const TextStyle(color: Color(0xFF898989), fontSize: 12),
              majorTickLines: const MajorTickLines(width: 0),
              majorGridLines: const MajorGridLines(width: 0)),
          primaryYAxis: NumericAxis(
              axisLine: const AxisLine(color: Color(0xFFE5E5E5)),
              labelStyle:
                  const TextStyle(color: Color(0xFF898989), fontSize: 12),
              majorTickLines: const MajorTickLines(width: 0),
              majorGridLines: const MajorGridLines(
                  dashArray: [2, 3], color: Color(0xFFDADADA))),
          palette: [newWordsColor, repeatedWordsColor, learnedWordsColor],
          legend: Legend(
              isVisible: true,
              alignment: ChartAlignment.near,
              position: LegendPosition.bottom,
              orientation: LegendItemOrientation.vertical,
              itemPadding: 0,
              offset: Offset.zero,
              legendItemBuilder: (text, series, point, seriesIndex) {
                return Padding(
                    padding: const EdgeInsets.symmetric(vertical: 6),
                    child: Row(
                      mainAxisSize: MainAxisSize.min,
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Container(
                            width: 17,
                            height: 17,
                            decoration: BoxDecoration(
                                color: series.color,
                                borderRadius: BorderRadius.circular(10))),
                        const SizedBox(width: 8),
                        Text(series.legendItemText,
                            style: Theme.of(context).textTheme.bodyMedium)
                      ],
                    ));
              }),
          series: <ChartSeries>[
            StackedColumnSeries<WordsChartGroupData, String>(
                dataSource: chartData,
                animationDuration: 0,
                color: newWordsColor,
                spacing: 0.1,
                borderRadius: const BorderRadius.all(Radius.circular(10)),
                dataLabelSettings: const DataLabelSettings(
                    isVisible: true,
                    showZeroValue: false,
                    labelIntersectAction: LabelIntersectAction.shift,
                    overflowMode: OverflowMode.hide,
                    textStyle: TextStyle(color: Colors.white, fontSize: 10),
                    labelAlignment: ChartDataLabelAlignment.middle),
                xValueMapper: (data, _) => data.title,
                yValueMapper: (data, _) => data.newWords),
            StackedColumnSeries<WordsChartGroupData, String>(
                dataSource: chartData,
                animationDuration: 0,
                color: repeatedWordsColor,
                spacing: 0.1,
                borderRadius: const BorderRadius.all(Radius.circular(10)),
                dataLabelSettings: const DataLabelSettings(
                    isVisible: true,
                    showZeroValue: false,
                    labelIntersectAction: LabelIntersectAction.shift,
                    overflowMode: OverflowMode.none,
                    textStyle: TextStyle(
                        color: ColorResources.primaryText, fontSize: 10),
                    labelAlignment: ChartDataLabelAlignment.middle),
                xValueMapper: (data, _) => data.title,
                yValueMapper: (data, _) => data.repeatedWords),
            StackedColumnSeries<WordsChartGroupData, String>(
                dataSource: chartData,
                animationDuration: 0,
                color: learnedWordsColor,
                spacing: 0.1,
                borderRadius: const BorderRadius.all(Radius.circular(10)),
                dataLabelSettings: const DataLabelSettings(
                    isVisible: true,
                    showZeroValue: false,
                    labelIntersectAction: LabelIntersectAction.shift,
                    overflowMode: OverflowMode.none,
                    textStyle: TextStyle(color: Colors.white, fontSize: 10),
                    labelAlignment: ChartDataLabelAlignment.middle),
                xValueMapper: (data, _) => data.title,
                yValueMapper: (data, _) => data.learnedWords),
          ])

class WordsChartGroupData {
  WordsChartGroupData(
      this.title, this.newWords, this.repeatedWords, this.learnedWords);
  final String title;
  final int newWords;
  final int repeatedWords;
  final int learnedWords;
}

[sfHariHaraSudhan]

Hi @Serproger,

To implement the border radius for the last stacked column alone, we have added the borderRadius property inside the StackedColumnSeries to the last series alone. Here we have added the border radius only to the top left and top right of the stacked column. In this way, you can achieve your expected output by applying the border radius to the last series alone.

Kindly review this code snippet:

StackedColumnSeries<ChartSampleData, num>(
  dataSource: [
    ChartSampleData(10, 05),
    ChartSampleData(20, 10),
    ChartSampleData(30, 15),
  ],
  borderRadius: const BorderRadius.only(
    topLeft: Radius.circular(10),
    topRight: Radius.circular(10),
  ),
  xValueMapper: (data, _) => data.x,
  yValueMapper: (data, _) => data.y,
),

Snapshot:

Also, we have attached sample below for your reference.

Regards,
Hari Hara Sudhan. K

473877.zip

[pandazed]

I have two problems with it

1. If you have big and small values in the last series, rounded edges will look different.
   For example

StackedColumnSeries<ChartSampleData, num>(
            dataSource: [
              ChartSampleData(10, 20),
              ChartSampleData(20, 1),  // rounded edges will look different here
              ChartSampleData(30, 60),
            ],
            borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(10),
              topRight: Radius.circular(10),
            ),
            xValueMapper: (data, _) => data.x,
            yValueMapper: (data, _) => data.y,
          ),

2. It doesn't works if you have zero value in last series in one of the column.
   See my comment in your code:

StackedColumnSeries<ChartSampleData, num>(
              dataSource: [
                ChartSampleData(10, 20),
                ChartSampleData(20, 30),
                ChartSampleData(30, 40),
              ],
              xValueMapper: (data, _) => data.x,
              yValueMapper: (data, _) => data.y),
          StackedColumnSeries<ChartSampleData, num>(
              dataSource: [
                ChartSampleData(10, 0),
                ChartSampleData(20, 50),
                ChartSampleData(30, 70),
              ],
              xValueMapper: (data, _) => data.x,
              yValueMapper: (data, _) => data.y),
          StackedColumnSeries<ChartSampleData, num>(
            dataSource: [
              ChartSampleData(10, 05),
              ChartSampleData(20, 0),  
              //if you have zero value here, column "20" will not be rounded. It will not round value from previous series
              ChartSampleData(30, 15),
            ],
            borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(10),
              topRight: Radius.circular(10),
            ),
            xValueMapper: (data, _) => data.x,
            yValueMapper: (data, _) => data.y,
          ),

In Serproger's example, if he will use borderRadius on green series, all others will be without rounded edges. If he will use borderRadius on gray series and green series, there will be ugly artifacts in the last column

Suggest we need ability to make border radius on whole column, not for one of series

[woolseym]

This is still an issue. I can set the radius of the top series but if there is no data for that series on that bar then the next series won't apply the radius now that it is the top one. This can be seen in the pic for the 4/26/2024 bar. Any chance this could be updated to apply to the whole bar like @pandazed suggested? Or at least reopened to be revisited.

[Scerbelo12]

Apparently they just decided to ignore this one...