I am new to the flutter and I am trying to draw a chart similar to below chart with a follow line and a tooltip using flutter chart package.
I searched and found a GitHub issue that was useful. the solution was to create a custom CircleSymbolRenderer and override the paint function and draw the tooltip. it works individually but when I put it in my actual project the follow line and tooltip are not visible. here is the full code of my chart.
class ShoeDetailPage extends StatefulWidget {
String imageUrl, shoeName, shoeId, shoeSizeId,topMover;
ShoeDetailPage({this.imageUrl, this.shoeName, this.shoeId, this.shoeSizeId,this.topMover});
@override
_ShoeDetailPageState createState() => _ShoeDetailPageState();
}
class _ShoeDetailPageState extends State<ShoeDetailPage> with AfterLayoutMixin {
ShoeFullInfo bloc = new ShoeFullInfo();
String _dateTime;
String capital;
DateTime selectedDate;
Map<String, String> headers = {
"Content-type": "application/json",
"Accept": "application/json",
"Authorization": "Bearer ${UserInfo.GetToken()}"
};
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
ScreenUtil.instance = ScreenUtil(width: 1080, height: 1920)..init(context);
return SafeArea(
child: Scaffold(
appBar: displayAppBarWithCentertitle("", blueColor, context),
body: Container(
height: ScreenUtil.instance.height,
width: ScreenUtil.instance.width,
color: backgroundColor,
child: StreamBuilder<bool>(
stream: bloc.loading,
builder: (context, snapshot) {
if (!snapshot.hasData || snapshot.data) {
return displayCircularProgressIndicater(context);
}
if(bloc.statusCode!=200){
return alertCode(bloc.statusCode);
}
if (!bloc.connection) {
return displayNoInternet();
}
return displayGraphContainer();
}),
),
),
);
}
List<charts.Series<TimeSeriesSales, DateTime>> _createSampleData() {
return [
new charts.Series<TimeSeriesSales, DateTime>(
id: 'US Sales',
domainFn: (TimeSeriesSales sales, _) => sales.time,
measureFn: (TimeSeriesSales sales, _) => sales.sales,
data: bloc.salesData,
radiusPxFn: (a, b) => b == bloc.lastIndex ? 8 : 0,
fillColorFn: (a, b) {
return b == bloc.lastIndex
? charts.ColorUtil.fromDartColor(Colors.pinkAccent)
: charts.ColorUtil.fromDartColor(Colors.blue);
},
patternColorFn: (a,b) => charts.ColorUtil.fromDartColor(Colors.red),
colorFn: (a,b) {
return b == bloc.lastIndex
? charts.ColorUtil.fromDartColor(Colors.pinkAccent.withOpacity(0.7))
: charts.ColorUtil.fromDartColor(Colors.blue);
},
),
];
}
Widget displayGraphContainer() {
String amount;
return StreamBuilder<bool>(
stream: bloc.onChangeData,
builder: (context, snapshot) {
if (snapshot.hasData && snapshot.data) {
return new Container(
width: MediaQuery.of(context).size.width,
height: 250,
);
}
return Container(
width: MediaQuery.of(context).size.width,
height: 250,
child: charts.TimeSeriesChart(
_createSampleData(),
animate: false,
defaultRenderer: new charts.LineRendererConfig(
includePoints: true,
includeLine: true,
roundEndCaps: true,
stacked: true
),
primaryMeasureAxis: new charts.NumericAxisSpec(
renderSpec: new charts.NoneRenderSpec(),
),
domainAxis: new charts.DateTimeAxisSpec(
tickProviderSpec: charts.DayTickProviderSpec(increments: [40]),
tickFormatterSpec: new charts.AutoDateTimeTickFormatterSpec(
day: new charts.TimeFormatterSpec(
format: 'dd',transitionFormat: 'MMM-dd', noonFormat: 'EEE'
)
)
),
selectionModels: [
new charts.SelectionModelConfig(
type: charts.SelectionModelType.info,
changedListener: (charts.SelectionModel data) {
bloc.changeChartPoint(data.selectedDatum[0].index);
}
)
],
behaviors: [
new charts.LinePointHighlighter(
symbolRenderer: (CustomCircleSymbolRenderer("3")),
showHorizontalFollowLine: charts.LinePointHighlighterFollowLineType.none,
showVerticalFollowLine: charts.LinePointHighlighterFollowLineType.nearest,
drawFollowLinesAcrossChart: true
),
new charts.SelectNearest(
eventTrigger: charts.SelectionTrigger.tapAndDrag
)
],
),
);
});
}
and this is the custom CircleSymbolRendererClass
class CustomCircleSymbolRenderer extends charts.CircleSymbolRenderer {
String amount;
CustomCircleSymbolRenderer(this.amount);
@override
void paint(charts.ChartCanvas canvas, Rectangle<num> bounds, {List<int> dashPattern, chart_color.Color fillColor,charts.FillPatternType fillPattern, chart_color.Color strokeColor, double strokeWidthPx, String text}) {
super.paint(canvas, bounds, dashPattern: dashPattern, fillColor: fillColor, strokeColor: strokeColor, strokeWidthPx: strokeWidthPx);
canvas.drawRect(
Rectangle(bounds.left - 5, bounds.top - 30, bounds.width + 10, bounds.height + 10),
fill: chart_color.Color.white
);
var textStyle = style.TextStyle();
textStyle.color = chart_color.Color.black;
textStyle.fontSize = 25;
canvas.drawText(
te.TextElement("1", style: textStyle),
(bounds.left).round(),
(bounds.top - 28).round()
);
}
}
does anyone know what possibly might have gone wrong?