Hello
I'm trying to draw multiple lines on a candlestick chart indicating orders placed. The issue is that they are being connected. Is there any way to have multiple lines in a list but not have them connected? Basically one line starting from the middle of that chart to the end should be for one order. See attached images in Pictures.zip. BinanceChart.png is the chart I'm trying to replicate but SyncfusionChart.png is what I'm currently getting.
<SfChart EnableAnimation="true" @ref="_sfChart">
<ChartEvents Loaded="ChartLoaded"></ChartEvents>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
<ChartPrimaryYAxis OpposedPosition="true" />
<ChartZoomSettings EnableMouseWheelZooming="true" EnablePinchZooming="true" EnablePan="true" EnableScrollbar="true"></ChartZoomSettings>
<ChartSeriesCollection>
<ChartSeries @ref="_sfCandles" DataSource="@CandleData" XName="Date" High="High" Low="Low" Type="ChartSeriesType.Candle" Open="Open" Close="Close"></ChartSeries>
<ChartSeries Width="1" DataSource="@OrdersChartDataLong" XName="x" YName="y" DashArray="5,5" Fill="green" Type="ChartSeriesType.Line">
<ChartMarker>
<ChartDataLabel Visible="true" Name="text" Fill="white" Position="Syncfusion.Blazor.Charts.LabelPosition.Middle">
<ChartDataLabelBorder Width="1" Color="green"></ChartDataLabelBorder>
<ChartDataLabelFont FontWeight="normal"></ChartDataLabelFont>
<ChartDataLabelMargin Left="5" Right="5" Top="5" Bottom="5"/>
</ChartDataLabel>
</ChartMarker>
</ChartSeries>
<ChartSeries Width="1" DataSource="@OrdersChartDataShort" XName="x" YName="y" DashArray="5,5" Fill="red" Type="ChartSeriesType.Line">
<ChartMarker>
<ChartDataLabel Visible="true" Name="text" Fill="white" Position="Syncfusion.Blazor.Charts.LabelPosition.Middle">
<ChartDataLabelBorder Width="1" Color="red"></ChartDataLabelBorder>
<ChartDataLabelFont FontWeight="normal"></ChartDataLabelFont>
<ChartDataLabelMargin Left="5" Right="5" Top="5" Bottom="5"/>
</ChartDataLabel>
</ChartMarker>
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
@code {
public List<LineChartData> OrdersChartDataLong = new List<LineChartData>();
public List<LineChartData> OrdersChartDataShort = new List<LineChartData>();
private void UpdateOrders()
{
OrdersChartDataLong.Clear();
OrdersChartDataShort.Clear();
if (CandleData.Count > 0)
{
foreach (var order in _binance.orders)
{
if (order.side == OrderSide.Buy)
{
OrdersChartDataLong.Add(new LineChartData
{
x = CandleData[CandleData.Count/2].Date,
y = Convert.ToDouble(order.price),
text = $"Limit: {order.price} | {order.quantity}"
});
OrdersChartDataLong.Add(new LineChartData { x = CandleData.Last().Date, y = Convert.ToDouble(order.price) });
}
if (order.side == OrderSide.Sell)
{
OrdersChartDataShort.Add(new LineChartData
{
x = CandleData[CandleData.Count/2].Date,
y = Convert.ToDouble(order.price),
text = $"Limit: {order.price} | {order.quantity}"
});
OrdersChartDataShort.Add(new LineChartData { x = CandleData.Last().Date, y = Convert.ToDouble(order.price) });
}
}
}
}
}
Thanks!
Attachment:
Pictures_bfab8852.zip
