Question about CandleSeries

[Bar Ilan]

Here are some questions I have about CandleSeries chart:




1.At the first time I open the graph, I want to see the last time line.

2.How can I zoom by default (Display smaller candles).

3.How can I set the period in the graph?

4.How to display live chart.

My code:

 SfCartesianChart(
  series: <CandleSeries>[
    CandleSeries<GetSymbolChartRespItemDto, DateTime>(
        // showIndicationForSameValues: true,
        // animationDuration: 1000,
        enableSolidCandles: true,
        dataSource: graphData!,
        enableTooltip: true,
        isVisibleInLegend: true,
        xValueMapper: (GetSymbolChartRespItemDto data, _) => data.timestamp,
        lowValueMapper: (GetSymbolChartRespItemDto data, _) => data.low,
        highValueMapper: (GetSymbolChartRespItemDto data, _) => data.high,
        openValueMapper: (GetSymbolChartRespItemDto data, _) => data.open,
        closeValueMapper: (GetSymbolChartRespItemDto data, _) => data.close)
  ],
  enableAxisAnimation: true,
  plotAreaBorderWidth: 0,
  primaryXAxis: DateTimeAxis(
      zoomFactor: 0.1,
      zoomPosition: 0.3,
      isVisible: true,
      majorGridLines: MajorGridLines(width: 0)
  ),
  primaryYAxis: NumericAxis(
    opposedPosition: true,
  ),
  zoomPanBehavior: ZoomPanBehavior(
    enablePinching: true,
    zoomMode: ZoomMode.x,
    enablePanning: true,
    enableDoubleTapZooming: true,
    enableMouseWheelZooming: true,
  ),
)

[Yuvaraj Gajaraj]

Hi Bar,

We are validating your query at our end and we will update further details in one business day on 17 January 2023. We appreciate your patience until then.

Regards,

Yuvaraj.

[Yuvaraj Gajaraj]

Hi Bar,

Please find the response to your query below,

Query 1#: At the first time I open the graph, I want to see the last timeline.

Your requirement can be achieved with help of the autoScrollingDelta and autoScrollingMode properties in the chart axis. The autoScrollingDelta option specifies the number of data points to display in the visible range, and the autoScrollingMode option determines whether shown data points are displayed at the start or end of the chart. We have shared the code snippet below for your reference.

Code snippet:

primaryXAxis: DateTimeAxis(

autoScrollingDelta: 8,

autoScrollingMode: AutoScrollingMode.end,

isVisible: true,

majorGridLines: const MajorGridLines(width: 0),

),

Query 2#: How can I zoom by default (Display smaller candles).

In your code snippet, you set value for the properties zoomFactor and zoomPosition in the x-axis. The zoomFactor indicates how much of the axis should be visible in the range, while the zoomPosition indicates where the axis should begin to be shown. When there is a small amount of data, the width of the candle series will be larger because the width of the candle series is determined by the visible range of the axis and the number of data points present in that range. To avoid this, you can remove the zoomFactor and zoomPosition properties in the axis to render the initial chart with a smaller width.

Query 3#: How can I set the period in the graph?

We suspect that you are asking about the indicator, currently, we have 10 different indicator support in our chart. We have shared the below UG and KB documentation for your reference. It will explain how to use the indicator in the chart.

KB - https://www.syncfusion.com/kb/12966/

UG -  https://help.syncfusion.com/flutter/cartesian-charts/technical-indicators

Query 4#: How to display live chart.

We suggest you use the updateDataSource method for the update, add, and remove the data in the chart. It will update the data and render the chart without rebuilding the whole build method, it will improve the performance. We have attached the UG, KB, and sample below for your reference.

UG -  https://help.syncfusion.com/flutter/cartesian-charts/methods#updatedatasource

KB -  https://www.syncfusion.com/kb/12316/

Regards,

Yuvaraj.