For a chart that is already rendered in a browser, use its chart library’s export API when available: Plotly.js provides Plotly.toImage and Plotly.downloadImage, while Highcharts supports local PNG, JPEG, and SVG export by default from version 12.3.0. For server-side rendering, Chart.js can render through a Node.js canvas implementation, and Highcharts documents a Node.js export server. Choose PNG, JPEG, or WebP for a conventional raster image; choose SVG when vector output is appropriate, bearing in mind that some chart content may still be rasterized.
Choose a conversion method
The right method depends on whether the chart already exists in a browser, whether you need to create charts on a server, and whether the result must be a raster image or vector file.
| Situation | Approach | Important qualification |
|---|---|---|
| An existing Plotly.js chart in a browser | Use Plotly.toImage for an image data URL, or Plotly.downloadImage for a download. |
Plotly documents PNG, JPEG, WebP, and SVG. WebGL traces can appear as raster content inside SVG. Plotly static image export. |
| An existing Highcharts chart in a browser | Use the exporting module. | Local PNG, JPEG, and SVG export is the default beginning with Highcharts 12.3.0; behavior depends on version and configuration. Highcharts client-side export. |
| Generate Chart.js images in Node.js | Render the chart configuration using node-canvas or skia-canvas. | This creates the chart in Node.js rather than taking a screenshot of an existing browser chart. Chart.js Node.js guide. |
| Automate Highcharts exports on a server or in batches | Use the Highcharts Node.js export server or command-line tool. | Review the current runtime and deployment requirements before integrating it. Highcharts command-line rendering. |
If a chart library offers a native export API, start there: it knows how to serialize that library’s chart. A browser screenshot is useful when you need the rendered page or chart as it appears on screen, but it is not a substitute for native vector export or a server-side chart renderer.
Export an existing Plotly.js chart
Plotly’s Plotly.toImage returns a promise that resolves to an image data URL. You can put that URL in an anchor to let the user save it. Set the format explicitly so the file type matches the data URL and filename.
Recommended Free Tools
#1 Best Overall
const chart = document.getElementById('chart');
async function savePlotlyChart() {
const dataUrl = await Plotly.toImage(chart, {
format: 'png',
width: 1200,
height: 800
});
const link = document.createElement('a');
link.href = dataUrl;
link.download = 'chart.png';
link.click();
}
document.getElementById('save-chart').addEventListener('click', savePlotlyChart);This assumes Plotly has rendered into an element with the ID chart, and that a button with the ID save-chart exists. The dimensions are example output dimensions; choose values that suit the consuming document or interface. Plotly also offers Plotly.downloadImage for a direct download. The available documented formats are PNG, JPEG, WebP, and SVG; see the Plotly.js static image export documentation for the API details.
SVG is not guaranteed to be entirely vector for every Plotly chart. Plotly notes that WebGL-rendered traces may be represented as raster sections inside an SVG file. If scalable, editable vector content is essential, check the output for the chart types you use rather than assuming the extension alone guarantees vector-only output.
Export an existing Highcharts chart
Load the Highcharts exporting module along with Highcharts, then enable the chart’s export controls or call the exporting API from your own button. From Highcharts 12.3.0, the exporting module handles PNG, JPEG, and SVG locally by default without requiring offline-exporting.js. Earlier releases, browser support, and configuration can change the route used.
// Load Highcharts and its exporting module before this code.
const chart = Highcharts.chart('container', {
title: { text: 'Monthly results' },
series: [{
type: 'line',
data: [12, 19, 15, 24, 21]
}],
exporting: {
buttons: {
contextButton: {
menuItems: ['downloadPNG', 'downloadJPEG', 'downloadSVG']
}
}
}
});
// Optional custom button:
document.getElementById('save-png').addEventListener('click', () => {
chart.exportChart({ type: 'image/png' });
});The chart configuration above includes the exporting menu items and a custom PNG trigger. Ensure the element IDs match your page and that the exporting module has loaded. Highcharts’ export overview documents supported formats and the export scale; the default scale is 2, which affects output resolution relative to the chart’s rendered size. See Highcharts’ export module overview.
Free tools Windows power users keep installed
One-click scans. No signup required.
Local export is not the only possible route in every setup. Highcharts documents fallback to its export server for unsupported-browser cases, and this behavior can be configured. Confirm the exact Highcharts release and export settings used in your deployment before deciding whether a given export stays on the client.
PDF is a separate case
Highcharts local PDF export is opt-in and requires offline-exporting.js plus third-party libraries. Highcharts says PDF export does not support images and will fall back to the export server. Do not assume that enabling local PNG or SVG export also makes PDF local. Details are in the client-side export documentation.
Render Chart.js to PNG in Node.js
For a server job, scheduled report, or other workflow that starts with chart data rather than a browser chart, Chart.js can render with a canvas implementation such as node-canvas or skia-canvas. Its Node.js guide demonstrates writing a PNG buffer to a file. Install and configure the canvas package appropriate for your environment according to that guide, then render a chart configuration:
import { ChartJSNodeCanvas } from 'chartjs-node-canvas';
import { writeFile } from 'node:fs/promises';
const width = 1200;
const height = 800;
const renderer = new ChartJSNodeCanvas({ width, height });
const configuration = {
type: 'bar',
data: {
labels: ['North', 'South', 'East', 'West'],
datasets: [{
label: 'Orders',
data: [18, 12, 21, 16],
backgroundColor: '#3578c8'
}]
},
options: {
responsive: false
}
};
const png = await renderer.renderToBuffer(configuration, 'image/png');
await writeFile('chart.png', png);The example uses a Node.js canvas wrapper and writes the returned PNG buffer. The chart is rendered from its configuration and data, not captured from a page. The Chart.js documentation covers Node.js rendering with node-canvas or skia-canvas; verify the installation and runtime requirements for the canvas package you choose: Chart.js: Using from Node.js.
Automate Highcharts exports on a server
Highcharts documents a Node.js export server that accepts chart configurations or chart SVG and can produce PNG, JPEG, PDF, or SVG. Its command-line tool also supports batch conversion. This is a fit when exports are generated outside a user’s browser or as part of an automated job. Check the current server-side rendering documentation for runtime, installation, and command options before building a deployment around it; requirements can change.
For confidential chart content, distinguish local rendering from sending chart material to a public service. Highcharts says its public export service receives the generated SVG from the browser and returns an image. It identifies local client-side export and a self-hosted Node server as alternatives. Local export is the default for PNG, JPEG, and SVG in version 12.3.0 and later, but fallback behavior and settings matter. Review the actual route taken in your deployment. Highcharts FAQ.
Choose a format and output size
- PNG: A raster choice for charts with text, lines, and solid colors when broad image compatibility matters.
- JPEG: A raster choice when the consumer asks for JPEG; it is one of the documented Plotly and Highcharts export formats.
- WebP: Plotly documents it as an output option. Confirm that the software receiving the image accepts WebP.
- SVG: Vector output can be useful for resizing or downstream editing, but Plotly WebGL traces can produce raster portions within SVG. Highcharts also documents SVG export.
- PDF: Use a chart library or server path that explicitly supports it. Highcharts’ local PDF route has separate dependencies and limitations.
For Highcharts, export scale changes resolution relative to the rendered chart size; its overview gives a default scale of 2. For Plotly or Chart.js, set dimensions appropriate to the destination and check the resulting image rather than assuming a browser’s displayed size will suit print or a report.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Capture a chart as it appears on a web page
If your requirement is a snapshot of a rendered page—not a library-native chart export—you can capture the page URL with a browser-based screenshot service. This preserves the page’s visible rendering, but the result is a screenshot, not an SVG chart generated by the plotting library. The page must load and render the chart before capture.
Best Value
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. One GET request can capture a page as PNG, JPEG, WebP, or PDF; its API accepts a URL and is suited to saving a chart as it appears on a page. It removes cookie banners, newsletter popups, and chat widgets before capture, with each step able to be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers indicate the page verdict and billing status. AI agents can use its MCP server tools, including take_screenshot, get_page_info, and capture_pdf. It includes 1,000 screenshots per month free with no card; paid plans start at $5 for 3,000.
For setup and request options, see the ScreenshotNeo API documentation. Example cURL request:
curl -G "https://api.screenshotneo.com/v1/shot"
-d access_key=YOUR_API_KEY
--data-urlencode url=https://stripe.com
-o shot.webpReplace the example target URL with the public page that contains your rendered chart. The download is a page screenshot, so it does not provide native chart data or guarantee a fully vector result. To try it, sign up for 1,000 free screenshots a month with no card.
Troubleshoot failed or unsuitable exports
- Plotly returns an error or no image: Check that the target DOM element is the rendered Plotly chart and that export is called after rendering. Use the returned promise and handle rejection so a failed export is visible to the user.
- The file extension and content disagree: Keep the requested format, downloaded filename, and consumer expectation aligned—for example, request
pngand name the outputchart.png. - SVG contains raster areas: This can occur with Plotly WebGL traces. Use a raster output if that is acceptable, or validate the SVG with the exact chart types and downstream software involved.
- Highcharts export uses an unexpected route: Check the installed version, exporting modules, browser support, and fallback configuration. Do not assume local behavior based only on the fact that an export button is present.
- Highcharts PDF export is not local: Local PDF is opt-in and depends on
offline-exporting.jsand third-party libraries; Highcharts says images are unsupported in this PDF path and the export server is used as fallback. - Chart.js server render is blank or fails at startup: Confirm the canvas implementation is installed and supported in the Node.js environment, and that the configuration supplies fixed dimensions and valid chart data. Consult the selected canvas package’s installation requirements alongside the Chart.js Node.js guide.
- A web-page screenshot misses the chart: The capture can only show what rendered before the screenshot. Ensure the page is accessible and the chart has completed loading; for deterministic server output, prefer a native chart rendering path when available.
FAQ
Can I convert a JavaScript chart to an image without taking a screenshot?
Yes. Plotly and Highcharts offer library export paths, and Chart.js can render from its configuration in Node.js. A screenshot is only needed when the intended output is the visible web page rather than a chart-library export.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteDoes an SVG export always stay sharp at any size?
No. Plotly notes that WebGL traces can be raster content embedded in SVG, so inspect exports that use those trace types.
Can I convert a chart configuration in a batch?
Highcharts documents a command-line rendering tool with batch conversion. For Chart.js, Node.js rendering lets you generate output from configurations and data in an automated job.
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.
