Multiple charts gradient overlapping the border

Question

Hello, Im making a multiple chart with 2 AreaSeries series, and I have gradients and borders on both of them. The issue is that the colors are mixing and the borders are not on top of the gradient even though Im using

borderDrawMode: BorderDrawMode.top

Sample code:

                        AreaSeries<ChartData, String>(
                            borderColor: Colors.green,
                            borderDrawMode: BorderDrawMode.top,
                            borderWidth: 4,
                            gradient: LinearGradient(
                                begin: Alignment.topCenter,
                                end: Alignment.bottomCenter,
                                colors: [Colors.green.withOpacity(0.7), Colors.green.withOpacity(0.2)]),
                            color: Colors.green,
                            dataSource: chartData1,
                            xValueMapper: (ChartData data, _) => data.x,
                            yValueMapper: (ChartData data, _) => data.y),

 

Lokesh Palani · Accepted Answer

Hi Michael,We would like to inform you that when the borderDrawMode is set to BorderDrawMode.top in the AreaSeries, the border will render only for the top side. You can avoid color overlapping by using the LineSeries above the AreaSeries. We have shared a code snippet, screenshot, and sample for your reference. Please let us know if you have any further needs.UG Link,https://help.syncfusion.com/flutter/cartesian-charts/chart-types/area-chart#border-customization Code Snippet: series: >[ AreaSeries<_SalesData, String>( dataSource: data, borderColor: Colors.green, borderDrawMode: BorderDrawMode.top, borderWidth: 4, gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [ Colors.green.withOpacity(0.7), Colors.green.withOpacity(0.2) ], ), xValueMapper: (_SalesData sales, _) => sales.year, yValueMapper: (_SalesData sales, _) => sales.sales0, ), AreaSeries<_SalesData, String>( dataSource: data, borderColor: Colors.orange, borderDrawMode: BorderDrawMode.top, borderWidth: 4, gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [ Colors.orange.withOpacity(0.7), Colors.orange.withOpacity(0.2) ], ), xValueMapper: (_SalesData sales, _) => sales.year, yValueMapper: (_SalesData sales, _) => sales.sales1, ), LineSeries<_SalesData, String>( dataSource: data, color: Colors.green, width: 4, xValueMapper: (_SalesData sales, _) => sales.year, yValueMapper: (_SalesData sales, _) => sales.sales0, ), LineSeries<_SalesData, String>( dataSource: data, color: Colors.orange, width: 4, xValueMapper: (_SalesData sales, _) => sales.year, yValueMapper: (_SalesData sales, _) => sales.sales1, ), ], Screenshot:Regards,Lokesh P.

Michael Bardon · Answer

Exactly what I was looking for, thanks!

Lokesh Palani · Answer

Hi Michael,Most Welcome. Kindly get
back to us if you have further queries. We are always happy to assist you.Regards,Lokesh P.