Print and Export in ASP.NET Core Chart component

8 May 202424 minutes to read

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 takes element of the chart.

CSHTML
Print.cs
<ejs-chart id="container" title="Inflation - Consumer Price" width="80%" height="90%">
        <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" name="Germany" xName="x" width="2" opacity="1" yName="yValue" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
            </e-series>
        </e-series-collection>
</ejs-chart>
<div>
   <ejs-button id="button" content="Print" iconCss="e-icons e-play-icon" cssClass="e-flat" isPrimary="true"></ejs-button>
</div>
<script>
    document.getElementById('button').onclick = () => {
        var chart = document.getElementById('container').ej2_instances[0];
        chart.print();
    };
</script>
public IActionResult Index()
        {
              List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData { x= "USA", yValue= 46 },
                new ColumnChartData { x= "GBR", yValue= 27 },
                new ColumnChartData { x= "CHN", yValue= 26 },
                new ColumnChartData { x= "UK", yValue= 26 },
                new ColumnChartData { x= "AUS", yValue= 26 },
                new ColumnChartData { x= "IND", yValue= 26 },
                new ColumnChartData { x= "DEN", yValue= 26 },
                new ColumnChartData { x= "MEX", yValue= 26 },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string x;
            public double yValue;
        }

Export

The rendered chart can be exported to JPEG, PNG, SVG, PDF, XLSX, or CSV format using the export method in chart. The input parameters for this method are type for format and fileName for result.

The optional parameters for this method are,

Orientation - either portrait or landscape mode during PDF export,
Controls - pass collections of controls for multiple export,
Width - width of chart export,
Height - height of chart export,
IsVertical - decides the chart export in vertical or horizontal direction,
Header - header for the exported chart,
Footer - footer for the exported chart, and
ExportToMultiplePages - decides to export multiple charts on separate pages for PDF export.

CSHTML
Export.cs
<ejs-chart id="container" title="Inflation - Consumer Price" width="80%" height="90%">
        <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" name="Germany" xName="x" width="2" opacity="1" yName="yValue" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
            </e-series>
        </e-series-collection>
</ejs-chart>
<div>
   <ejs-button id="button" content="Export" iconCss="e-icons e-play-icon" cssClass="e-flat" isPrimary="true"></ejs-button>
</div>
<script>
    document.getElementById('button').onclick = () => {
        var chart = document.getElementById('container').ej2_instances[0];
        chart.export('PNG', 'result');
    };
</script>
public IActionResult Index()
        {
              List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData { x= "USA", yValue= 46 },
                new ColumnChartData { x= "GBR", yValue= 27 },
                new ColumnChartData { x= "CHN", yValue= 26 },
                new ColumnChartData { x= "UK", yValue= 26 },
                new ColumnChartData { x= "AUS", yValue= 26 },
                new ColumnChartData { x= "IND", yValue= 26 },
                new ColumnChartData { x= "DEN", yValue= 26 },
                new ColumnChartData { x= "MEX", yValue= 26 },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string x;
            public double yValue;
        }

Adding header and footer in PDF export

In the export method, specify the following parameters to add a header and footer text to the exported PDF document:

Header - Specify the text that should appear at the top of the exported PDF document.
Footer - Specify the text that should appear at the bottom of the exported PDF document.

CSHTML
Header-footer.cs
<ejs-chart id="container" title="Sales Comparision">
    <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category" title="Manager">
        <e-majorgridlines width="0"></e-majorgridlines>
    </e-chart-primaryxaxis>
    <e-chart-primaryyaxis title="Sales" minimum="0" maximum="20000">
        <e-majorticklines width="0"></e-majorticklines>
    </e-chart-primaryyaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" width="2" yName="y"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
        </e-series>
    </e-series-collection>
</ejs-chart>
<div>
    <ejs-button id="button" content="Export" isPrimary="true" style="float: left"></ejs-button>
</div>
<script>
    document.getElementById('button').onclick = () => {
        var chart = document.getElementById('container').ej2_instances[0];
        const header = {
            content: 'Chart Header',
            fontSize: 15
        };

        const footer = {
            content: 'Chart Footer',
            fontSize: 15,
        };
        chart.exportModule.export('PDF', 'Chart', 1, [chart], null, null, true, header, footer);
    };
</script>
public IActionResult Index()
{
    List<ExcelExportChartData> chartData = new List<ExcelExportChartData>
    {
        new ExcelExportChartData { x= "John",  y= 10000 },
        new ExcelExportChartData { x= "Jake",  y= 12000 },
        new ExcelExportChartData { x= "Peter", y= 18000 },
        new ExcelExportChartData { x= "James", y= 11000 },
        new ExcelExportChartData { x= "Mary",  y= 9700  }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class ExcelExportChartData
{
    public string x;
    public double y;
}

Positioning the header and footer in PDF export

The headers and footers can be positioned anywhere on the PDF page using the x and y properties.

CSHTML
Header-footerPosition.cs
<ejs-chart id="container1" title="Crude Steel Production Annual Growth">
    <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.DateTime">
        <e-majorgridlines width="0"></e-majorgridlines>
    </e-chart-primaryxaxis>
    <e-chart-primaryyaxis title="Million Metric Tons" minimum="0" maximum="20" interval="4">
        <e-majorticklines width="0"></e-majorticklines>
    </e-chart-primaryyaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" width="2" yName="y"
                  type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
        </e-series>
    </e-series-collection>
</ejs-chart>
<div>
    <ejs-button id="button" content="Export" isPrimary="true"></ejs-button>
</div>

<script>
    document.getElementById('button').onclick = () => {
    var chart1 = document.getElementById('container1').ej2_instances[0];
    const header = {
        content: 'Chart Header',
        font: {
            fontSize: 15,
            fontStyle: "TimesNewRoman"
        },            
        x: 10,
        y: 10
    };
    const footer = {
        content: 'Chart Footer',
        fontSize: 15,
        x: 0,
        y: 0
    };
    chart1.exportModule.export('PDF', 'Chart', null, [chart1], null, null, true, header, footer, true);
};
</script>
public IActionResult Index()
{
     List<MultiExportChartData> chartData = new List<MultiExportChartData>
    {
        new MultiExportChartData { x = new DateTime(2012, 01, 01), y = 11.0, y1 = 19.5, y2 = 7.1 },
        new MultiExportChartData { x = new DateTime(2013, 01, 01), y = 12.9, y1 = 17.5, y2 = 6.8 },
        new MultiExportChartData { x = new DateTime(2014, 01, 01), y = 13.4, y1 = 15.5, y2 = 4.1 },
        new MultiExportChartData { x = new DateTime(2015, 01, 01), y = 13.7, y1 = 10.3, y2 = 2.8 },
        new MultiExportChartData { x = new DateTime(2016, 01, 01), y = 12.7, y1 = 7.8,  y2 = 2.8 },
        new MultiExportChartData { x = new DateTime(2017, 01, 01), y = 12.5, y1 = 5.7,  y2 = 3.8 },
        new MultiExportChartData { x = new DateTime(2018, 01, 01), y = 12.7, y1 = 5.9,  y2 = 4.3 },
        new MultiExportChartData { x = new DateTime(2019, 01, 01), y = 12.4, y1 = 5.6,  y2 = 4.7 },
        new MultiExportChartData { x = new DateTime(2020, 01, 01), y = 13.5, y1 = 5.3,  y2 = 5.6 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class MultiExportChartData
{
    public DateTime x;
    public double y;
    public double y1;
    public double y2;
}

Exporting charts into separate page during the PDF export

During PDF export, set the ExportToMultiplePage parameter to true to export each chart as a separate page.

CSHTML
Multi-page.cs
<ejs-chart id="container1" title="Crude Steel Production Annual Growth">
    <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.DateTime">
        <e-majorgridlines width="0"></e-majorgridlines>
    </e-chart-primaryxaxis>
    <e-chart-primaryyaxis title="Million Metric Tons" minimum="0" maximum="20" interval="4">
        <e-majorticklines width="0"></e-majorticklines>
    </e-chart-primaryyaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" width="2" yName="y"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
        </e-series>
    </e-series-collection>
</ejs-chart>
<ejs-chart id="container2" title="Steel Production">
    <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.DateTime">
        <e-majorgridlines width="0"></e-majorgridlines>
    </e-chart-primaryxaxis>
    <e-chart-primaryyaxis title="Million Metric Tons" minimum="0" maximum="20" interval="4">
        <e-majorticklines width="0"></e-majorticklines>
    </e-chart-primaryyaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" width="2" yName="y1"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
        </e-series>
    </e-series-collection>
</ejs-chart>
<ejs-chart id="container3" title="Annual Growth of Crude Steel Production">
    <e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.DateTime">
        <e-majorgridlines width="0"></e-majorgridlines>
    </e-chart-primaryxaxis>
    <e-chart-primaryyaxis title="Million Metric Tons" minimum="0" maximum="20" interval="4">
        <e-majorticklines width="0"></e-majorticklines>
    </e-chart-primaryyaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" width="2" yName="y2"
            type="@Syncfusion.EJ2.Charts.ChartSeriesType.Spline">
        </e-series>
    </e-series-collection>
</ejs-chart>
<div>
    <ejs-button id="button" content="Export" isPrimary="true"></ejs-button>
</div>
<script>
    document.getElementById('button').onclick = () => {
        var chart1 = document.getElementById('container1').ej2_instances[0];
        var chart2 = document.getElementById('container2').ej2_instances[0];
        var chart3 = document.getElementById('container3').ej2_instances[0];
        chart1.exportModule.export('PDF', 'Chart', null, [chart1, chart2, chart3], null, null, true, undefined, undefined, true);
    };
</script>
public IActionResult Index()
{
    List<MultiExportChartData> chartData = new List<MultiExportChartData>
    {
        new MultiExportChartData { x = new DateTime(2012, 01, 01), y = 11.0, y1 = 19.5, y2 = 7.1 },
        new MultiExportChartData { x = new DateTime(2013, 01, 01), y = 12.9, y1 = 17.5, y2 = 6.8 },
        new MultiExportChartData { x = new DateTime(2014, 01, 01), y = 13.4, y1 = 15.5, y2 = 4.1 },
        new MultiExportChartData { x = new DateTime(2015, 01, 01), y = 13.7, y1 = 10.3, y2 = 2.8 },
        new MultiExportChartData { x = new DateTime(2016, 01, 01), y = 12.7, y1 = 7.8,  y2 = 2.8 },
        new MultiExportChartData { x = new DateTime(2017, 01, 01), y = 12.5, y1 = 5.7,  y2 = 3.8 },
        new MultiExportChartData { x = new DateTime(2018, 01, 01), y = 12.7, y1 = 5.9,  y2 = 4.3 },
        new MultiExportChartData { x = new DateTime(2019, 01, 01), y = 12.4, y1 = 5.6,  y2 = 4.7 },
        new MultiExportChartData { x = new DateTime(2020, 01, 01), y = 13.5, y1 = 5.3,  y2 = 5.6 }
    };
    ViewBag.dataSource = chartData;
    return View();
}
public class MultiExportChartData
{
    public DateTime x;
    public double y;
    public double y1;
    public double y2;
}

Export with optional parameters

The rendered chart can be exported to specific orientation, width and height by passing it as optional parameters in the export method of chart.

CSHTML
Export.cs
<ejs-chart id="container" title="Inflation - Consumer Price" width="80%" height="90%">
        <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
        <e-series-collection>
            <e-series dataSource="ViewBag.dataSource" name="Germany" xName="x" width="2" opacity="1" yName="yValue" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
            </e-series>
        </e-series-collection>
</ejs-chart>
<div>
   <ejs-button id="button" content="Export" iconCss="e-icons e-play-icon" cssClass="e-flat" isPrimary="true"></ejs-button>
</div>
<script>
    document.getElementById('button').onclick = () => {
        var chart = document.getElementById('container').ej2_instances[0];
        chart.export('PDF', 'result', 'portrait', [chart], 3508, 2480);
    };
</script>
public IActionResult Index()
        {
              List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData { x= "USA", yValue= 46 },
                new ColumnChartData { x= "GBR", yValue= 27 },
                new ColumnChartData { x= "CHN", yValue= 26 },
                new ColumnChartData { x= "UK", yValue= 26 },
                new ColumnChartData { x= "AUS", yValue= 26 },
                new ColumnChartData { x= "IND", yValue= 26 },
                new ColumnChartData { x= "DEN", yValue= 26 },
                new ColumnChartData { x= "MEX", yValue= 26 },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string x;
            public double yValue;
        }

Multiple chart export

You can export the multiple charts in single page by passing the multiple chart objects in the export method of chart. To export multiple charts in a single page, follow the given steps:

Initially, render more than one chart to export, and then add button to export the multiple charts. In button click, call the export method in charts, and then pass the multiple chart objects in the export method.

CSHTML
Multi-export.cs
<ejs-chart id="container" title="Inflation - Consumer Price" width="80%" height="90%">
            <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
            <e-series-collection>
                <e-series dataSource="ViewBag.dataSource" name="Germany" xName="x" width="2" opacity="1" yName="yValue" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
                </e-series>
            </e-series-collection>
        </ejs-chart>
        <ejs-chart id="container1" title="Inflation - Consumer Price" width="80%" height="90%">
            <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
            <e-series-collection>
                <e-series dataSource="ViewBag.dataSource" name="Germany" xName="x" width="2" opacity="1" yName="yValue" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
                </e-series>
            </e-series-collection>
        </ejs-chart>
<div>
    <ejs-button id="button" content="Export" iconCss="e-icons e-play-icon" cssClass="e-flat" isPrimary="true"></ejs-button>
</div>
<script>
    document.getElementById('button').onclick = () => {
        var chart = document.getElementById('container').ej2_instances[0];
        var chart1 = document.getElementById('container1').ej2_instances[0];
        chart.exportModule.export('PNG', 'chart', 'Landscape', [chart,chart1]);
    };
</script>
public IActionResult Index()
        {
              List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData { x= "USA", yValue= 46 },
                new ColumnChartData { x= "GBR", yValue= 27 },
                new ColumnChartData { x= "CHN", yValue= 26 },
                new ColumnChartData { x= "UK", yValue= 26 },
                new ColumnChartData { x= "AUS", yValue= 26 },
                new ColumnChartData { x= "IND", yValue= 26 },
                new ColumnChartData { x= "DEN", yValue= 26 },
                new ColumnChartData { x= "MEX", yValue= 26 },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string x;
            public double yValue;
        }

Exporting chart using base64 string

The chart can be exported as an image in the form of a base64 string by utilizing HTML canvas. This process involves rendering the chart onto a canvas element and then converting the canvas content to a base64 string.

CSHTML
Base64-export.cs
<ejs-chart id="container">
    <e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="ViewBag.dataSource" xName="x" width="2" opacity="1" yName="yValue" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
        </e-series>
    </e-series-collection>
</ejs-chart>

<ejs-button id="togglebtn" content="Export" iconCss="e-icons e-play-icon" cssClass="e-flat" isPrimary="true"></ejs-button>

<script>
    document.getElementById('togglebtn').onclick = function () {
        var svg = document.querySelector("#container_svg");
        var svgData = new XMLSerializer().serializeToString(svg);
        var canvas = document.createElement("canvas");
        document.body.appendChild(canvas);
        var svgSize = svg.getBoundingClientRect();
        canvas.width = svgSize.width;
        canvas.height = svgSize.height;
        var ctx = canvas.getContext("2d");
        var img = document.createElement("img");
        img.setAttribute("src", "data:image/svg+xml;base64," + btoa(svgData));
        img.onload = function () {
            ctx.drawImage(img, 0, 0);
            var imagedata = canvas.toDataURL("image/png");
            console.log(imagedata); // printed base64 in console
            canvas.remove();
        };
    };
</script>
public IActionResult Index()
        {
              List<ColumnChartData> chartData = new List<ColumnChartData>
            {
                new ColumnChartData { x= "USA", yValue= 46 },
                new ColumnChartData { x= "GBR", yValue= 27 },
                new ColumnChartData { x= "CHN", yValue= 26 },
                new ColumnChartData { x= "UK", yValue= 26 },
                new ColumnChartData { x= "AUS", yValue= 26 },
                new ColumnChartData { x= "IND", yValue= 26 },
                new ColumnChartData { x= "DEN", yValue= 26 },
                new ColumnChartData { x= "MEX", yValue= 26 },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class ColumnChartData
        {
            public string x;
            public double yValue;
        }