How to export the chart to the PDF document in React Chart?

This article explains how to export the chart to a PDF document in the React Chart.

Customize the export of the chart to a PDF document

You can easily export the chart to PDF format using the export method in the chart. This method accepts input parameters for the format type and the file name of the resulting document.

In the following code example, the Chart export into a PDF document.

Index.js

import { createRoot } from 'react-dom/client';
import * as React from 'react';
import { useEffect, useRef } from 'react';
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Category, ColumnSeries, Inject, Legend, Export, DataLabel
      } from '@syncfusion/ej2-react-charts';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

const ChartExport = () => {
useEffect(() => {
  const button = document.getElementById('chart-export');
  button.addEventListener('click', onClick);
}, []);
let chartInstance = useRef(null);

const onClick = (e) => {
  chartInstance.current.exportModule.export('PDF', 'Chart');
};
return (
        <ChartComponent
          id="charts"
          ref={chartInstance}
          primaryXAxis={{
            title: 'Manager',
            valueType: 'Category'
          }}
          primaryYAxis={{
            title: 'Sales',
            minimum: 0,
            maximum: 20000
          }}
          title="Sales Comparision"
        >
          <Inject
            services={[ColumnSeries, Category, Legend, Export, DataLabel]}
          />
          <SeriesCollectionDirective>
            <SeriesDirective
              dataSource={data}
              name="Measurements (in Gigawatt)"
              xName="x"
              yName="y"
              width={2}
              marker={{
                dataLabel: {
                  visible: true,
                  position: 'Middle',
                  font: { fontWeight: '600', color: '#ffffff', size: '12px' }
                },
              }}
              type="Column"
            />
          </SeriesCollectionDirective>
        </ChartComponent>
        <ButtonComponent
          id="chart-export"
          iconCss="e-icons e-export icon"
          isPrimary={true}
        >
          Export
        </ButtonComponent>
    );
};
export default ChartExport;

const root = createRoot(document.getElementById('sample'));
root.render(<ChartExport />);

The following screenshot illustrate the output of the above code snippet.

Screenshot:

Sample Output	Exported PDF

View Sample in Stackblitz

Conclusion

I hope you enjoyed learning how to export the chart to a PDF document in the React Chart Component.

You can refer to our React Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Chart example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!