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

Question about CandleSeries

    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:

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,

2 Replies

YG Yuvaraj Gajaraj Syncfusion Team January 16, 2023 01:47 PM UTC

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.



YG Yuvaraj Gajaraj Syncfusion Team January 17, 2023 02:59 PM UTC

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/



Live Chat Icon For mobile
Up arrow icon