Regarding chart plot design not working properly in mobile screen

[krButani]

Hi, we are trying to implement your candlestick chart when we implement any technical indicator candle stick chart not visible.

Indicator also not display full width. It displays small line but not visible to user. We used zoomPanBehavior. Few code line is below

@override
  void initState() {
_zoomPanBehavior = ZoomPanBehavior(
      enablePinching: true,
      enablePanning: true,
    );
}

 @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            appBar: AppBar(
              title: Text(script),
              elevation: 0,
            ),
            body: Stack(
              children: [
                SfCartesianChart(
                  zoomPanBehavior: _zoomPanBehavior,
                  legend: Legend(isVisible: true),
                  trackballBehavior: _trackballBehavior,
                  enableAxisAnimation: true,
                  plotAreaBorderColor: textBlackColor,
                  plotAreaBorderWidth: 1,
                  margin: EdgeInsets.all(2),
                  borderColor: textBlackColor,
                  indicators: <TechnicalIndicators<ChartSampleData, DateTime>>[
                    MacdIndicator<ChartSampleData, DateTime>(
                        period: 9,
                        isVisibleInLegend: false,
                        macdType: MacdType.histogram,
                        longPeriod: 26,
                        closeValueMapper: (ChartSampleData sales, _) => sales.close,
                        shortPeriod: 12,
                        seriesName: 'CandleSeries1')
                    /*RsiIndicator<ChartSampleData, DateTime>(
                        seriesName: 'CandleSeries1',
                        isVisibleInLegend: false,
                        yAxisName: '',
                        xAxisName: '',
                        overbought: 70,
                        oversold: 30,
                        animationDuration: 0,
                        xValueMapper: (ChartSampleData sales, _) => sales.x,
                        lowValueMapper: (ChartSampleData sales, _) => sales.low,
                        highValueMapper: (ChartSampleData sales, _) =>
                        sales.high,
                        closeValueMapper: (ChartSampleData sales, _) =>
                        sales.close,
                        period:5),*/
                  ],
                  series: <ChartSeries>[
                    CandleSeries<ChartSampleData, DateTime>(
                        dataSource: _chartData,
                        borderWidth: 1,
                        bearColor: Chart1Green1,
                        bullColor: Chart1Red1,
                        enableSolidCandles: true,
                        animationDuration: 0,
                        isVisibleInLegend: false,
                        name: 'CandleSeries1',
                        onRendererCreated: (ChartSeriesController controller) {
                          seriesController = controller;
                        },
                        xValueMapper: (ChartSampleData sales, _) => sales.x,
                        lowValueMapper: (ChartSampleData sales, _) => sales.low,
                        highValueMapper: (ChartSampleData sales, _) =>
                            sales.high,
                        openValueMapper: (ChartSampleData sales, _) =>
                            sales.open,
                        closeValueMapper: (ChartSampleData sales, _) =>
                            sales.close),
                  ],
                  primaryXAxis: DateTimeAxis(
                      dateFormat: DateFormat('d MMM H:m'),
                      rangePadding: ChartRangePadding.additional,
                      interactiveTooltip:
                          const InteractiveTooltip(enable: true),
                      intervalType: DateTimeIntervalType.minutes,
                      majorTickLines: const MajorTickLines(
                          size: 3, width: 1, color: textBlackColor),
                      axisLine: const AxisLine(color: textBlackColor, width: 1),
                      labelStyle: const TextStyle(
                        color: textBlackColor,
                      ),
                      majorGridLines: const MajorGridLines(
                          width: 1,
                          dashArray: [5, 5, 5, 5],
                          color: backgoundGrid)),
                  primaryYAxis: NumericAxis(
                    opposedPosition: true,
                    interactiveTooltip: const InteractiveTooltip(enable: true),
                    rangePadding: ChartRangePadding.additional,
                    axisLine: const AxisLine(color: textBlackColor, width: 1),
                    majorTickLines: const MajorTickLines(
                        size: 3, width: 1, color: textBlackColor),
                    labelStyle: const TextStyle(
                      color: textBlackColor,
                    ),
                    majorGridLines: const MajorGridLines(
                        width: 1,
                        dashArray: [5, 5, 5, 5],
                        color: backgoundGrid),
                    numberFormat: NumberFormat('0.00000'),
                    plotBands: <PlotBand>[
                      PlotBand(
                        shouldRenderAboveSeries: true,
                        isVisible: true,
                        start: bidprice,
                        end: bidprice,
                        borderWidth: 1,
                        text: '$bidprice',
                        textStyle: const TextStyle(
                            backgroundColor: Chart1Red2, color: Colors.white),
                        horizontalTextAlignment: TextAnchor.end,
                        borderColor: Chart1Red2,
                      ),
                      PlotBand(
                        shouldRenderAboveSeries: true,
                        isVisible: true,
                        start: askprice,
                        end: askprice,
                        borderWidth: 1,
                        text: '$askprice',
                        textStyle: const TextStyle(
                            backgroundColor: Chart1Red1, color: Colors.white),
                        horizontalTextAlignment: TextAnchor.end,
                        borderColor: Chart1Red1,
                      ),
                      PlotBand(
                        shouldRenderAboveSeries: true,
                        isVisible: true,
                        start: midprice,
                        end: midprice,
                        borderWidth: 1,
                        text: '$midprice',
                        textStyle: const TextStyle(
                            backgroundColor: Chart1Green1, color: Colors.white),
                        horizontalTextAlignment: TextAnchor.end,
                        borderColor: Chart1Green1,
                      ),
                    ],
                  ),
                ),

              ],
            )));
  }

https://prnt.sc/dUixCdqku0qO

[krButani]

[Yuvaraj-Gajaraj]

We have tried to replicate the reported issue at our with the provided code snippet, but the issue is not getting reproduced at our end. We kindly request you share more information about the data source used and also, try to reproduce the reported issue in the shared sample below. So that it will help us assist you in a better way.

Screenshot:

Sample: i435541.zip

[krButani]

Code and sample data file upload on drive please put on you project and check on it.

Google Drive Link

Check on Mobile Screen we try to draw like attached screenshot.

[Yuvaraj-Gajaraj]

Your requirement can be achieved by mapping the indicator to the secondary Y-axis instead of the primaryYAxis. By this method, the signal line for the RSI indicator will be rendered as per your requirement. We have modified your sample and shared it below for your reference.

Code snippet:

SfCartesianChart(
  axes: [
    NumericAxis(
      name: 'y-axis',
      maximum: 2000,
      isVisible: false,
      rangePadding: ChartRangePadding.additional,
    )
  ],
  indicators: <TechnicalIndicators<ChartSampleData, DateTime>>[
    RsiIndicator<ChartSampleData, DateTime>(
        showZones: false,
        yAxisName: 'y-axis',
    ),
  ],
),

Screenshot:

Sample: i435541.zip

Regards, Yuvaraj.

[krButani]

how can i display Y axis 0 to 100 on RSI???

[LavanyaGowtham2021]

Hi Kartik,

We have achieved your requirement by adding two charts and rendering the candle series and RSI indicators with different charts. We have achieved the green and red color lines with the help of plotband property in chart axis and highlighting the axis label using the axisLabelFormatter. And we have modified your sample based on the requirement and shared it below for your reference.

Screenshot:

If you want to enable the trackball for both series and indicator, you can synchronize the trackball of multiple charts as per the following KB. https://www.syncfusion.com/kb/11881/how-to-synchronize-trackball-in-multiple-charts-sfcartesianchart

Regards, Lavanya A. rsi indicator.zip

[krButani]

Thank you its working. So, other indicator also display in diferent plot??

[ghost]

Hi @krButani,

Yes, you can display all the indicators in a different plot area. Please let us know if you need any further assistance.

Regards, Lokesh.