Rounded rectangle shape in marker of lineSeries, and using custom widget inside marker

Question

Hello, i wanted to use a custom widget inside a lineSeries, inside a sfCartesianChart, but the only avalaible option is to use an image as a child, and not a custom widget. Also, is there a way to apply rounded corners to the rectangle shape? Thank you!

  markerSettings: MarkerSettings(
              shape: DataMarkerType.rectangle,
              isVisible: true,
              width: 15,
              height: 15,
              color: Color.fromARGB(255, 105, 113, 124),            
            ),

Hariharasudhan Kanagaraj · Answer

Hi Marco,We would like to inform you that there is no option to render the rounded rectangle as marker using the markerSettings property. However, you can add the custom widgets inside the line series using the builder property in the DataLabelSettings and here, we have displayed the rounded rectangle instead of marker using the Container widget in the builder property as shown in the code snippet below. class _MainAppState extends State { late List<_ChartSampleData> _data; @override void initState() { _data = [ _ChartSampleData(10, 30), _ChartSampleData(20, 40), _ChartSampleData(30, 10), _ChartSampleData(40, 70), _ChartSampleData(50, 30), _ChartSampleData(60, 60), _ChartSampleData(70, 80), _ChartSampleData(80, 50), _ChartSampleData(90, 20), _ChartSampleData(100, 50), ]; super.initState(); } @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: SfCartesianChart( primaryXAxis: NumericAxis(), primaryYAxis: NumericAxis(), series: >[ LineSeries<_ChartSampleData, num>( dataSource: _data, xValueMapper: (_ChartSampleData sales, _) => sales.x, yValueMapper: (_ChartSampleData sales, _) => sales.y, dataLabelSettings: DataLabelSettings( isVisible: true, labelAlignment: ChartDataLabelAlignment.middle, builder: (dynamic data, dynamic point, dynamic series, int pointIndex, int seriesIndex) { return Container( height: 10, width: 20, decoration: const BoxDecoration( color: Colors.red, borderRadius: BorderRadius.all( Radius.circular(3), ), ), ); }, ), ) ], ), ), ); } } Snapshot:Also attached the sample below for your reference and you can modify the sample according to your needs. If you have further queries, please get back to us. Regards, Hari Hara Sudhan. K.Attachment: _184001_1977c5e2.zip