What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
To capture a Highcharts chart with html2canvas, wait until the chart and its assets have rendered, pass the chart’s container element to html2canvas(), then download the returned canvas with toBlob(). This works when you need a client-side image of the chart’s rendered page content, but it is not a native pixel screenshot: html2canvas rebuilds the image from DOM and CSS, so some SVG or CSS details may differ. If you only need the chart, Highcharts’ own export module is usually the more direct option; local PNG, JPEG, and SVG export is the default starting with Highcharts 12.3.0.
Capture a Highcharts chart with html2canvas
Load html2canvas on the page, select the element that contains the chart, and call it only after Highcharts has finished creating or updating the chart. The example below downloads a PNG. It assumes the page already has a chart in #container and that html2canvas is available as window.html2canvas.
const chartElement = document.querySelector('#container');
if (!chartElement) {
throw new Error('Highcharts container #container was not found');
}
// Run this only after Highcharts has rendered the chart and its data.
html2canvas(chartElement, {
backgroundColor: '#ffffff',
useCORS: true,
scale: window.devicePixelRatio
}).then(canvas => {
canvas.toBlob(blob => {
if (!blob) {
throw new Error('The browser could not create a PNG blob');
}
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'highcharts-chart.png';
link.click();
// Allow the browser to start the download before revoking the URL.
setTimeout(() => URL.revokeObjectURL(url), 1000);
}, 'image/png');
}).catch(error => {
console.error('Could not capture the chart:', error);
});For a button-driven capture, put the call inside the button handler, but still ensure the chart is ready first. The element passed to html2canvas should be the chart’s own container, not a broad page section, unless you intentionally want surrounding headings or controls included.
Wait for chart rendering and asynchronous assets
Highcharts can render before data, web fonts, or image assets have finished loading. Capture only after the relevant work completes. For a chart created by your code, invoke capture from a point after chart creation or update has completed; when data arrives asynchronously, wait for that data and allow the chart’s render cycle to finish. If the page uses fonts or images, wait for them too. A premature capture commonly produces a blank chart, missing labels, or incomplete symbols.
#1 Best Overall
Keep the capture target stable
Set a predictable pixel width and height for the chart container before capture. If the layout changes while html2canvas is reading it, the output may not match the intended chart dimensions. Clipped labels can result from overflow constraints on the container or its ancestors; temporarily remove those constraints or capture a larger element that includes the full chart.
What html2canvas captures—and what it does not
html2canvas does not ask the browser for a screenshot of already-painted pixels. It reads the target’s DOM and CSS and reconstructs an image from the properties it supports. Consequently, the result can differ from what appears on screen, particularly where a chart relies on SVG rendering details, complex styling, or HTML labels. The html2canvas documentation describes its purpose as taking “screenshots” of webpages or parts of them directly in the user’s browser: html2canvas documentation.
This distinction matters when you are choosing a method. html2canvas can include ordinary HTML around a chart if you select a containing element; native Highcharts export is designed to export the chart itself. If exact chart rendering matters, compare the html2canvas output with Highcharts’ native export before adopting it for production.
Cross-origin images and iframes
Images loaded from another origin can be excluded or make a capture unusable unless they are served with compatible CORS headers or delivered through a same-origin proxy. Setting useCORS: true asks html2canvas to attempt CORS-enabled image loading; it cannot override browser security or make a remote server grant access. Cross-origin iframes cannot be rendered by html2canvas. See the project’s FAQ on browser restrictions.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
If a chart uses external images, verify their origin and response headers before capture. A same-origin copy or a properly configured proxy is the practical fix when the image host does not permit cross-origin use.
Choosing PNG settings
The example uses a white background so transparent chart areas do not become unexpectedly transparent in the PNG, and uses the device pixel ratio to make the canvas higher resolution on high-density displays. A larger scale also increases canvas dimensions and memory use, so choose a fixed scale when you need predictable output size or when large charts strain the browser. Use toBlob() for downloads or uploads rather than building a large data URL unless you specifically need a URL string.
When to use Highcharts’ native export instead
If the deliverable is the chart rather than an arbitrary section of the page, use Highcharts’ exporting module first. Highcharts documents downloads in PDF, PNG, JPG, and SVG. Starting with Highcharts 12.3.0, the exporting.js module handles PNG, JPEG, and SVG exports locally by default: client-side export documentation.
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>Once you have a chart instance, export a PNG with:
chart.exportChart({
type: 'image/png',
filename: 'highcharts-chart'
});The export module provides the chart-focused route and output-size controls. The choice between it and html2canvas is not simply about which can create a PNG; it is about whether you need a reconstruction of page content or the chart’s own export behavior.
Rank #3
| Need | html2canvas | Highcharts export |
|---|---|---|
| Capture surrounding HTML together with the chart | Yes, by targeting a containing element; output depends on html2canvas DOM/CSS support. | Designed for exporting the chart, not arbitrary surrounding page content. |
| Chart rendering fidelity | Reconstructs from DOM and CSS; supported-property limits can cause differences. | Uses Highcharts’ chart export path; local PNG, JPEG, and SVG are the default from 12.3.0. |
| Cross-origin images | Needs same-origin access or compatible CORS/proxy arrangement; cannot render cross-origin iframes. | Chart export behavior depends on chart features and local or remote export path. |
| Output formats | Canvas-based image output such as PNG; use browser canvas methods for serialization. | PNG, JPEG, SVG, and PDF are supported through the exporting module; local PDF has additional requirements. |
| Export dimensions | Controlled by target layout and canvas scale. | Supports exporting.sourceWidth, exporting.sourceHeight, and exporting.scale. |
Set reproducible export dimensions
Highcharts documents exporting.sourceWidth and exporting.sourceHeight for source dimensions, and exporting.scale for scaling. When no explicit dimensions are supplied, its documentation gives a 600 × 400 pixel source size and a default scale of 2. Set dimensions explicitly when you need consistent output across responsive layouts; the effective image dimensions depend on the source size and scale. Consult the exporting options reference for the configuration applicable to your chart version.
Local, remote, and PDF export
Highcharts 12.3.0 and later use local PNG, JPEG, and SVG export by default. Setting exporting.local: false selects the remote export server. The remote flow sends generated SVG from the browser to export.highcharts.com and receives the rendered output; if chart data or configuration must remain under your control, use local export or consider a self-hosted server. Highcharts documents a Node service based on Puppeteer that accepts chart options or SVG and outputs PNG, JPG, PDF, or SVG: Node export server documentation.
Local PDF export is a special case: it requires offline-exporting.js and the jsPDF and svg2pdf dependencies. PDF export with images falls back to the export server. Highcharts may also fall back to the server for unsupported browsers or features. If you disable fallback, configure exporting.error to handle failures; Highcharts warns that complex charts can exceed Blob or data-URL limits. See the Highcharts API reference for the options and version details.
Privacy, reliability, and performance choices
- For a one-off browser download: html2canvas avoids a chart export-server request, but the browser must be able to read all included content and has to render the image locally.
- For chart-only output: Highcharts local export keeps the work in the client for supported PNG, JPEG, and SVG exports on version 12.3.0 and later.
- For remote Highcharts export: account for the fact that generated SVG is sent to Highsoft’s public export service. Use local export or a self-hosted Node/Puppeteer service when that transfer is unsuitable for your data-handling requirements.
- For large captures: high device-pixel ratios and large target dimensions create larger canvases, which can consume substantial browser memory. Lower the scale or reduce the target size if the browser fails to produce the output.
- For repeatable production output: pin the chart container or export source dimensions, wait for fonts and data, and handle rejected promises or null blobs rather than assuming every capture succeeds.
Troubleshooting missing or incorrect chart captures
The image is blank
- Confirm that
document.querySelector('#container')returns the chart’s actual container. - Wait until Highcharts has rendered and asynchronous data is present before calling html2canvas.
- Check that the container has nonzero width and height and is not hidden when captured.
- Try the native Highcharts export path to distinguish an html2canvas reconstruction issue from a chart-rendering issue.
Images or chart symbols are missing
Check whether those assets are cross-origin. Enable useCORS: true only as an attempt to use valid server-provided CORS access; it is not a bypass. Serve assets from the same origin or configure an appropriate proxy if the remote host does not allow access.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Labels or edges are clipped
Inspect the chart container and its ancestors for fixed dimensions and overflow clipping. Increase the target dimensions or remove the clipping constraint during capture. For a chart export, set Highcharts’ source width and height explicitly instead of relying on responsive page layout.
The capture looks different from the browser
This is expected when html2canvas encounters CSS or SVG details it cannot reproduce. Check HTML labels, SVG effects, and unusual styles; for chart fidelity, use the native Highcharts export or compare the two outputs in the browsers and chart configuration you support.
Highcharts export falls back or fails
Remote fallback may be used for unsupported browser features. If using local-only export, provide an exporting.error handler and account for the documented Blob or data-URL size limits on complex charts. If local PDF fails, check that the offline-exporting module and its jsPDF/svg2pdf dependencies are present; charts with images use the export server for PDF.
Or skip the browser setup
If you need a screenshot of a rendered website rather than a chart export, ScreenshotNeo is a website screenshot API and MCP server for developers. Its HTTP endpoint returns an image or PDF from a URL, and its MCP tools let AI agents call take_screenshot, get_page_info, and capture_pdf. It is not a replacement for Highcharts’ chart-specific export settings when you need a precisely configured chart file.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteOne GET request can capture a public page. See the ScreenshotNeo API documentation for request and response options.
curl -G "https://api.screenshotneo.com/v1/shot"
-d access_key=YOUR_API_KEY
--data-urlencode url=https://stripe.com
-o shot.webpimport requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const bytes = await res.arrayBuffer();ScreenshotNeo accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; those steps can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses include X-Page-Verdict and X-Billed headers. It offers an MCP server for AI agents, 1,000 shots per month free with no card, and paid plans starting at $5 for 3,000 shots. Sign up for ScreenshotNeo’s free plan.
Frequently Asked Questions
Can html2canvas capture a Highcharts chart rendered as SVG?
It can attempt to reconstruct the chart from the DOM and CSS, but SVG-related rendering details may differ from the browser display. Use Highcharts export when chart fidelity is the priority.
Can I capture a chart inside a cross-origin iframe?
No. html2canvas cannot render cross-origin iframes because browser same-origin restrictions prevent access to their contents.
Free tools Windows power users keep installed
One-click scans. No signup required.
Does Highcharts export send my chart to a server?
Not for the default local PNG, JPEG, and SVG path in Highcharts 12.3.0 and later. The remote export path sends generated SVG to Highsoft’s export server.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
