radial gauge
Hi Sao,
We have analyzed your query and we need some clarifications regarding your requirement. The mentioned sample can be achieved through the RadialBar Series in the SfCircularChart and whether you need to implement this sample using the SfRadialGauge?
However, we have implemented a simple workaround sample using the RadialBar series in the SfCircularChart and attached the sample browser link for the mentioned sample below in the SfCircularChart.
SB: https://flutter.syncfusion.com/#/circular-charts/chart-types/radial-bar/default
Kindly refer the code snippet below:
|
SfCircularChart( legend: const Legend( isVisible: true, ), series: <CircularSeries<ChartSampleData, String>>[ RadialBarSeries<ChartSampleData, String>( maximumValue: 15, dataLabelSettings: const DataLabelSettings( isVisible: true, textStyle: TextStyle(fontSize: 10.0), ), dataSource: <ChartSampleData>[ ChartSampleData( x: 'John', y: 10, pointColor: Colors.amber, ), ChartSampleData( x: 'Almaida', y: 11, pointColor: Colors.blue, ), ChartSampleData( x: 'Don', y: 12, pointColor: Colors.red, ), ChartSampleData( x: 'Tom', y: 13, pointColor: Colors.green, ), ], xValueMapper: (ChartSampleData sales, _) => sales.x, yValueMapper: (ChartSampleData sales, _) => sales.y, cornerStyle: CornerStyle.bothCurve, gap: '10%', radius: '90%', pointColorMapper: (ChartSampleData data, _) => data.pointColor, dataLabelMapper: (ChartSampleData data, _) => data.y.toString(), ), ], ), |
Snapshot:
Also attached the sample below for your reference and if you have further queries, please get back to us.
Regards,
Hari Hara Sudhan. K
Attachment: 183453_adc3ea6a.zip
