CartesianChartPoint issue
Hi Bar,
Query 1: To calculate plot area width.
We have achieved your requirement regarding ‘To calculate plot area width’ by using the onCreateRenderer property in the ColumnSeries. By using this, you can get the ColumnSeries size in the performLayout method. Additionally, we have displayed ColumnSeries size by using TextField Widget. We have provided a code snippet and a sample for your reference. You can customize the sample according to your requirements. Also, you can refer the sample we provided on January 22, 2024, to calculate the plot area width using the axis visible range in a addPostFrameCallback.
Code Snippet:
|
TextEditingController _controller = TextEditingController();
class _MyHomePageState extends State<_MyHomePage> { List<_SalesData> data = [ _SalesData(DateTime(2000, 01, 01), 35), _SalesData(DateTime(2000, 01, 05), 28), _SalesData(DateTime(2000, 01, 10), 34), _SalesData(DateTime(2000, 01, 15), 32), _SalesData(DateTime(2000, 01, 20), 40) ];
_CustomColumnSeriesRenderer<_SalesData, DateTime>? _seriesRenderer;
@override void initState() { _seriesRenderer = _CustomColumnSeriesRenderer(updateTextField: updateText); super.initState(); }
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Syncfusion Flutter chart'), ), body: Column( children: [ SfCartesianChart( primaryXAxis: const DateTimeAxis(), primaryYAxis: const NumericAxis(), series: <CartesianSeries<_SalesData, DateTime>>[ ColumnSeries<_SalesData, DateTime>( dataSource: data, xValueMapper: (_SalesData sales, _) => sales.x, yValueMapper: (_SalesData sales, _) => sales.y, name: 'Sales', animationDuration: 0, onCreateRenderer: (ChartSeries<dynamic, dynamic> series) { return _seriesRenderer!; }, ) ], ), TextField( controller: _controller, ) ], ), ); }
void updateText(String newText) { SchedulerBinding.instance.addPostFrameCallback( (timeStamp) { _controller.text = newText; }, ); } }
class _CustomColumnSeriesRenderer<ChartData, DateTime> extends ColumnSeriesRenderer<ChartData, DateTime> { num? plotAreaWidth; num? plotAreaHeight; Function(String) updateTextField;
_CustomColumnSeriesRenderer({ required this.updateTextField, });
@override void performLayout() { super.performLayout(); plotAreaHeight = size.height; plotAreaWidth = size.width; updateTextField('Plot Area Width: $plotAreaWidth, Height: $plotAreaHeight'); } } |
Screenshot:
Query 2: To calculate chart area width.
We have achieved your requirement regarding ‘To calculate chart area width’ by using the ‘_updateChartSize’ method, where we retrieve the size of the chart area by accessing its render box through the global key. It then extracts the width and height from this size and updates a text field. We have provided a code snippet and a sample for your reference. You can customize the sample according to your requirements.
Code Snippet:
|
TextEditingController _controller = TextEditingController();
class _MyHomePageState extends State<_MyHomePage> { final GlobalKey<SfCartesianChartState> _chartKey = GlobalKey();
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Syncfusion Flutter chart'), ), body: Column( children: [ Expanded( child: SfCartesianChart( key: _chartKey, primaryXAxis: const DateTimeAxis(), primaryYAxis: const NumericAxis(), series: <CartesianSeries<_SalesData, DateTime>>[ ColumnSeries<_SalesData, DateTime>( dataSource: data, xValueMapper: (_SalesData sales, _) => sales.x, yValueMapper: (_SalesData sales, _) => sales.y, name: 'Sales', animationDuration: 0, ) ], ), ), TextField( controller: _controller, readOnly: true, decoration: const InputDecoration( labelText: 'Chart Size', border: OutlineInputBorder(), ), ) ], ), ); }
@override void initState() { super.initState(); WidgetsBinding.instance.addPostFrameCallback((_) { _updateChartSize(); }); }
void _updateChartSize() { final RenderBox renderBox = _chartKey.currentContext!.findRenderObject() as RenderBox; final chartSize = renderBox.size; final width = chartSize.width; final height = chartSize.height; _controller.text = 'Chart Width: $width, Height: $height'; } } |
Screenshot:
Please let us know if you need any further assistance.
Regards,
Preethika Selvam.
Attachment: 186186_8d5ae3c5.zip
