[syncfusion_flutter_charts] ColumnSeries with negative values #1944
Description
Use case
Hi.
The syncfusion_flutter_charts is good. I don't have any issue with it.
But in my case, my datas has both positive and negative. The negative brings some unexpected UI:
- The data label overlap on chart
- BorderRadius is set on topRight and topLeft. But with nevative, I think it is better if it is auto set on bottomRight and bottomLeft, or any function to do it.
Proposal
Here is my code test:
Widget testChart() {
List<_SalesData> foreignData = [
_SalesData('Jan', 35),
_SalesData('Feb', -28),
_SalesData('Mar', 50),
_SalesData('Apr', -32),
_SalesData('May', 40),
_SalesData('Jun', 40),
_SalesData('Jul', -20),
];
return Container(
height: 200,
child: SfCartesianChart(
borderWidth: 0,
borderColor: Colors.transparent,
plotAreaBorderColor: Colors.transparent,
plotAreaBorderWidth: 0,
primaryXAxis: CategoryAxis(
rangePadding: ChartRangePadding.auto,
majorTickLines: const MajorTickLines(color: Colors.transparent),
majorGridLines: MajorGridLines(
width: 0.1,
color: Colors.white.withOpacity(0.2),
),
axisLine: AxisLine(
color: Colors.white.withOpacity(0.3),
width: 0.2,
),
labelStyle: TextStyle(
fontFamily: kFontName,
fontSize: 10,
color: Colors.white.withOpacity(0.5),
fontWeight: FontWeight.normal,
),
),
primaryYAxis: NumericAxis(
opposedPosition: true,
majorGridLines: MajorGridLines(
width: 0.1,
color: Colors.white.withOpacity(0.2),
),
majorTickLines: const MajorTickLines(color: Colors.transparent),
axisLine: const AxisLine(
width: 0,
color: Colors.transparent,
),
labelStyle: TextStyle(
fontFamily: kFontName,
fontSize: 10,
color: Colors.white.withOpacity(0.5),
fontWeight: FontWeight.normal,
),
numberFormat: NumberFormat.compact(),
),
series: <CartesianSeries<_SalesData, String>>[
ColumnSeries<_SalesData, String>(
animationDuration: 400,
dataSource: foreignData,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(8),
topRight: Radius.circular(8),
),
xValueMapper: (_SalesData data, _) => data.year,
yValueMapper: (_SalesData data, _) => data.sales,
pointColorMapper: (_SalesData data, _) {
return data.sales < 0
? AppColor.pelati
: AppColor.brightTurquoise;
},
dataLabelMapper: (_SalesData datum, int index) {
return datum.sales.ceil().toString();
},
dataLabelSettings: const DataLabelSettings(
color: AppColor.dartMainBackground,
isVisible: true,
textStyle: TextStyle(
fontFamily: kFontName,
fontSize: 10,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
],
),
);
}
class _SalesData {
_SalesData(this.year, this.sales);
final String year;
final double sales;
}
