Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
The right way to convert a JavaScript chart is to use the chart library’s export or rendering API. In a browser, Plotly.js can create PNG, JPEG, WebP or SVG data with Plotly.toImage or download it with Plotly.downloadImage. Highcharts 12.3.0 and newer export PNG, JPEG and SVG locally by default. For automated jobs, use Highcharts’ Node.js export server or render Chart.js in Node.js with node-canvas or skia-canvas. A screenshot tool is a practical alternative when you need the final appearance of a complete web page rather than a chart configuration.
Choose the export method first
Your choice depends on whether the chart already exists in a browser, whether you need a repeatable server workflow, and whether the output must be a conventional image file.
| Situation | Best documented approach | Important limitation |
|---|---|---|
| Existing Plotly.js chart | Plotly.toImage or Plotly.downloadImage |
WebGL traces can contain raster sections inside an SVG. |
| Existing Highcharts chart in a current browser | Highcharts exporting module | Local PNG, JPEG and SVG behavior depends on using Highcharts 12.3.0 or later. |
| Highcharts batch or server rendering | Highcharts Node.js export server and command-line tool | Verify the current Node.js and deployment requirements. |
| Chart.js on a server | Chart.js with node-canvas or skia-canvas |
You render from the chart configuration and data; there is no browser DOM. |
Use PNG, JPEG or WebP when another system expects a normal bitmap. Use SVG when you need scalable vector output, while remembering that Plotly WebGL layers may still be rasterized inside the SVG. Highcharts documents an export scale of 2 by default, so exported dimensions can be larger than the chart’s CSS size.
Crashes, 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 minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Export an existing Plotly.js chart
Download a PNG, JPEG, WebP or SVG
Give the chart a DOM id, wait for it to render, then call the export method. The Plotly static-image documentation lists PNG, JPEG, WebP and SVG formats.
#1 Best Overall
<div id="sales-chart" style="width:900px;height:500px"></div>
<script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
<script>
const data = [{
x: ['Jan', 'Feb', 'Mar'],
y: [120, 180, 155],
type: 'bar'
}];
const layout = { title: 'Monthly sales', margin: { t: 60, r: 20, b: 50, l: 60 } };
Plotly.newPlot('sales-chart', data, layout).then(() => {
Plotly.downloadImage('sales-chart', {
format: 'png',
filename: 'monthly-sales',
width: 1800,
height: 1000,
scale: 1
});
});
</script>Plotly.downloadImage triggers a browser download. To obtain an image data URL for an upload or an img element, use Plotly.toImage instead:
Plotly.toImage('sales-chart', {
format: 'webp',
width: 1600,
height: 900,
scale: 1
}).then((dataUrl) => {
document.querySelector('#preview').src = dataUrl;
});Set width and height explicitly for predictable output rather than relying on a responsive container. A transparent background can be requested through the layout’s background settings where supported by your chart design. If the chart uses WebGL traces, inspect the SVG result before assuming it is entirely vector.
Export only after data and fonts are ready
Call the method after the promise returned by Plotly.newPlot resolves. If data arrives asynchronously, await the fetch and the plot update first. Missing fonts, images or late resize operations can otherwise produce an image that differs from what the user sees.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Export a Highcharts chart in the browser
PNG, JPEG and SVG with local exporting
Load Highcharts and its exporting module, then enable exporting in the chart options. According to Highcharts’ client-side export documentation, starting with version 12.3.0, exporting.js handles PNG, JPEG and SVG locally by default without requiring offline-exporting.js.
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height:500px"></div>
<script>
Highcharts.chart('container', {
title: { text: 'Monthly sales' },
xAxis: { categories: ['Jan', 'Feb', 'Mar'] },
series: [{ name: 'Orders', data: [120, 180, 155] }],
exporting: {
buttons: {
contextButton: {
menuItems: ['downloadPNG', 'downloadJPEG', 'downloadSVG']
}
}
}
});
</script>The export menu then provides the selected formats. Highcharts’ export overview covers supported formats and scaling at Export module. The documented default export scale is 2; adjust the exporting options when you need a specific pixel size.
PDF and older-version behavior
PDF is a separate path. Highcharts says local PDF export is opt-in and requires offline-exporting.js plus third-party libraries. Images are not supported in that local PDF path, so Highcharts can fall back to the export server. Do not describe a PDF as a purely local operation unless you have confirmed your version and configuration.
On versions or browsers that cannot export locally, fallback behavior may send generated SVG to Highcharts’ public export service. Configure or disable fallback if chart data must remain private. The Highcharts FAQ explains that the public service receives chart SVG and returns an image; local export or a self-hosted server are alternatives.
Render Highcharts on a server
For scheduled reports, queues and bulk jobs, Highcharts documents a Node.js export server and command-line batch mode. The server accepts chart configurations or chart SVG and can produce PNG, JPEG, PDF or SVG. Follow the current installation and runtime instructions in Command Line Rendering, pin the Highcharts version, and keep the rendering process isolated from untrusted configuration.
Server rendering is preferable when a browser is unavailable or you need identical output for many charts. Test fonts, locale, time zone and image assets in the deployment environment: differences in any of these can change labels and layout.
Render Chart.js in Node.js
Chart.js’ official Node.js guide demonstrates rendering with a Canvas implementation such as node-canvas or skia-canvas, then writing a PNG buffer to disk.
npm install chart.js canvas
const { Chart, registerables } = require('chart.js');
const { createCanvas } = require('canvas');
const fs = require('node:fs');
Chart.register(...registerables);
const canvas = createCanvas(1200, 700);
new Chart(canvas.getContext('2d'), {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{ label: 'Orders', data: [120, 180, 155], borderColor: '#2563eb' }]
},
options: { animation: false, responsive: false }
});
fs.writeFileSync('orders.png', canvas.toBuffer('image/png'));Disable animation and responsive sizing for deterministic server output. Set the canvas dimensions before constructing the chart, and install any system libraries required by your chosen Canvas implementation in the production image.
Image quality, dimensions and format decisions
Pixel dimensions and scale
- Choose an explicit width and height for social cards, email images and report templates.
- Use a higher export scale or larger canvas for high-density displays, then verify file size.
- Leave enough margin for rotated labels, legends and long titles; clipping is harder to repair after export.
Raster versus vector
PNG preserves sharp text and transparency. JPEG is smaller for photographic backgrounds but introduces compression artifacts and does not preserve transparency. WebP can reduce size when the consuming system supports it. SVG scales cleanly, but Plotly warns that WebGL-rendered portions may remain raster content inside the SVG.
Rank #4
- Used Book in Good Condition
Data and privacy
Keep sensitive data in local or self-hosted workflows. Highcharts’ public service receives the generated SVG. Highcharts 12.3.0 and later make PNG, JPEG and SVG local by default, but fallback settings, browser support and your actual route still matter. Confirm the library release and inspect network requests before making a privacy guarantee.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Common failures and fixes
The export is blank or incomplete
- Cause: export runs before asynchronous data, fonts or images finish loading. Fix: await data and the chart-render promise; delay until required assets are ready.
- Cause: a zero-size or hidden container. Fix: give the chart a real width and height, render it visibly, then export.
Labels are clipped
Increase chart margins, canvas dimensions or export width. Long labels often need a larger bottom margin or rotated-axis configuration.
Highcharts uses a remote service unexpectedly
Check your Highcharts version, browser support and fallback settings. Upgrade to a current release, keep local export enabled where appropriate, or run the documented Node.js export server.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsSVG is not fully vector
This is expected for Plotly WebGL traces. Use a non-WebGL trace when pure vector output is required, or choose PNG/WebP.
Best Value
Node.js rendering fails to install
Canvas packages may require native system dependencies. Use the installation instructions for the selected implementation, build in the same operating-system family as production, and verify fonts in the container.
The file is unexpectedly huge
Reduce pixel dimensions or scale, remove unnecessary animation frames, choose WebP or JPEG where appropriate, and avoid embedding oversized source images.
Or skip the browser setup
ScreenshotNeo captures the rendered page through one API request, which is useful when a chart depends on browser JavaScript, CSS, fonts and surrounding UI. Cookie banners, newsletter popups and chat widgets are removed before the shot. Bot checks, blank pages and failed loads are not billed, and each response identifies the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients.
Recommended Free Tools
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for output and options. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.
FAQ
Can I convert a chart without its original data?
Yes, if the chart is already rendered in a browser, capture the rendered element or page. Library export APIs generally require access to the chart instance, configuration or SVG.
Which format is safest for archival?
Keep the original chart configuration and data, then export SVG where its vector portions are sufficient. Store a PNG alongside it when consumers may not support SVG or when WebGL content is involved.
Should animation be included?
Usually no for reporting. Wait for the final state and disable animation in server-side Chart.js rendering so every run produces the same frame.
Free tools Windows power users keep installed
One-click scans. No signup required.
How do I prove an export stayed local?
Inspect browser network requests and your library’s fallback configuration. Version numbers alone do not prove that a particular deployment never contacted a remote export service.
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.
