To generate a PDF document from a Highcharts visualization, the exporting module must be integrated into your project. Instead of embedding the full minified source directly, include it via a CDN script tag or an ES module import:

<script src="https://code.highcharts.com/modules/exporting.js"></script>

Configure the chart instance with the desired data and styling. For example, a line chart tracking technology sector growth:

const techChart = Highcharts.chart('render-target', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Technology Sector Growth (2015-2022)' 
    },
    yAxis: {
        title: {
            text: 'Market Value (Billions)' 
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },
    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2015
        }
    },
    series: [{
        name: 'Cloud Computing',
        data: [25, 40, 55, 72, 90, 110, 135, 160]
    }, {
        name: 'AI Development',
        data: [10, 15, 25, 45, 80, 130, 190, 250]
    }, {
        name: 'Cybersecurity',
        data: [30, 32, 38, 42, 55, 70, 88, 105]
    }]
});

Trigger the PDF generation using the exportChart method. Bind this action to a DOM event, such as a button click:

document.getElementById('download-btn').addEventListener('click', () => {
    techChart.exportChart({
        type: 'application/pdf',
        filename: 'tech-growth-report'
    });
});

The type parameter specifies the output format using MIME types. While application/pdf generates a document, other valid MIME types supported by the Highcharts export server include image/png, image/jpeg, and image/svg+xml. The filename string determines the downloaded file's name without the extension.