We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Chart printing sizing issues

Thread ID:

Created:

Updated:

Platform:

Replies:

147437 Sep 10,2019 10:21 PM UTC Sep 13,2019 02:13 PM UTC Blazor 1
loading
Tags: Charts
Kyle
Asked On September 10, 2019 10:21 PM UTC

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 [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon