Request for Control Customization of Candle Chart in Syncfusion Xamarin.Forms
Dear Syncfusion Support Team,
I am writing to request control customization for the Candle Chart in Syncfusion for Xamarin.Forms. I have been using your charting library and have found it to be an excellent tool for visualizing financial data. However, I require some specific modifications to enhance its functionality to better suit my needs.
I would greatly appreciate it if you could assist me with the following customization requests:
Candle Chart Y-Axis Position: Currently, the Y-axis is positioned on the left side of the chart. However, for my application, I would like to have the Y-axis positioned on the right side of the chart. This change is important for maintaining consistency with the layout and design of my application.
Dynamic Price Line: I would like to have a dynamic price line that adjusts automatically based on live data. The price line should represent the current market price and update in real-time as new data is received. This feature is crucial for providing users with a visual reference for the current market conditions.
Live Data Operation: It is imperative that the Candle Chart operates seamlessly with live data. I require the ability to update the chart with real-time data as it becomes available. This feature will enable me to provide users with an up-to-date representation of market trends and fluctuations.
I understand that these customization requests may require modifications to the existing Syncfusion Xamarin.Forms Candle Chart control. I kindly request guidance on the necessary steps or any code snippets that may be required to implement these changes effectively.
Thank you very much for your attention to this matter. I greatly appreciate your support and assistance in customizing the Candle Chart control to meet my specific requirements. I look forward to your response and guidance.
Attachment: ChartImages_393dd0f8.rar
Hi Yaseen,
We are glad to inform you that we have achieved your requirements. Please find the attached sample below for reference.
To set the y-axis position to the right side using the OpposedPosition API, refer to the following code:
<chart:SfChart.SecondaryAxis> <chart:NumericalAxis ShowMajorGridLines="False" OpposedPosition="True" </chart:NumericalAxis> </chart:SfChart.SecondaryAxis> |
In this sample, we have used the HorizontalAnnotation to draw the price line. The HorizontalAnnotation has a ShowAxisLabel property that can be used to display the label. When the button is clicked, both the horizontal line and the label are updated. Please refer to the provided link for customizing the label.
During the live data update, the y-axis labels also need to be updated. To achieve this, the AppendInterval can be used to adjust the axis based on the maximum values
I hope provided information helps you! If you need further assistance let me know.
Regards,
Sowndharya.
Attachment: XamarinSample_2ae89a6f.zip
Dear Syncfusion Support Team,
I hope you are doing well.I am following up on my previous request for the customization of the Candle Chart in Syncfusion for Xamarin.Forms. I appreciate the prompt response I received, wherein you provided a solution for changing the price line value through a button click event. However, I would like to explore an alternative approach that involves the price line value changing dynamically as the underlying data updates, without relying on a button click event.
To better understand and implement this functionality, I kindly request your assistance in providing a live example or code snippet that demonstrates the price line value automatically updating in response to changes in dynamic data. This example will serve as a valuable reference for integrating real-time data updates into the Candle Chart control effectively.
Having a live example will enable me to ensure that the Candle Chart operates seamlessly with the dynamic data in my application, providing users with an accurate and up-to-date representation of market conditions. It will also allow me to optimize the user experience by eliminating the need for manual interactions such as button clicks to update the price line value.
I truly appreciate your commitment to providing excellent support and your dedication to assisting your customers. Thank you for your time and attention to this matter. I look forward to your response and the provision of a live example or code snippet showcasing the dynamic updating of the price line value in the Candle Chart.
Thank you once again, and I eagerly await your response.
Best regards,
Yaseen Wakeel
Attachment: CandleChartResponse_75f6ec1a.rar
Hi Sowndharya,
I'm writing to inquire about customizing the background color and overall appearance of a candle chart in my Xamarin.Forms application.
Desired Customization:
- Background Color: I want to apply a gradient background color to the chart area, similar to the chart in the attached image.
Current Implementation:
I would appreciate it if you could provide guidance on how to apply a gradient background color. Any code examples or documentation references would be extremely helpful.
Thank you for your time and assistance.
Regards,
Yaseen Wakeel
Attachment: CandleChart_livedemo_cca6223a.zip
Hi Yaseen,
We are glad to inform you that achieved your requirements by applying the LinearGradientBrush to Background property SfChart. You can refer the following code example.
|
MainPage.xaml:
<chart:SfChart x:Name="chart" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Background="{Binding GradientBrush}"> </chart:SfChart>
ViewModel:
public class ViewModel { public LinearGradientBrush GradientBrush { get; set; }
public ViewModel() { GradientBrush = new LinearGradientBrush();
GradientBrush.StartPoint = new Point(0, 0); GradientBrush.EndPoint = new Point(1, 1);
GradientBrush.GradientStops.Add(new GradientStop(Color.Black, (float)0.0));; GradientBrush.GradientStops.Add(new GradientStop(Color.Blue, (float)1.0)); } } |
Output:
Additionally, we would like to know if you expect to apply a gradient for the candle segment?
I hope this helps! Let me know if you need further assistance.
Regards,
Dhanaraj Rajendran.
Dear Syncfusion Support Team,
I'm currently working on a project where I need to replicate the look and feel of charts from www.tradingview.com. I'm using the Syncfusion Chart library in a Xamarin.Forms app.
I'm aiming to match the design of the charts on TradingView as closely as possible, so I'll attach an image for reference.
Could someone please help me with writing the source code to achieve this using the Syncfusion library? I know there are different chart types and customization options available, so any guidance or code snippets would be greatly appreciated.
Thank you very much for your help!
Best regards,
Yaseen Wakeel
Hi Yaseen,
We have validated your query and would like to let you know that you can give gradients to the charts. Here we provided the user guide documentation link for your reference. You can also refer to the code snippet provided below.
UG Documentation: https://help.syncfusion.com/xamarin/charts/appearance#gradient-colors
|
<chart:SfChart Background="#030003"> . . . <chart:SfChart.Series> <chart:AreaSeries ItemsSource ="{Binding Data}" XBindingPath="Date" YBindingPath="Value" StrokeColor="#1f62fb"> //Here you can give the gradient to the chart series <chart:AreaSeries.ColorModel> <chart:ChartColorModel Palette="Custom"> <chart:ChartColorModel.CustomGradientColors> <chart:ChartGradientColor StartPoint="0.5,0" EndPoint="0.5,1"> <chart:ChartGradientColor.GradientStops> <chart:ChartGradientStop Offset="0" Color="#325ffc" /> <chart:ChartGradientStop Offset="1" Color="#030003" /> </chart:ChartGradientColor.GradientStops> </chart:ChartGradientColor> </chart:ChartColorModel.CustomGradientColors> </chart:ChartColorModel> </chart:AreaSeries.ColorModel> </chart:AreaSeries> </chart:SfChart.Series> . . . </chart:SfChart>
|
Output:
We have prepared the sample based on your query and we have attached the sample for your reference.
For the candle chart, we have referred the chart from the tradingview website. Here is the image for that reference.
Prepared the sample based on this reference. You can refer to it.
Output:
We hope this meets your requirements. Let me know if you need further assistance.
Regards,
Dhanaraj Rajendran.
Attachment: SF_F183021_1d07a67.zip
Hi Dhanaraj,
I hope this message finds you well. I have been working with the AreaSeries and FastLineSeries charts in Syncfusion, and I encountered an issue regarding deviations in the graph.
Previously, I used the code snippet provided in your last reply for the AreaSeries chart. However, I noticed that the deviations in the graph were not being shown as expected. In an attempt to resolve this, I switched to using the FastLineSeries chart, and I can confirm that the deviations are now visible.
However, I also need to apply a gradient effect to the chart lines, similar to what was achieved with the AreaSeries chart. Could you please provide me with the code snippet to apply a gradient effect to the FastLineSeries or LineSeries charts?
I have attached screenshots of both the AreaSeries chart (where deviations are not shown but gradient is applied) and the FastLineSeries chart (where deviations are shown but gradient is not applied) for your reference.
AreaSeries chart
FastLineSeries chart
FastLineSeries Code snippet
<chart:SfChart BackgroundColor="Transparent" x:Name="chart" HorizontalOptions="FillAndExpand"
HeightRequest="300" VerticalOptions="FillAndExpand" Background="{AppThemeBinding Dark={StaticResource BlackColor},Light={StaticResource WhiteColor}}">
<chart:SfChart.ChartBehaviors>
<chart:ChartZoomPanBehavior x:Name="ZoomPanCustom"
EnablePanning="True"
SelectionRectFillColor="Transparent"
ZoomMode="X" />
</chart:SfChart.ChartBehaviors>
<chart:SfChart.PrimaryAxis>
<chart:CategoryAxis LabelPlacement="OnTicks" ZoomFactor="{OnPlatform Android='0.9',iOS='0.9'}" ShowMajorGridLines="False">
<chart:CategoryAxis.LabelStyle>
<chart:ChartAxisLabelStyle TextColor="{AppThemeBinding Dark={StaticResource WhiteColor},Light={StaticResource BlackColor}}"/>
</chart:CategoryAxis.LabelStyle>
<chart:CategoryAxis.AxisLineStyle>
<chart:ChartLineStyle StrokeColor="Transparent" />
</chart:CategoryAxis.AxisLineStyle>
<chart:CategoryAxis.MajorTickStyle>
<chart:ChartAxisTickStyle StrokeColor="Transparent" />
</chart:CategoryAxis.MajorTickStyle>
</chart:CategoryAxis>
</chart:SfChart.PrimaryAxis>
<chart:SfChart.SecondaryAxis>
<chart:NumericalAxis ShowMajorGridLines="False"
OpposedPosition="True"
RangePadding="AppendInterval" >
<chart:NumericalAxis.AxisLineStyle>
<chart:ChartLineStyle StrokeColor="Transparent" />
</chart:NumericalAxis.AxisLineStyle>
<chart:NumericalAxis.MajorTickStyle>
<chart:ChartAxisTickStyle StrokeColor="Transparent" />
</chart:NumericalAxis.MajorTickStyle>
<chart:NumericalAxis.LabelStyle>
<chart:ChartAxisLabelStyle LabelFormat="#,##0.000000" TextColor="{AppThemeBinding Dark={StaticResource WhiteColor},Light={StaticResource BlackColor}}"/>
</chart:NumericalAxis.LabelStyle>
</chart:NumericalAxis>
</chart:SfChart.SecondaryAxis>
<chart:SfChart.ChartAnnotations>
<chart:HorizontalLineAnnotation x:Name="askOrBidPriceLineStyle"
ShowAxisLabel="False"
StrokeColor="#DDBE6F"
Text="{Binding AskOrBidPricePriceHorizontalLine.Y1, StringFormat='{0:N6}s'}"
Y1="{Binding AskOrBidPricePriceHorizontalLine.Y1}">
<chart:HorizontalLineAnnotation.LabelStyle>
<chart:ChartAnnotationLabelStyle BackgroundColor="#DDBE6F"
FontSize="10"
HorizontalTextAlignment="End"
TextColor="White"
VerticalTextAlignment="Center" />
</chart:HorizontalLineAnnotation.LabelStyle>
</chart:HorizontalLineAnnotation>
<chart:HorizontalLineAnnotation x:Name="greenLineStyle"
ShowAxisLabel="False"
StrokeColor="#00E560"
Text="{Binding TakeProfitHorizontalLine.Y1, StringFormat='T/P: {0:N6}'}"
Y1="{Binding TakeProfitHorizontalLine.Y1}">
<chart:HorizontalLineAnnotation.LabelStyle>
<chart:ChartAnnotationLabelStyle BackgroundColor="#9000E560"
FontSize="10"
HorizontalTextAlignment="End"
TextColor="White"
VerticalTextAlignment="Center" />
</chart:HorizontalLineAnnotation.LabelStyle>
</chart:HorizontalLineAnnotation>
<chart:HorizontalLineAnnotation x:Name="redLineStyle"
ShowAxisLabel="False"
StrokeColor="Red"
Text="{Binding StopLossHorizontalLine.Y1, StringFormat='S/L: {0:N6}'}"
Y1="{Binding StopLossHorizontalLine.Y1}">
<chart:HorizontalLineAnnotation.LabelStyle>
<chart:ChartAnnotationLabelStyle BackgroundColor="{StaticResource RedFrameBackgroundColour}"
FontSize="10"
HorizontalTextAlignment="End"
TextColor="White"
VerticalTextAlignment="Center" />
</chart:HorizontalLineAnnotation.LabelStyle>
</chart:HorizontalLineAnnotation>
<chart:HorizontalLineAnnotation x:Name="whiteLineStyle"
ShowAxisLabel="False"
StrokeColor="White"
Text="{Binding EntryPriceHorizontalLine.Y1, StringFormat='Entry Price: ${0:N6}'}"
Y1="{Binding EntryPriceHorizontalLine.Y1}">
<chart:HorizontalLineAnnotation.LabelStyle>
<chart:ChartAnnotationLabelStyle BackgroundColor="{StaticResource BluePrimaryColour1}"
FontSize="10"
HorizontalTextAlignment="End"
TextColor="White"
VerticalTextAlignment="Center" />
</chart:HorizontalLineAnnotation.LabelStyle>
</chart:HorizontalLineAnnotation>
</chart:SfChart.ChartAnnotations>
<chart:SfChart.Series>
<chart:FastLineSeries ItemsSource ="{Binding HistoricalTickDataList}"
XBindingPath="FormattedTime"
YBindingPath="Tick"
StrokeWidth="0.4"
>
<chart:FastLineSeries.ColorModel>
<chart:ChartColorModel Palette="Custom">
<chart:ChartColorModel.CustomGradientColors>
<chart:ChartGradientColor StartPoint="0.5,0" EndPoint="0.5,1">
<chart:ChartGradientColor.GradientStops>
<chart:ChartGradientStop Offset="0" Color="#5000CC39" />
<chart:ChartGradientStop Offset="1" Color="#0500CC39" />
</chart:ChartGradientColor.GradientStops>
</chart:ChartGradientColor>
</chart:ChartColorModel.CustomGradientColors>
</chart:ChartColorModel>
</chart:FastLineSeries.ColorModel>
</chart:FastLineSeries>
</chart:SfChart.Series>
</chart:SfChart>
Thank you for your assistance.
Best regards,
Yaseen Wakeel
Hi Yaseen,
We have validated your query and would like to let you know that you can apply the gradient for the FastLineSeries like how you applied for the AreaSeries using the ColorModel. But, When the data points are more than 50,000, then gradient is not clearly shown. You can see that we have applied the ColorModel for Fastline Series in the following image.
Could you please clarify which one is mentioned as deviations in the given images? Is the deviations is Change in the YValue or the Annotation mentioned as TP?.
Regards,
Dhanaraj Rajendran.
