We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Plot text on right side of Y-axis

How can i make a flutter graph like this where for any kind of graph(7D,30D,1Y) background grid will be same ?

Here is my current code:

primaryYAxis: NumericAxis(
plotBands: <PlotBand>[
verticalTextPadding: '0%',
horizontalTextPadding: '0%',
text: widget.fromVault == true ? 'AP' : "",
textAngle: 0,
start: widget.fromVault == true ? double.parse(detailsAp!) : 0,
end: widget.fromVault == true ? double.parse(detailsAp!) : 0,
textStyle: TextStyle(color: AppColors.textColor.withOpacity(.5), fontSize: 8),
horizontalTextAlignment: TextAnchor.end,
borderColor: widget.fromVault == true ? const Color(0xff5A0FD8) : AppColors.graphCard,
borderWidth: 1.5,
decimalPlaces: 2,
numberFormat: NumberFormat.compact(),
interactiveTooltip: const InteractiveTooltip(
enable: false,
axisBorderType: AxisBorderType.withoutTopAndBottom,
borderWidth: 0,
axisLine: const AxisLine(width: 0),
majorGridLines: MajorGridLines(
width: 1,
color: AppColors.textColor.withOpacity(.1),
minorGridLines: MinorGridLines(
width: 1,
color: AppColors.textColor.withOpacity(.1),
majorTickLines: const MajorTickLines(width: 0),
//labelIntersectAction: AxisLabelIntersectAction.hide,
labelRotation: 0,
labelStyle: TextStyle(
color: AppColors.textColor,
fontFamily: 'Inter',
fontSize: 7.sp,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.w900),
labelAlignment: LabelAlignment.center,
maximumLabelWidth: 40,
maximum: double.parse(detailsAp!) > double.parse(data.oneDayGraphModel!.floorPrice!)
? double.parse(detailsAp!) + (double.parse(detailsAp!)*.1)
: null,


Thanks in advance.

3 Replies

YG Yuvaraj Gajaraj Syncfusion Team December 4, 2022 06:16 PM UTC

Hi Sanwarul,

The requirement can be achieved with the help of the axes property and an empty series, you can have a secondary axis in the axes and map with the empty series and place the secondary axis on the right side with the help of opposedPosition property. Then modify the secondary axis label with the help of axisLabelFormatter callback in which label you want to show on the right side. We have shared the sample below for your reference you can modify that as per your requirement.




Attachment: f179184_99449cdf.zip

SH Sanwarul Haque Sourav December 7, 2022 09:19 AM UTC

Thank you so much. it's working now. Really grateful for the help. One of the best supportive forums for developers.

YG Yuvaraj Gajaraj Syncfusion Team December 8, 2022 09:44 AM UTC

Most Welcome. Kindly get back to us if you have further queries. We are always happy to assist you.

Live Chat Icon For mobile
Up arrow icon