Chart printing sizing issues

[Kyle]

Hi,

I have another question on here about how to print multiple charts if they are dynamically named, but meanwhile I have a question about how the charts resize on print.

If I have a widescreen website with charts on it, then print, it seems that the window opens up and the charts dont resize to be smaller to fit onto a page, and half the chart is off the screen. When I was first testing these blazor components I thought I made a sample page and tested this out because printing easily is important for my project, and I thought it was resizing them to fit and I was impressed and happy, but now it doesn't seem to work and I'm not sure what, if anything, I did differently. Is there a way to set up charts that will get them to resize to the page for printing? 

Here's a short sample showing the problem I'm having.  I have a fairly large monitor, so they are sized for the full screen on page load like I would like, but when I print, the charts get cut off around the 24 line.

If I resize my screen to be the size of paper and then hit print, it looks okay. I guess I just need the popup where the charts load for printing to size down to a paper size before the print prompt comes up, if that is possible to do?

Thanks!

@page "/example"

@using Syncfusion.EJ2.Blazor.Charts;

<style>

    /*.e-chart {

        display: inline-block !important;

    }*/

</style>

<button class="btn btn-primary" @onclick="Print">Print Chart</button>

<br />

<div class="row">

    <div class="col-12">

        <EjsChart  @ref="chart" Width="100%" Height="100%" ID="Chart2" Title="Trend in Sales of Ethical Produce">

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

            <ChartSeriesCollection>

                <ChartSeries DataSource="@MedalDetails" XName="X" YName="YValue" ColumnSpacing="0.2" ColumnWidth="0.7" Type="ChartSeriesType.Bar">

                </ChartSeries>

                <ChartSeries DataSource="@MedalDetails" XName="X" YName="YValue1" ColumnSpacing="0.2" ColumnWidth="0.2" Type="ChartSeriesType.Bar">

                </ChartSeries>

            </ChartSeriesCollection>

        </EjsChart>

        <EjsChart Width="100%" ID="Chart3" Title="UK Trade in Food Groups - 2015">

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

            <ChartSeriesCollection>

                <ChartSeries DataSource="@MedalDetails" XName="X" YName="YValue" ColumnSpacing="0.2" ColumnWidth="0.7" Type="ChartSeriesType.Bar">

                </ChartSeries>

                <ChartSeries DataSource="@MedalDetails" XName="X" YName="YValue1" ColumnSpacing="0.2" ColumnWidth="0.2" Type="ChartSeriesType.Bar">

                </ChartSeries>

            </ChartSeriesCollection>

        </EjsChart>

        <EjsChart Width="100%" ID="Chart4" Title="Inflation - Consumer Price">

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

            <ChartSeriesCollection>

                <ChartSeries DataSource="@MedalDetails" XName="X" YName="YValue" ColumnSpacing="0.2" ColumnWidth="0.7" Type="ChartSeriesType.Bar">

                </ChartSeries>

                <ChartSeries DataSource="@MedalDetails" XName="X" YName="YValue1" ColumnSpacing="0.2" ColumnWidth="0.2" Type="ChartSeriesType.Bar">

                </ChartSeries>

            </ChartSeriesCollection>

        </EjsChart>

    </div>

</div>

@code{

    public class ChartData

    {

        public string X;

        public double YValue;

        public double YValue1;

    }

    public List<ChartData> MedalDetails = new List<ChartData>

{

        new ChartData { X= "USA", YValue= 46, YValue1=56 },

        new ChartData { X= "GBR", YValue= 27, YValue1=17 },

        new ChartData { X= "CHN", YValue= 26, YValue1=36 },

        new ChartData { X= "UK", YValue= 56,  YValue1=16 },

        new ChartData { X= "AUS", YValue= 12, YValue1=46 },

        new ChartData { X= "IND", YValue= 26, YValue1=16 },

        new ChartData { X= "DEN", YValue= 26, YValue1=12 },

        new ChartData { X= "MEX", YValue= 34, YValue1=32},

    };

    public EjsChart chart;

    public void Print()

    {

        String[] chartId = new String[3] { "Chart2", "Chart3", "Chart4" };

        this.chart.Print(chartId);

    }

}

[Kesavan Muthusamy]

Hi Kyle,  

We have analyzed your query. From that, we suggest you use the following workaround as a solution. In that, we changed the chart width before printing the chart and changed to default width once the chart has printed.  

Please find the below code snippet and sample.  

<button class="btn btn-primary" @onclick="Print">Print Chart</button> 

<EjsChart Title="@compId" @ref="chart" ID="@compId" Width="@ChartWidth">     

      <ChartEvents Loaded="ChartLoad"></ChartEvents> 

</EjsChart> 

@code{ 

public void Print() 

    { 

        this.noOfChartLoaded = 0; 

        this.printId = new List<string>(); 

        ChartWidth = "50%";   //here you can set your required width 

        StateHasChanged(); 

        this.isPrint = true; 

 

    } 

 

    public void ChartLoad(ILoadedEventArgs args) 

    { 

        this.noOfChartLoaded++; 

        if(this.noOfChartLoaded == totalData.Count && this.isPrint)   

        { 

            this.chart.Print(this.printId.ToArray()); 

                     this.printId = new List<string>(); 

            ChartWidth = "100%"; //reset to the default width 

            this.isPrint = false; 

        } 

    } 

} 

Sample link: sample 

Please let us know if you have any concerns about this. 

Regards, 

Kesavan