Combining a Histogram and ScatterPlot in one Chart

[Sam Shen]

Hi,

Is it possible to place both a histogram and a scatterplot in one SfChart? I would like the scatterplot to be above the histogram, they share the same x-axis but have different y-axis.

Thanks

[Yuvaraj Palanisamy]

Hi Sam Shen, 

 

Greetings from Syncfusion. 

 

Yes. We can combine the histogram series and scatter series. Also we have prepared the sample for your reference. Please find the sample from the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/167081/ze/ChartDemo-429833246  

 

Output: 

 

 

Please let us know if you have any concern. 

 

Regards, 

Yuvaraj. 

[Sam Shen]

Hi,

Actually, what I had in mind is a graph that looks like this.

Note that the scatterplot and histogram are not overlapping. Most importantly, the two graphs share the same X-axis but have different Y-axis.

Thanks for the quick response.

[Yuvaraj Palanisamy]

Hi Sam Shen, 

You can achieve your requirement “Chart with same X-Axis and different Y-Axis” with the help of RowDefinitions support in SfChart. Please find the code example below. 

CodeSnippet: 

<sfchart:SfChart> 

     <sfchart:SfChart.RowDefinitions> 

         <sfchart:ChartRowDefinition/> 

         <sfchart:ChartRowDefinition Height="15" Unit="Pixels"/> 

         <sfchart:ChartRowDefinition/> 

     </sfchart:SfChart.RowDefinitions> 

     . . . 

    <sfchart:ScatterSeries ItemsSource="{Binding ScatterData}" 

                           XBindingPath="Price" 

                           YBindingPath="Value" 

                           ScatterHeight="10" 

                           ScatterWidth="10"> 

        <sfchart:ScatterSeries.YAxis> 

            <sfchart:NumericalAxis sfchart:SfChart.Row="2" Minimum="0" Maximum="12"/> 

        </sfchart:ScatterSeries.YAxis> 

    </sfchart:ScatterSeries> 

</sfchart:SfChart> 

Output: 

 

For more details, please refer the below link 

https://help.syncfusion.com/uwp/charts/area#column-span-and-row-span  

Regards, 

Yuvaraj.