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

Connected dot plot chart - Dumbell dot chart


It is possible to achieve usign syncfusion chart a connected dot ploat chart something like here :

https://stephanieevergreen.com/dumbbell-dot-plot/ where 1 have 2 series of data that i need to vertically connect using a line. I was thinking about using scatter chart, but I have no idea on h ow to connect the points.

Thank you very much,

3 Replies

BK Bharathiraja K Syncfusion Team May 16, 2019 09:45 AM UTC

Hi Codrina, 
Greetings from Syncfusion.  
We can achieve your requirement using Range column series and scatter series. Range column series will plot based on two y values. (i.e. High and Low). 
And the Width property of Column series class is used to change the rectangle size, it value range from 0 to 1, by default range column width noted as 0.8. 
We are prepared the sample based on this requirement, that can be downloaded from below link. And find the code snippet below.  
<chart:SfChart x:Name="chart" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> 
. . .  
<chart:RangeColumnSeries ItemsSource="{Binding ChartSeriesData}" XBindingPath="Date" High="High" Low="Low" Width="0.01" Color="DarkBlue"/> 
            <chart:ScatterSeries ItemsSource="{Binding ChartSeriesData}" XBindingPath="Date" YBindingPath="High" ScatterWidth="14" ScatterHeight="14" Color="Red"/> 
            <chart:ScatterSeries ItemsSource="{Binding ChartSeriesData}" XBindingPath="Date" YBindingPath="Low" ScatterHeight="14" ScatterWidth="14" Color="Black"/> 
. . .        
Please refer the below help document link for more details. 

CM Codrina Merigo May 16, 2019 12:40 PM UTC

Thank you very much, works like a charm!


BK Bharathiraja K Syncfusion Team May 17, 2019 06:04 AM UTC

Hi Codrina,  
Thanks for your feedback. 

Live Chat Icon For mobile
Up arrow icon