ColumnSeries annotation The first and last values are not displayed.
Hello
I am using your cartesian-charts package.
What we are currently trying to implement is that we need to use two annotations per chart.
And there are 20 pieces of data in total.
However, it is not displayed in the first data (index 0) and the last data (index 19).
(if the x value is 0 or 19)
Index1-18 shows it normally.
https://help.syncfusion.com/flutter/cartesian-charts/annotations
The sample code posted on the link above cannot be expressed normally.
I will also attach the sample code.
x: 1, y: 10 -> show
x: 0, y : 10 -> disappear
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
SfCartesianChart(
backgroundColor: Color(0xFF5B5B5B),
borderColor: Color(0xFF5B5B5B),
plotAreaBorderWidth: 0,
margin: EdgeInsets.all(8),
tooltipBehavior: TooltipBehavior(
enable: true, duration: 0, header: '', format: 'point.y%'),
annotations: <CartesianChartAnnotation>[
CartesianChartAnnotation(
widget: Text(
'Avg.',
style: TextStyle(
color: Color(0xFFD4D4D4),
fontSize: 18,
fontWeight: FontWeight.bold),
),
coordinateUnit: CoordinateUnit.point,
region: AnnotationRegion.plotArea,
x: 10,
y: widget.avgValue * 1.4),
CartesianChartAnnotation(
widget: Text(
'Me',
style: TextStyle(
color: Color(0xFFD4D4D4),
fontSize: 18,
fontWeight: FontWeight.bold),
),
coordinateUnit: CoordinateUnit.point,
x: 1,
y: 10)
],
primaryXAxis: CategoryAxis(
majorGridLines: const MajorGridLines(
width: 0,
),
majorTickLines: MajorTickLines(size: 0),
isVisible: true,
interval: 19,
labelStyle: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold)),
primaryYAxis: NumericAxis(
majorGridLines: const MajorGridLines(width: 0),
isVisible: false,
),
series: _getDefaultBarSeries(),
),
Positioned(
top: 20,
right: 20,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(
Icons.circle,
color: Colors.blue,
size: 12,
),
SizedBox(
width: 6,
),
Text(
'Me',
style:
TextStyle(fontSize: 16, color: Color(0xFFB6B6B6)),
)
],
),
SizedBox(height: 8),
Row(
children: [
Icon(
Icons.circle,
color: Colors.white,
size: 12,
),
SizedBox(
width: 6,
),
Text(
'Avg.',
style:
TextStyle(fontSize: 16, color: Color(0xFFB6B6B6)),
)
],
)
],
)),
],
),
);
}
List<ColumnSeries<RankData, String>> _getDefaultBarSeries() {
return <ColumnSeries<RankData, String>>[
ColumnSeries<RankData, String>(
dataSource: widget.data,
width: 0.95,
spacing: 0.1,
enableTooltip: true,
legendIconType: LegendIconType.circle,
selectionBehavior: SelectionBehavior(
enable: true,
selectedColor: Colors.red,
unselectedColor: Colors.grey),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20), topRight: Radius.circular(20)),
pointColorMapper: (RankData sales, _) => sales.color,
xValueMapper: (RankData sales, _) => sales.percentage.toString(),
yValueMapper: (RankData sales, _) => sales.calories),
];
}
// var data = [
// {'percentage': 5, 'calories': 20.0, 'color': 'Color(0x91ffffff)'},
// {'percentage': 10, 'calories': 19.0, 'color': 'Color(0x91ffffff)'},
// {'percentage': 15, 'calories': 18.0, 'color': 'Color(0x91ffffff)'},
// {'percentage': 20, 'calories': 17.0, 'color': 'Color(0x91ffffff)'},
// {'percentage': 25, 'calories': 16.0, 'color': 'Color(0x91ffffff)'},
// {'percentage': 30, 'calories': 15.0, 'color': 'Color(0x91ffffff)'},
// {'percentage': 35, 'calories': 14.0, 'color': 'Color(0x91ffffff)'},
// {'percentage': 40, 'calories': 13.0, 'color': 'Color(0x91ffffff)'},
// {'percentage': 45, 'calories': 12.0, 'color': 'Color(0x91ffffff)'},
// {'percentage': 50, 'calories': 11.0, 'color': 'Color(0x91ffffff)'},
// {'percentage': 55, 'calories': 10.0, 'color': 'Color(0x91ffffff)'},
// {'percentage': 60, 'calories': 9.0, 'color': 'Color(0x91ffffff)'},
// {'percentage': 65, 'calories': 8.0, 'color': 'Color(0x91ffffff)'},
// {'percentage': 70, 'calories': 7.0, 'color': 'Color(0x91ffffff)'},
// {'percentage': 75, 'calories': 6.0, 'color': 'Color(0x91ffffff)'},
// {'percentage': 80, 'calories': 5.0, 'color': 'Color(0x91ffffff)'},
// {'percentage': 85, 'calories': 4.0, 'color': 'Color(0x91ffffff)'},
// {'percentage': 90, 'calories': 3.0, 'color': 'Color(0x91ffffff)'},
// {'percentage': 95, 'calories': 2.0, 'color': 'Color(0x91ffffff)'},
// {'percentage': 100, 'calories': 1.0, 'color': 'Color(0x91ffffff)'},
// ];
class RankData {
RankData(this.percentage, this.calories, this.color);
final int percentage;
final double calories;
final Color color;
Map<String, dynamic> toJson() {
return {
'percentage': percentage,
'calories': calories,
'color': color,
};
}
}
SIGN IN To post a reply.
3 Replies
Hi Sangsoo,
Greetings from Syncfusion. We checked the code snippet attached in the query. The annotation gets hidden, as it got rendered outside the plot area. Since the column width is less and the column is very close to the plot area and by default, the annotation gets rendered in the center, it moved outside the plot area.
So, we suggest you use the horizontal alignment property in the annotation. It is used to align the annotation far, near, and center of the given value. We have attached the code snippet below for your reference.
So, we suggest you use the horizontal alignment property in the annotation. It is used to align the annotation far, near, and center of the given value. We have attached the code snippet below for your reference.
Screenshot:
Code snippet:
|
CartesianChartAnnotation(
widget: Text(
'Me',
style: TextStyle(
color: Color(0xFFD4D4D4),
fontSize: 18,
fontWeight: FontWeight.bold),
),
coordinateUnit: CoordinateUnit.point,
horizontalAlignment: ChartAlignment.near,
x: 0,
y: 10) |
We hope it will help you to achieve your requirement.
Regards,
Yuvaraj.
SIGN IN To post a reply.
