Only top of chart is printed

[Yongkee Cho]

Hi, 

As shown below, Only part of the chart is printed. Any resoluion?

await _chart.PrintAsync();

[Durga Gopalakrishnan]

Hi Yongkee,

Thanks for using Syncfusion products.

We have ensured your reported scenario by specifying large height for chart. We were able to print the whole chart using PrintAsync method. We have attached the tested sample and screenshot for your reference. Please check with below sample.

public async Task PrintChart(MouseEventArgs args)

{

     await chartInstance.PrintAsync();

}

Sample : https://blazorplayground.syncfusion.com/hjrTtIAWJRJZRmwW

If you are still facing problem, please try to replicate an issue in above sample or share us issue reproduced sample to validate this case further from our end. Please let us know if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Yongkee Cho]

Sorry, whichever height I give (100%, 100px, 1500px) it still shows only top.

<SfDialog @ref="_dialog" ShowCloseIcon="true" Visible="false">

    <DialogTemplates>
        <Header>@Model?.Name</Header>
        <Content>
            <SfChart ID="resultchart" @ref=_chart Palettes="@Model?.Palettes" Height="1500px">
                <ChartTooltipSettings Enable="true" Shared="true" Format="${series.name} : ${point.x} : ${point.y}"></ChartTooltipSettings>
                <ChartCrosshairSettings Enable="true" LineType="LineType.Vertical" />
                <ChartZoomSettings EnableMouseWheelZooming="true" EnablePinchZooming="true" EnableSelectionZooming="true" />
                <ChartPrimaryXAxis Title="@Model?.XAxis" ValueType="Syncfusion.Blazor.Charts.ValueType.Double" />
                @* <ChartPrimaryYAxis Title="@Model.YAxis" /> *@
                <ChartSeriesCollection>
                    @foreach (var result in Model.YAxisResults)
                    {
                        <ChartSeries Name="@result" DataSource="@Results" XName="@Model.XAxis" YName="@result" GroupName="@Model.YAxis" Type="ChartSeriesType.Line" Width="2" />
                    }
                </ChartSeriesCollection>
                <ChartLegendSettings Visible="true" Position="LegendPosition.Top" Alignment="Alignment.Far" ToggleVisibility="true">
                    <ChartLegendBorder Color="black" Width="0.2" />
                    <ChartLegendMargin Bottom="5" />
                </ChartLegendSettings>
            </SfChart>
        </Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="Excel Export" IsPrimary="true" IsFlat="true" IconCss="bi file-earmark-excel" OnClick="@ExportExcelAsync" />
        <DialogButton Content="PNG Export" IsPrimary="true" IsFlat="true" IconCss="bi filetype-png" OnClick="@ExportPngAsync" />
        <DialogButton Content="Print" IsPrimary="true" IsFlat="true" IconCss="bi printer" OnClick="@PrintAsync" />
        <DialogButton Content="Cancel" IsFlat="true" IconCss="bi x" OnClick="@CloseAsync" />
    </DialogButtons>
</SfDialog>
<style>
    .e-dlg-fullscreen {
        max-height: 100% !important;
    }
</style>

@code {

    private SfDialog? _dialog;

    private SfChart? _chart;

    [Parameter]

    public AnalysisDataModel? Model { get; set; }

    [Parameter]

    public ICollection<TResult>? Results { get; set; }

    public async Task OpenAsync() => await _dialog?.ShowAsync(true)!;

    private async Task CloseAsync() => await _dialog?.HideAsync()!;

    private async Task ExportExcelAsync() =>

        await _chart?.ExportAsync(Syncfusion.Blazor.Charts.ExportType.XLSX, Model?.Name)!;

    private async Task ExportPngAsync() =>

        await _chart?.ExportAsync(Syncfusion.Blazor.Charts.ExportType.PNG, Model?.Name)!;

    private async Task PrintAsync() => await _chart?.PrintAsync()!;

}

[Durga Gopalakrishnan]

Yongkee,

We have prepared with your attached code snippet. The chart is displayed based on dialog height and while clicking the print button, the rendered chart is printed properly without any cropping. We have attached the tested sample and screenshot for your reference.

Initial Rendering

After clicking Print button

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

Note : If you are facing problem at initial rendering, we suggest you to re render the chart using RefreshAsync method after dialog is opened using Opened event.

<SfDialog>

  <DialogTemplates>

   <Content>

        <div style="height:100%; width:100%">

            <SfChart ID="resultchart" @ref=_chart></SfChart>

        </div>

    </Content>

  </DialogTemplates>

  <DialogEvents Opened="@AfterOpen"></DialogEvents>

</SfDialog>

@code {

private void AfterOpen(Syncfusion.Blazor.Popups.OpenEventArgs args)

{

     _chart.RefreshAsync();

}

}

If you are still facing, please share the following information which will be helpful for further analysis and provide you the solution sooner.

• Try to replicate an issue in above sample.
• Please share an issue reproduced sample or code snippet with full configuration.
• Share the NuGet package version and .NET version.
• Blazor Server or Wasm or Web App.
• Default system configuration.

Please let us know if you have any concerns.

[Yongkee Cho]

Unfortuanately, it doesn't help.

BTW, the <div style="width:100%;height:100%"> seems not necessary as the child div are already 100%.

BTW, can you please showthe argument of PrintAsync, ElementReference can

[Yongkee Cho]

I found the culprit.

the overflow: hidden in the print mode makes it hidden.

[Durga Gopalakrishnan]

Yongkee,

By default, we have specified overflow as hidden for chart container for displaying chart elements like tooltip within a container. We request you to ensure by specifying overflow as auto or visible for chart using CSS before printing the chart. If you are still facing problem, please share your issue reproduced sample to check the reported case from our end.

Kindly revert us if you have any concerns.