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

0 votes

Fairly simple question: How do you export or save a chart as an image in the JS library?

0 votes

Hello SciChart team,

How do I serialize custom tick placement and labels, generated by TickProviderAPI and LabelProvider? Actually, the main problem is that I need to export high quality (i.e. higher than actual figure size on screen) PNG images in MVVM application and method ExportToFile(fileName, ExportType.Png, false, new Size(…, …)) produces axis ticks and labels as if they were controled by original MinorDelta and MajorDelta parameters. ExportToFile() without size parameter produces output correctly, so that must be due to not-serialized TickProvider and LabeProvider properties (?), which in exported serialized surface string does not exist.

Thank you!

1 vote

Hi all,

I am trying to save a copy of my chart in form of a “Png” image. However I keep getting the following exception:

“Element already has a logical parent. It must be detached from the old parent before it is attached to a new one”

I was wondering if anyone could help me passing through this.

Here is what I do:

I have a main chart surface in my program of which properties are bound to my ViewModel. For instance, as can be seen from the snippet below, my SciChartSurface’s YAxes is bound to an AxisCollection that resides in my ViewModel. Same thing is done for the RenderableSeries, Annotations, ChartModifierGroup, ChartVisibility and the XAxis properties of my Chart Surface:

<sci:SciChartSurface Grid.Row="1" Grid.Column="0"  
                         RenderableSeries="{Binding SciChartSeriesViewModels}"    
                         YAxes="{Binding SciChartYAxesCollection, Mode=TwoWay}"                                         
                         Annotations="{Binding ChartAnnotations}"                                     
                         ChartModifier ="{Binding ChartModifierGroup}"
                         Visibility="{Binding ChartVisibility}"
                         XAxis="{Binding SciChartXAxis}">

Now, In order to save a copy of my chart into a “Png” file, I created a new SciChartsurface in my Viewmodel. This newly created chart is desired to be rendered in the memory so I can save it as an Image (Very similar to what is instructed in: Screenshots, Printing and Export to XPS Traingin module. Somewhere in my ViewModel, after I generated all the required data for creating my chart, I call a function to form a new SciChart (rendered in memory) and perform the saving action:

private void SaveChart()
        SciChartSurface AppSciChart = new SciChartSurface()
            RenderableSeries = SciChartSeriesViewModels,
            XAxis = new TimeSpanAxis(),
            YAxes = SciChartYAxesCollection,
            ChartTitle = "Rendered in memory",
            Annotations = ChartAnnotations

        var parent = AppSciChart.Parent;
        AppSciChart.Width = 1920;
        AppSciChart.Height = 1080;

         ThemeManager.SetTheme(AppSciChart, "BrightSpark");
         AppSciChart.ExportToFile("C:\\Chart.png",SciChart.Core.ExportType.Png, false);


The RenderableSeries, YAxis and Annotations of the Chart Surface in the above code (AppSciChart) are the same as the ones I used for my main chart in my XAML code (First Snippet above).

My main chart surface in my application shows up fine, and performs what it is supposed to, but as soon as the SaveChart() is called, the program stops with an Unhandled Exception: System.InvalidOperationException: ‘Element already has a logical parent. It must be detached from the old parent before it is attached to a new one.’

I was wondering if anybody could let me know what I am possibly missing here!

Many thanks!

Showing 3 results
This template supports the sidebar's widgets. Add one or use Full Width layout.