1. Home
  2. Forum
  3. Flutter
  4. Candlestick chart issues

Candlestick chart issues

Hi,

I am having problem in candlestick chart.

1. First and last wick is showing half only
2. How to hide empty area for empty data.

Please check the attachment.

Please help.

Thanks

Attachment: Screenshot_20201107162131__01.jpg_35e966c2.zip

3 Replies
SK Sriram Kiran Senthilkumar Syncfusion Team November 9, 2020 12:36 PM UTC

Hi Anil, 
  
Greetings from Syncfusion. We have analyzed your queries at our end and provided the responses below. 
 
Query #1: (First and last wick is showing half only) 
We have analyzed on the above scenario and we would like to share some information regarding the rangePadding property of an axis available in the chart. Using this property, you can be able to add additional padding at the start and end of the chart axis by setting the value for this property as ChartRangePadding.additional. Please refer the code snippet below for further reference. 
SfCartesianChart( 
         primaryXAxis: DateTimeAxis( 
             rangePadding: ChartRangePadding.additional 
         )  
) 
 
Also, to mention that, if you are using visibleMinimum and visibleMaximum property to set the visible range for the chart, then the applying range padding wont work. So, in this case, you can add additional duration before setting the necessary visible minimum and maximum values in the axis. That is, before setting the visible minimum datetime value, you can decrease the duration (say -1 day or -12 hour)   according to the respective axis interval by adding duration to that datetime value and before setting visible maximum datetime value, you can add additional duration (say +1 day or +12 hour)  according to the respective axis interval. Please refer the code snippet below for further reference. 
SfCartesianChart( 
         primaryXAxis: DateTimeAxis( 
                 visibleMinimum: DateTime(2020, 10, 26).add(Duration(day: -1)), 
                 visibleMaximum: DateTime(2020, 11, 5).add(Duration(day: 1)) 
         )  
) 
 
Please check with the above response and revert us if you still have further concerns on this. 
  
Query #2: (How to hide empty area for empty data) 
We have analyzed on the above scenario with the provided screenshot at our end and we are sorry that the empty area left due to empty data points cannot be hidden in the chart. This is default behavior behaviour. However, we would also like to know about the empty data point’s high, low, open, close values which you sending into the chart whether their values are equal or their values are sent null because, we have property called the showIndicationForSameValues available for the financial series types and when this property is set to false(default),then data points with same high and low or open and close values will not get render and left as blank area/space at that point’s x axis value and if this property is set to true, then there will be an indication line either horizontal or vertical according to the same high, low, open and close values. So, we kindly request you to share us with more information on the empty data points high, low, open and close values which you providing for the chart data source so that it will be helpful in providing the solutions sooner. 
 
For further reference on showIndicationForSameValue property, please check the link below. 
  
 
Regards, 
Sriram Kiran 


AN Anil November 13, 2020 06:51 AM UTC

Hi Sriram,

Regarding point no. 2. I am not passing any data for the data points.

I am sending data for 29 Oct and 1 Nov. I am not sending data for 30 Oct and 31 Oct as the market is closed on those days.

In another instance, market was closed for few months due to Covid. The chart is showing blank spaces

Regards,
Anil

SK Sriram Kiran Senthilkumar Syncfusion Team November 16, 2020 11:46 AM UTC

Hi Anil, 
  
Thanks for the revert. We have analyzed your query at our end, and we would like to share some information regarding the DateTimeAxis available in the chart. As the DateTimeAxis available in our chart widget is a linear axis i.e., the chart when gets rendered in a DateTime axis, then its axis labels will be in a calculated range intervals (say from 29 Oct to 3 Nov) and this is the default behavior of the DateTimeAxis.  

However, we can overcome this by using a simple workaround which is by using the category axis instead of the Date Time axis. As the category axis is a non-linear axis and it renders the axis only for the chart according to the provided x-axis values in the chart data source. So, we kindly request you to convert your date time values to string and pass it to the chart so that the chart will render the axis labels only for the provided data source and thus there will not be any blank spaces for the empty data. 
 
We have also attached screenshots below to illustrate the behavior of the DateTimeAxis rendered with empty data and CategoryAxis rendered with empty data. 
Using DateTimeAxis: 
  
Here, we have rendered the chart with empty data using DateTimeAxis and as it is a linear axis, there will be blank space at the empty data. 
Using CaetoryAxis: 
  
Here, you can see that the blank space is neglected for the empty data in the chart as the CategoryAxis renders only the datapoints for the provided x-axis values. 
 
The sample for reference can be found below. 
  
Please check the above sample and revert us if you still have further concerns. 
  
Also, to mention that, we are planning to include a new axis type for our chart widget called the DateTimeCategoryAxis which will be highly useful for your scenario. We have already logged a feature request regarding this in our feedback portal. We will plan and include this feature in any of our upcoming releases yet to come. You can also track the status of the feature using the below feedback link. 
 
Regards, 
Sriram Kiran 


Loader.
Up arrow icon