I have this Syncfusion chart, everything works but the y axis gridlines have different colors at the very top and bottom major lines (at 6AM and 8PM).
I want all grid colors to be the exact same. I think there is something affecting the opacity or something being rendered on top of it that is from the plotAreaBorder, but I have set its width to 0 already.
SfCartesianChart(
enableAxisAnimation: true,
plotAreaBorderWidth: 0,
primaryXAxis: CategoryAxis(
name: 'Day',
axisLabelFormatter: (value) {
final attendanceData = chartData.firstWhere(
(element) => element.startDate.weekday == DateTime.parse(value.text).weekday,
);
return ChartAxisLabel(
// Format: MON, TUE, WED, THU, FRI, SAT, SUN
DateFormat.E().format(DateTime.parse(value.text)).toUpperCase(),
context.textStyles.labelTiny.copyWith(
color: attendanceData.isAbsent ? AppColors.instance.accentRed : AppColors.instance.primaryText,
),
);
},
majorGridLines: MajorGridLines(width: 0),
majorTickLines: MajorTickLines(size: 8, color: Colors.transparent),
axisLine: AxisLine(
width: 0,
color: AppColors.instance.darkGrey,
),
),
primaryYAxis: NumericAxis(
name: 'Time',
rangePadding: ChartRangePadding.additional,
axisLabelFormatter: (value) {
final hour = DateTime(2021, 1, 1, int.parse(value.text));
return ChartAxisLabel(
// Format: 8AM without 0s
DateFormat('ha').format(hour),
context.textStyles.labelTiny.secondary,
);
},
axisLine: AxisLine(width: 0, color: Colors.transparent),
majorTickLines: MajorTickLines(size: 0),
majorGridLines: MajorGridLines(
width: 1,
color: AppColors.instance.darkGrey,
dashArray: <double>[5, 5],
),
interval: 2,
),
series: <RangeColumnSeries>[
RangeColumnSeries<AttendanceChartData, DateTime>(
dataSource: chartData,
xValueMapper: (AttendanceChartData data, _) => data.startDate,
lowValueMapper: (AttendanceChartData data, _) {
if (data.isAbsent) {
return null;
}
return data.startDate.hour + data.startDate.minute / 60;
},
highValueMapper: (AttendanceChartData data, _) {
if (data.isAbsent) {
return null;
}
return data.endDate.hour + data.endDate.minute / 60;
},
pointColorMapper: (AttendanceChartData data, _) {
if (data.isAbsent) {
return Colors.transparent;
} else if (data.isEarlyLeaveOrLateEntry) {
return AppColors.instance.accentOrange;
} else {
return AppColors.instance.lightModeGreen;
}
},
onCreateRenderer: (series) {
return CustomSmoothBorderRangeRenderer();
},
),
],
)