SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and iOS Chart & 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!

Please note: SciChart team will only answer questions from customers with active support subscriptions. Expired support questions will be ignored. If your support status shows incorrectly, contact us and we will be glad to help.


I’m attempting to export a heatmap to .png using the SciChartSurface.ExportToFile() method. The problem is the corresponding HeatmapColorMap is not included in this exported image.

Is there a way to render the image and include the HeatmapColorMap as an overlay?

  • You must to post comments
Best Answer

Only if the HeatmapColorMap is a child of the SciChartSurface.

You can do this by hosting it inside a BoxAnnotation.

Try this code:

<Window x:Class="WpfApp23.MainWindow"
        Title="MainWindow" Height="350" Width="525">
            <s:GradientStopsToLinearGradientBrushConverter x:Key="ColorsToLinearGradientBrushConverter"/>

        <s:SciChartSurface x:Name="sciChart">

                <s:FastUniformHeatmapRenderableSeries x:Name="heatmapSeries" Opacity="0.9">
                        <s:HeatmapColorPalette Maximum="200">
                                <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:BoxAnnotation X1="0" X2="1" Y1="0" Y2="1" CoordinateMode="Relative" Background="Transparent">
                            <Border x:Name="PART_BoxAnnotationRoot"
                                    Margin="{TemplateBinding Margin}"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}">
                                               Background="{Binding ElementName=sciChart, Path=Background}"
                                               Foreground="{Binding ElementName=sciChart, Path=Foreground}"
                                               ColorMap="{Binding ElementName=heatmapSeries, Path=ColorMap.GradientStops, Converter={StaticResource ColorsToLinearGradientBrushConverter}}"
                                               Minimum="{Binding ElementName=heatmapSeries, Path=ColorMap.Minimum, Mode=TwoWay}"
                                               Maximum="{Binding ElementName=heatmapSeries, Path=ColorMap.Maximum, Mode=TwoWay}"
                                               Orientation="Vertical" />

        <Button Margin="40" Content="Export me!" Click="OnExportClick" HorizontalAlignment="Left" VerticalAlignment="Top"/>

Code behind

using System;
using System.Diagnostics;
using System.Windows;
using SciChart.Charting.Model.DataSeries;
using SciChart.Charting.Model.DataSeries.Heatmap2DArrayDataSeries;
using SciChart.Core;

namespace WpfApp23
    public partial class MainWindow : Window
        public MainWindow()

            heatmapSeries.DataSeries = CreateSeries(0, 300, 200, 0, 100);

        private IDataSeries CreateSeries(int index, int width, int height, double cpMin, double cpMax)
            var random = new Random(Environment.TickCount << index);
            double angle = Math.PI * 2 * index / 30;
            int w = width, h = height;
            var data = new double[h, w];
            for (int x = 0; x < w; x++)
            for (int y = 0; y < h; y++)
                var v = (1 + Math.Sin(x * 0.04 + angle)) * 50 + (1 + Math.Sin(y * 0.1 + angle)) * 50 * (1 + Math.Sin(angle * 2));
                var cx = w / 2; var cy = h / 2;
                var r = Math.Sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy));
                var exp = Math.Max(0, 1 - r * 0.008);
                var zValue = (v * exp + random.NextDouble() * 50);
                data[y, x] = (zValue > cpMax) ? cpMax : zValue;
            return new UniformHeatmapDataSeries<int, int, double>(data, 0, 1, 0, 1);

        private void OnExportClick(object sender, RoutedEventArgs e)
            sciChart.ExportToFile("C:/dev/test.png", ExportType.Png, false);

This is tested as working in SciChart WPF v5.1

Best regards,

  • Chris Favaro
    Wonderful! This is exactly what I was looking for. Thank you.
  • Ammar Anwar Khan
    Using BoxAnnotation will only help in drawing HeaMapColorMap within plotting area. I do not want to obstruct the plot area. I want to have this ColoMap outside of plot area, next to Y-Axis. Any ideas how to implement it?
  • Nazariy Pelyushkevych
    @Ammar Anwar Khan, i can suggest you to use WPF RenderTargetBitmap on a parent container for both SciChartSurface and HeatmapColorMap. I believe that should be Grid, and then save it to file.
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.