Horizontal bands area on the charts

Question

I've been working with the Flutter package syncfusion_flutter_charts. I've been enjoying it but even after trying to search through the documentation, I don't know how to do some of the part of the chart I need for my application:

Here's a screenshot of the current state of my application:

And here's how it should be at the end:

Don't mind the bullet points, I would like to know how to make the chart background grey between 0 and 140 and between 180 and more.

And I would also like to know if it's possible to create those red areas in the "white" area.

Answer 1

We would like to share some information regarding the plot band feature with which you can shade difference ranges in the plot area with different colours to improve the readability of the chart. So, in order to shade the chart background to grey for a certain range, you can use the plot band feature. Please refer the code snippet below for further reference.

SfCartesianChart(
   primaryYAxis: NumericAxis( 
                  // renders plot band between 65 and 140 in grey color.
                  plotBands: [
                    PlotBand(
                        shouldRenderAboveSeries: false,
                        start: 65,
                        end: 140,
                        color: Colors.grey,
                        opacity: 0.3)
                  ]
   ),
)

Screenshot:

For further reference on the plot band feature, please check the user guide below. https://help.syncfusion.com/flutter/cartesian-charts/axis-customization#plot-bands

Also regarding this query “to create those red areas in the "white" area”, we have created a workaround sample in which we have used annotation feature available in our chart widget to render the red area as a indication for the point that is going above the grey area. In the workaround sample, we have drawn a custom curve shape with the help of custom painter and rendered that shape at the necessary points in the chart with the help of the annotation feature. We have also attached the workaround sample below for your reference. Sample: https://drive.google.com/file/d/1sMtY12GoSvaSXefaxmLafr1xTm_R7_b_/view?usp=sharing