Search results

Print

The rendered chart can be printed directly from the browser by calling the public method Print. You can pass array of ID of elements or element to this method. By default it take element of the chart.

print.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart @ref="ChartObj" Title="Inflation - Consumer Price" Width="80%" Height="90%">
        <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category">
        </ChartPrimaryXAxis>
  
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ConsumerDetails" XName="X" YName="YValue" Type="ChartSeriesType.Column">
            </ChartSeries>
        </ChartSeriesCollection>
</EjsChart>

    <Syncfusion.EJ2.Blazor.Buttons.EjsButton Id="button" Content="Print" @Onclick="@Click" IsPrimary="true" CssClass="e-flat"></Syncfusion.EJ2.Blazor.Buttons.EjsButton>

@code{
    
    EjsChart ChartObj;

    private void Click(UIMouseEventArgs args)
    {
        ChartObj.Print();
    }

    public class ChartData
    {
        public string X;
        public double YValue;
    }

    public List<ChartData> ConsumerDetails = new List<ChartData>
    {
        new ChartData { X= "USA", YValue= 46 },
        new ChartData { X= "GBR", YValue= 27 },
        new ChartData { X= "CHN", YValue= 26 },
        new ChartData { X= "UK", YValue= 26 },
        new ChartData { X= "AUS", YValue= 26 },
        new ChartData { X= "IND", YValue= 26 },
        new ChartData { X= "DEN", YValue= 26 },
        new ChartData { X= "MEX", YValue= 26 },
    };
}

Export

The rendered chart can be exported to JPEG, PNG, SVG, or PDF format using the Export method in chart. The input parameters for this method are Export Type for format and FileName for result.

The optional parameters for this method are,

  • Orientation - either portrait or landscape,
  • Controls - pass collections of controls for multiple export,
  • Width - width of chart export, and
  • Height - height of chart export.
export.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart @ref="ChartObj" Title="Inflation - Consumer Price" Width="80%" Height="90%">
    <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category">
    </ChartPrimaryXAxis>
  
   <ChartSeriesCollection>
        <ChartSeries DataSource="@DataSource" XName="X" YName="YValue" Type="ChartSeriesType.Column">
        </ChartSeries>
   </ChartSeriesCollection>
</EjsChart>
<Syncfusion.EJ2.Blazor.Buttons.EjsButton Id="button" Content="Export" @Onclick="@Click" IsPrimary="true"
                                         CssClass="e-flat"></Syncfusion.EJ2.Blazor.Buttons.EjsButton>

@code{

EjsChart ChartObj;

private void Click(UIMouseEventArgs args)
    {
        ChartObj.Export(ExportType.PNG, "pngImage");
    }

public class ChartData
    {
        public string X;
        public double YValue;
    }

public List<ChartData> ConsumerDetails = new List<ChartData>
    {
        new ChartData { X= "USA", YValue= 46 },
        new ChartData { X= "GBR", YValue= 27 },
        new ChartData { X= "CHN", YValue= 26 },
        new ChartData { X= "UK", YValue= 26 },
        new ChartData { X= "AUS", YValue= 26 },
        new ChartData { X= "IND", YValue= 26 },
        new ChartData { X= "DEN", YValue= 26 },
        new ChartData { X= "MEX", YValue= 26 },
    };
    
}

See Also