From 2a26441788058d5a9de4db29d0934c7bd668ba86 Mon Sep 17 00:00:00 2001 From: BPraveenBalu Date: Fri, 5 Dec 2025 16:47:16 +0530 Subject: [PATCH 1/2] FLUT-996020-[others]: Added UG content for plotband feature. --- .../plotband_custom_rect.png | Bin 0 -> 10023 bytes .../plotband_custom_text.png | Bin 0 -> 12995 bytes Flutter/cartesian-charts/methods.md | 257 ++++++++++++++++++ 3 files changed, 257 insertions(+) create mode 100644 Flutter/cartesian-charts/images/axis-customization/plotband_custom_rect.png create mode 100644 Flutter/cartesian-charts/images/axis-customization/plotband_custom_text.png diff --git a/Flutter/cartesian-charts/images/axis-customization/plotband_custom_rect.png b/Flutter/cartesian-charts/images/axis-customization/plotband_custom_rect.png new file mode 100644 index 0000000000000000000000000000000000000000..c6d932c3b2bdaca55d122cced107c9ac3db0423d GIT binary patch literal 10023 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 A6#xJL literal 0 HcmV?d00001 diff --git a/Flutter/cartesian-charts/methods.md b/Flutter/cartesian-charts/methods.md index 012cd2b9c..3ec2932b2 100644 --- a/Flutter/cartesian-charts/methods.md +++ b/Flutter/cartesian-charts/methods.md @@ -9,6 +9,263 @@ documentation: ug # Methods in Flutter Cartesian Charts (SfCartesianChart) +## Methods in Plotband + +### drawRect method + +The `drawRect` method is used to customize the appearance of the plotband. + +This following code sample shows how to customize the appearance of the plotband by using drawRect method. + +{% tabs %} +{% highlight dart %} + + late List<_SalesData> _data; + + @override + void initState() { + _data = <_SalesData>[ + _SalesData('Jan', 35), + _SalesData('Feb', 28), + _SalesData('Mar', 34), + _SalesData('Apr', 32), + _SalesData('May', 40), + ]; + super.initState(); + } + + @override + Widget build(BuildContext context) { + final int startIndex = 1; // Feb + final int endIndex = 3; // Apr + + return Scaffold( + body: SfCartesianChart( + primaryXAxis: CategoryAxis( + plotBands: [ + CustomStripedPlotBand( + start: startIndex.toDouble(), + end: endIndex.toDouble(), + color: const Color(0xFFFFF3E0), + opacity: 0.9, + borderColor: Colors.deepOrange, + borderWidth: 1.2, + patternColor: Colors.deepOrange, + stripeOpacity: 0.45, + stripeWidth: 4.0, + stripeSpacing: 10.0, + shouldRenderAboveSeries: true, + ), + ], + ), + series: >[ + LineSeries<_SalesData, String>(), + ], + ), + ); + } + + class _SalesData { + _SalesData(this.year, this.sales); + final String year; + final double sales; + } + + /// Custom striped plot band that draws vertical dashed stripes inside the band. + class CustomStripedPlotBand extends PlotBand { + const CustomStripedPlotBand({ + super.isVisible, + super.start, + super.end, + super.color = const Color(0xFFE0E0E0), + super.opacity, + super.borderColor, + super.borderWidth = 0, + super.shouldRenderAboveSeries, + + // Custom stripe properties + this.patternColor = const Color(0xFF000000), + this.stripeOpacity = 0.25, + this.stripeWidth = 4.0, + this.stripeSpacing = 6.0, + }); + + final Color patternColor; + final double stripeOpacity; + final double stripeWidth; + final double stripeSpacing; + + @override + void drawRect( + Canvas canvas, + Rect rect, + Paint fillPaint, [ + Paint? strokePaint, + ]) { + // Early return if bounds width is invalid + if (rect.width <= 0) { + return; + } + + final paint = Paint() + ..color = patternColor.withOpacity(stripeOpacity) + ..style = PaintingStyle.fill; + + canvas.save(); + canvas.clipRect(rect); + + // Fixed dash pattern based on stripe width + final double dashLength = stripeWidth * 2; + final double gapLength = stripeWidth; + // Calculate number of stripes based on width + final double totalWidth = rect.width; + final double stripeSpacing = (stripeWidth + this.stripeSpacing); + final int numberOfStripes = math.max( + 1, + (totalWidth / stripeSpacing).floor(), + ); + + // Draw stripes + for (int i = 0; i < numberOfStripes; i++) { + final double x = rect.left + (i * stripeSpacing) + (stripeSpacing / 2); + if (x + stripeWidth > rect.right) break; + // Use absolute positioning for Y coordinates + final double yStart = math.min(rect.top, rect.bottom); + final double yEnd = math.max(rect.top, rect.bottom); + // Draw dashed pattern + double currentY = yStart; + bool drawDash = true; + while (currentY < yEnd) { + if (drawDash) { + final double segmentEnd = math.min(currentY + dashLength, yEnd); + canvas.drawRect( + Rect.fromLTWH(x, currentY, stripeWidth, segmentEnd - currentY), + paint, + ); + currentY = segmentEnd; + } else { + currentY = math.min(currentY + gapLength, yEnd); + } + drawDash = !drawDash; + } + } + canvas.restore(); + } + } + +{% endhighlight %} +{% endtabs %} + +![custom plotband appearance](images\axis-customization\plotband_custom_rect.png) + +### drawText method + +The `drawText` method is used to customize the text and text style of the plotband. + +The following code sample shows how to customize the plotband text and text style using the drawText method. + +{% tabs %} +{% highlight dart %} + + late List<_SalesData> _data; + + @override + void initState() { + _data = <_SalesData>[ + _SalesData('Jan', 35), + _SalesData('Feb', 28), + _SalesData('Mar', 34), + _SalesData('Apr', 32), + _SalesData('May', 40), + ]; + super.initState(); + } + + @override + Widget build(BuildContext context) { + final int startIndex = 1; // Feb + final int endIndex = 3; // Apr + + return Scaffold( + body: SfCartesianChart( + primaryXAxis: CategoryAxis( + plotBands: [ + CustomStripedPlotBand( + start: startIndex.toDouble(), + end: endIndex.toDouble(), + color: Colors.orange, + opacity: 0.8, + text: "Custom plotband text", + textStyle: TextStyle( + color: Colors.black, + fontSize: 14, + fontWeight: FontWeight.bold, + ), + shouldRenderAboveSeries: true, + ), + ], + ), + series: >[ + LineSeries<_SalesData, String>(), + ], + ), + ); + } + + class _SalesData { + _SalesData(this.year, this.sales); + final String year; + final double sales; + } + + /// Custom striped plot band that draws vertical dashed stripes inside the band. + class CustomStripedPlotBand extends PlotBand { + const CustomStripedPlotBand({ + super.isVisible, + super.start, + super.end, + super.color, + super.opacity, + super.textAngle, + super.text, + super.textStyle, + super.shouldRenderAboveSeries, + }); + + @override + void drawText(Canvas canvas, Offset position, TextStyle style, int angle) { + if (text == null || text!.isEmpty) { + return; + } + final TextSpan span = TextSpan(text: text, style: style); + final TextPainter textPainter = TextPainter( + text: span, + textAlign: TextAlign.center, + textDirection: TextDirection.ltr, + ); + textPainter.layout(); + if (angle == 0) { + textPainter.paint(canvas, position); + } else { + final double halfWidth = textPainter.width / 2; + final double halfHeight = textPainter.height / 2; + canvas + ..save() + ..translate(position.dx + halfWidth, position.dy + halfHeight) + ..rotate(degreesToRadians(angle.toDouble())); + textPainter.paint(canvas, Offset(-halfWidth, -halfHeight)); + canvas.restore(); + } + } + + double degreesToRadians(double deg) => deg * (pi / 180); + } + +{% endhighlight %} +{% endtabs %} + +![Custom plotband text](images\axis-customization\plotband_custom_text.png) + ## Methods in tooltipBehavior ### Show method in tooltipBehavior From 323e6d0072d947961f439c56c077e460df9bb8a3 Mon Sep 17 00:00:00 2001 From: BPraveenBalu Date: Fri, 5 Dec 2025 16:57:59 +0530 Subject: [PATCH 2/2] FLUT-996020-[others]: Fixed the spell errors on plot band. --- Flutter/cartesian-charts/methods.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/Flutter/cartesian-charts/methods.md b/Flutter/cartesian-charts/methods.md index 3ec2932b2..fe26c3ec8 100644 --- a/Flutter/cartesian-charts/methods.md +++ b/Flutter/cartesian-charts/methods.md @@ -9,13 +9,13 @@ documentation: ug # Methods in Flutter Cartesian Charts (SfCartesianChart) -## Methods in Plotband +## Methods in Plot band ### drawRect method -The `drawRect` method is used to customize the appearance of the plotband. +The `drawRect` method is used to customize the appearance of the plot band. -This following code sample shows how to customize the appearance of the plotband by using drawRect method. +This following code sample shows how to customize the appearance of the plot band by using drawRect method. {% tabs %} {% highlight dart %} @@ -160,9 +160,9 @@ This following code sample shows how to customize the appearance of the plotband ### drawText method -The `drawText` method is used to customize the text and text style of the plotband. +The `drawText` method is used to customize the text and text style of the plot band. -The following code sample shows how to customize the plotband text and text style using the drawText method. +The following code sample shows how to customize the plot band text and text style using the drawText method. {% tabs %} {% highlight dart %}