I would like to create two plot bands as in the image, one for "Today" and the other for the avg, and I faced a few issues.
For today line:
I'm unable to customize the text such as the background, it would be great to have a builder similar to annotations. Also, I'm unable to achieve the exact positioning notice that the text is outside the plot area.
For the avg line:
I want the line to take the full plot area width with text to the right of the line. The plot band by default takes the full width but the text is not visible.
Hi Abdulaziz,
Query 1: I'm unable to customize the text such as the background, it would be great to have a builder similar to annotations. Also, I'm unable to achieve the exact positioning notice that the text is outside the plot area.
You can customize the plot band text background color using the textStyle property in plotband. We would like to let you know that the plot band rendering only with the plot area, there is no support to render outside the plot area.
Query 2: I want the line to take the full plot area width with text to the right of the line. The plot band by default takes the full width but the text is not visible.
You can display the plot band text at right side by setting the horizontalTextAlignment value to TextAnchor.end in plotband.
Please refer the following code snippet.
|
SfCartesianChart( primaryXAxis: NumericAxis(plotBands: [ PlotBand( start: 3, end: 3, borderWidth: 1, borderColor: Colors.black, text: 'Today', verticalTextAlignment: TextAnchor.start, textAngle: -45, horizontalTextPadding: '-2.5%', textStyle: const TextStyle( backgroundColor: Colors.blue, color: Colors.white), ) ]), primaryYAxis: NumericAxis(plotBands: [ PlotBand( start: 400, end: 400, borderWidth: 1, borderColor: Colors.black, text: 'AVG', horizontalTextAlignment: TextAnchor.end, textStyle: const TextStyle( backgroundColor: Colors.blue, color: Colors.white), ) ]), ….. ], ), |
Regards,
Lavanya A.
