Chart printing sizing issues

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);
    }
}

1 Reply

KM Kesavan Muthusamy Syncfusion Team September 13, 2019 02:13 PM UTC

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 


Loader.
Up arrow icon