[help needed] Cant find a way to build such chart

[dkati]

I have tried everything but still cant understand how to build such thing...
Any suggestions/ideas?

[Hariram-SF4428]

Hi @dkati,

We have analyzed your requirement, and currently, our default RangeColumnSeries does not directly support achieving the desired data label UI. However, we have provided a workaround using the SfCartesianChart to render both ColumnSeries and RangeColumnSeries. The RangeColumnSeries is customized with the onCreateRenderer method by extending the series and segments, which overrides the default paint method to draw data labels inside bordered rectangles above each column. The labels are dynamically positioned and styled using the TextPainter widget for proper alignment and appearance.

For more details, please refer to the following resources that explain how to customize series effectively:

KB Link: How to render a customized column chart (SfCartesianChart)
Blog Link: Spice Up Your Data Visualization with Flutter Charts Series Customization

Please find the attached demo and sample for your reference.

Sample: gh_883.zip
Screenshot:

Regards,
Hariram S