Unable to customize the Radial chart size.

[AkshayCS11]

Bug description

Unable to customize the Radial chart size and not have the feature to increase the stroke width.

Steps to reproduce

Pass 20 values of data to xvalueMapper and yvaluemapper. Values should be in 8 digits

Code sample

SfCircularChart(
tooltipBehavior: TooltipBehavior(
enable: true,
format: 'point.x : point.y',
),
series: [
RadialBarSeries<ChartData, String>(
strokeWidth: 40,
radius: '100%',
innerRadius: '5%',
cornerStyle: CornerStyle.endCurve,
enableTooltip: true,
name: 'RadialBar',
sortingOrder: SortingOrder.descending,
dataSource: convertToChartData(
List<Map<String, dynamic>>.from(
structuredData)),
xValueMapper: (ChartData data, _) =>
data.x.toString(),
yValueMapper: (ChartData data, _) =>
data.y,
dataLabelMapper: (ChartData data, _) =>
data.x,
dataLabelSettings:
const DataLabelSettings(
isVisible: true,
labelPosition:
ChartDataLabelPosition.outside,
textStyle: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.grey),
),
),
],
),

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Stack Traces

On which target platforms have you observed this bug?

Web, Windows

Flutter Doctor output

No errors

[AkshayCS11]

We need to increase the radius size above 100 to make the chart larger. Then the label part is partially displaying

[Hariram-SF4428]

Hi @AkshayCS11,

Query 1: To customize radial chart size
The size of the radial chart can be increased up to 100 by adjusting the radius property in series. If you need to increase the radius beyond 100, you will need to enlarge the size of the parent widget containing the chart.

UG: Radial bar Chart in Flutter Circular Charts widget | Syncfusion

Query 2: To increase the stroke width
You can achieve this requirement by setting strokeColor to the radial series. By default the stroke color is transparent, so it will not render the stoke for segment.

Code snippet:

    SfCircularChart(
      series: [
        RadialBarSeries<ChartData, String>(
          strokeWidth: 1,
          strokeColor: Colors.black,
          xValueMapper: (ChartData data, _) => data.x.toString(),
          yValueMapper: (ChartData data, _) => data.y,
          ...
          ...
          ...
        ),
      ],
    );
    

We have attached a sample for your reference, if you have any further queries, please get back to us. We are always happy to assist you.

Sample: gh_2056.zip

Regards,
Hariram S