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 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.