Syncfusion Blazor Chart Export Fails with Gradient Fill (NullReferenceException in Visual Studio, No Error in Playground)

[Ashish Khanal]

Description

When exporting a Syncfusion Blazor Range Chart with a gradient fill (using `Fill="url(#gradient1)"`), the export does not work.

No image is produced, and a `NullReferenceException` is thrown during export while running locally in Visually studio but there's no error shown in online blazor playground.

In either case, the export doesn't work (no image is shown after export).

Runnable Minimal Repro:

https://blazorplayground.syncfusion.com/VXrSNFiocSAaiDuJ

Steps to Reproduce:

1. Render the chart and click "Export Chart as PNG".

2. In Visual Studio, a `NullReferenceException` is thrown and no image is produced.

3. In the Syncfusion Blazor Playground, no error is thrown, but the export still doesn't work.

Expected:

Export should succeed and show the full chart with the gradient fill.

Request:

Please help resolve the export issue so that charts with gradient fills can be exported as PNG (and SVG) without errors.

Thank you.

[Ashish Khanal]

Repro code (for future reference):

@using Syncfusion.Blazor.Charts

<h3>Minimal Repro: Range Chart Export with Gradient Fill</h3>

<SfChart @ref="chartRef" Title="Range Chart with Gradient Fill" Width="600px" Height="350px">

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />

    <ChartPrimaryYAxis Title="Value" />

    <ChartSeriesCollection>

        <ChartSeries DataSource="@RangeData"

                     XName="Category"

                     High="High"

                     Low="Low"

                     Name="Range"

                     Type="Syncfusion.Blazor.Charts.ChartSeriesType.RangeColumn"

                     Fill="url(#gradient1)">

        </ChartSeries>

    </ChartSeriesCollection>

    <ChartLegendSettings Visible="false" />

    <ChartEvents OnExportComplete="OnExportComplete" />

</SfChart>

<!-- SVG Gradient Definition -->

<svg style="height:0">

    <defs>

        <linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">

            <stop offset="0%" style="stop-color:#FF0000;stop-opacity:1" />

            <stop offset="100%" style="stop-color:#0000FF;stop-opacity:1" />

        </linearGradient>

    </defs>

</svg>

<button class="e-btn" @onclick="ExportChart">Export Chart as PNG</button>

@if (!string.IsNullOrEmpty(ExportedImage))

{

    <h4>Exported PNG Output:</h4>

    <div style="border:1px solid #ccc; margin-top:8px; padding:8px;">

        <img src="@ExportedImage" style="width:100%;max-width:600px;" />

    </div>

}

@if (!string.IsNullOrEmpty(ErrorMessage))

{

    <div style="color:red; margin-top:10px;">@ErrorMessage</div>

}

@code {

    private SfChart? chartRef;

    private string? ExportedImage;

    private string? ErrorMessage;

    public class RangePoint

    {

        public string Category { get; set; } = "";

        public double High { get; set; }

        public double Low { get; set; }

    }

    private List<RangePoint> RangeData = new()

    {

        new RangePoint { Category = "A", High = 30, Low = 10 },

        new RangePoint { Category = "B", High = 40, Low = 20 },

        new RangePoint { Category = "C", High = 35, Low = 15 }

    };

    private async Task ExportChart()

    {

        ErrorMessage = null;

        ExportedImage = null;

        try

        {

            if (chartRef is not null)

            {

                await chartRef.ExportAsync(Syncfusion.Blazor.Charts.ExportType.PNG, "ChartExport", null, false, true);

            }

        }

        catch (Exception ex)

        {

            ErrorMessage = ex.ToString();

        }

    }

    private void OnExportComplete(ExportEventArgs args)

    {

        try

        {

            if (!string.IsNullOrEmpty(args.Base64))

            {

                ExportedImage = $"data:image/png;base64,{args.Base64}";

            }

            else

            {

                ErrorMessage = "Export failed: No image data returned.";

            }

        }

        catch (Exception ex)

        {

            ErrorMessage = ex.ToString();

        }

        StateHasChanged();

    }

}

[Durga Gopalakrishnan]

Hi Ashish,

We’ve reviewed the issue you reported in both Visual Studio and the Playground environment. In Visual Studio, we were unable to reproduce the ‘NullReferenceException’ during chart export. For your reference, we’ve attached a sample project using your shared code snippet along with a screenshot.

Screenshot :

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/PNGGradient.zip

We have resolved the problem faced in playground while displaying the base64 string as an image. kindly check with the below link.

Playground Sample : https://blazorplayground.syncfusion.com/VXrSNFiocSAaiDuJ

If you are still facing problem, please share the video demonstrating the reported problem in VS so that it will be helpful for us to analyze further and assist you better. Please let us know if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Ashish Khanal]

This solution is what worked for me:

Syncfusion Blazor Chart Export Fails ... | Blazor Forums | Syncfusion®

[Durga Gopalakrishnan]

Most welcome. Please get back to us if you need any further assistance. We are always happy in assisting you.