SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and now iOS Charting & Android Chart Components

Welcome to the SciChart Community Forums!

Please use the forums below to ask questions about SciChart. Take a moment to read our Question asking guidelines on how to ask a good question and our support policy

We also have a tag=SciChart on where you can earn rep for your questions!



I’m trying to create Multi-Pane Heatmaps by using your example for multi-pane stock charts. I need to have one colormap per viewmodel and I think this should be bound to one HeatmapColourMap each to display the values of color.
So the ItemSource of SciChartGroup is ChartPaneViewModels which contains x number of Viewmodels where I add HeatMapRenderableSeriesViewModel with dataseries to ObservableCollection. Is this possible? I’m having some trouble displaying the correct colors for the data.

  • You must to post comments

Hi Oistein,

Sorry about the late reply! I would actually suggest in your case not using SciChartGroup (as this was designed for multi pane stock charts) but instead using a WPF ItemsControl.

SciChartGroup inherits ItemsControl so what I’m about to tell you applies to both.

You need to define an ItemsTemplate for each ‘chart pane’ and bind ItemsControl.ItemSource to a collection of ChartViewModels. Each ‘ItemTemplate’ effectively binds to one ChartViewModel.

The ItemTemplate should contain enough XAML to instantiate a chart, bind to properties for RenderableSeries, configuration of the chart. You can also include a HeatmapColorMap control inside the ItemTemplate if you wish.

So a code sample might look like this:

  <ItemsControl ItemsSource="{Binding ChartViewModels}">
                    <s:SciChartSurface x:Name="sciChart" Padding="0" BorderThickness="0">

                            <s:FastHeatMapRenderableSeries x:Name="heatmapSeries"
                                                   DataSeries="{Binding DataSeriesInViewModel}">
                                        <GradientStop Offset="0" Color="DarkBlue" />
                                        <GradientStop Offset="0.2" Color="CornflowerBlue" />
                                        <GradientStop Offset="0.4" Color="DarkGreen" />
                                        <GradientStop Offset="0.6" Color="Chartreuse" />
                                        <GradientStop Offset="0.8" Color="Yellow" />
                                        <GradientStop Offset="1" Color="Red" />

                            <s:NumericAxis DrawMajorBands="True" />

                            <s:NumericAxis DrawMajorBands="True" />

                                <s:RolloverModifier ShowTooltipOn="Always"  UseInterpolation="True" ReceiveHandledEvents="True"/>
                                <s:RubberBandXyZoomModifier ExecuteOn="MouseLeftButton" />
                                <s:ZoomExtentsModifier ExecuteOn="MouseDoubleClick" />


                    <s:HeatmapColourMap Margin="10,10,60,40" 
                              Background="{Binding ElementName=sciChart, Path=Background}"
                              ColorMap="{Binding ElementName=heatmapSeries, Path=ColorMap}"
                              Minimum="{Binding ElementName=heatmapSeries, Path=Minimum}"
                              Maximum="{Binding ElementName=heatmapSeries, Path=Maximum}"
                              Orientation="Vertical" />


Bindings you should make?

Well you need a ViewModel containing ObservableCollection of ChartViewModels at the top level. This is what ItemsControl.ItemsSource should bind to.

Now each ChartViewModel should contain a Heatmap2DArrayDataSeries property. I’ve named it DataSeriesInViewModel but of course feel free to rename it.

This should display multiple heat maps one above another and allow you to dynamically add/remove them by adding removing ChartViewModels.

Let me know if it helps!

Best regards,

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.