Plot text on right side of Y-axis

[Sanwarul Haque Sourav]

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>[
    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.

[Yuvaraj Gajaraj]

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.

Screenshot:

Regards,

Yuvaraj.

Attachment: f179184_99449cdf.zip

[Sanwarul Haque Sourav]

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

[Yuvaraj Gajaraj]

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