Recommended Free Tools
PhantomJS is usually the problem, not your chart configuration. Highcharts’ legacy PhantomJS export methods are deprecated and unmaintained, so blank SVGs, clipped labels, missing series and export failures are best treated as compatibility and migration issues. First verify the constructor, input file, module paths, dimensions, callbacks and fonts; then move production rendering to the maintained Highcharts Node.js export server or use client-side exporting where it meets your requirements.
Start with the failure you can observe
Save the generated SVG and inspect it as text before changing chart options. An entirely empty file, an SVG containing axes but no series, and an SVG with content positioned outside the viewport indicate different causes.
- Empty or nearly empty SVG: chart construction failed, a required script did not load, or the converter received the wrong input type.
- Axes without data or features: a Highcharts module, data file or map resource is missing.
- Clipped, tiny or misplaced labels: output dimensions, zoom scale, fonts or geometry calculations differ from the browser.
- No useful server error: the PhantomJS page or an injected callback failed silently; capture console output, page errors and resource failures.
PhantomJS support in Highcharts’ legacy documentation is explicitly deprecated. It can be useful while you migrate, but it is not a sound new deployment target.
1. Confirm the input file and chart constructor
The legacy converter accepts either a chart options/configuration file or SVG input, and it can construct a regular Chart or a StockChart. A mismatch can produce an empty or malformed result.
#1 Best Overall
Check the input type
- For a configuration file, make sure the file contains the options object expected by your converter version, not an already-rendered SVG string.
- For SVG input, confirm that the file begins with valid SVG markup and is readable by the PhantomJS process.
- Do not pass a StockChart configuration to a regular Chart constructor, or vice versa. Select the constructor explicitly when your converter exposes that option.
Use a minimal configuration as a control
{
"chart": { "type": "line", "width": 800, "height": 450 },
"title": { "text": "Export test" },
"xAxis": { "categories": ["A", "B", "C"] },
"series": [{ "name": "Values", "data": [1, 3, 2] }]
}Render this file before reintroducing Stock tools, maps, data modules, custom callbacks or application CSS. If the minimal chart fails, the problem is the runtime, file paths or converter invocation rather than your production options.
Run the converter from a shell and preserve diagnostics
phantomjs highcharts-convert.js
-infile options.json
-outfile chart.svg
-constr Chart
-width 800
2>phantomjs-stderr.log | tee phantomjs-stdout.logOption names vary between legacy converter builds, so run the script’s help command and use the labels installed with your copy. Keep both output streams with the failed artifact. They often reveal a JavaScript syntax error or a resource URL that the browser could not resolve.
2. Fix Highcharts and module resource loading
The converter must be able to discover Highcharts itself and every module used by the configuration. The legacy setup commonly resolves scripts relative to PhantomJS’s working directory unless you provide an explicit location.
Make paths deterministic
- Run the converter from a directory that contains the Highcharts files, or set the converter’s documented JavaScript directory option.
- Load the same Highcharts version for the core library and modules. Mixing versions can break constructors and renderer behavior.
- Include every module your chart needs, such as
highcharts-more.js, the data module, maps or stock modules. - Use local, readable files during diagnosis. Eliminate network access and redirects until a local chart renders.
A missing module may not make the whole SVG empty. It can instead remove a series type, map geometry, data parser or StockChart path, leaving an apparently valid but incomplete image.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Check relative URLs and working directories
Paths that work in a browser application are not necessarily valid inside PhantomJS. A URL beginning with an application-relative path, an asset served only by your development server, or a case mismatch on a Linux host can all result in a missing script. Log each requested resource and verify its status before debugging layout.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
3. Correct width, scale and viewport settings
The converter’s scale setting changes PhantomJS’s zoom factor. width overrides scale and sets an exact output width. Unintended combinations can make labels tiny, clip the right side of the chart or place text outside the captured viewport.
Choose one sizing strategy
- Use an explicit chart width and height when reproducibility matters.
- Use scale when you want a larger raster or PDF rendering based on the same logical layout.
- Do not use a small viewport with a large fixed chart width; the renderer may capture only the visible portion.
- For full-page output, ensure the page and chart dimensions are established before capture rather than relying on a browser window default.
phantomjs highcharts-convert.js
-infile options.json
-outfile chart.png
-width 1200
-scale 1Change one variable at a time. If labels become correct after removing scale, keep the explicit width and adjust the output format or dimensions instead of stacking additional zoom settings.
4. Audit callbacks, CSS and injected files
Legacy conversion pages can execute callback JavaScript, CSS and other injected files inside the rendering page. A syntax error, unsupported DOM API or broad CSS rule can stop chart construction or change SVG geometry.
Temporarily remove custom code
- Render with only the chart options and required Highcharts scripts.
- Re-enable the callback, then custom CSS, then injected scripts one at a time.
- After each change, compare the SVG and captured console output.
Keep callbacks compatible with PhantomJS’s older JavaScript engine. Avoid browser APIs introduced after PhantomJS’s WebKit implementation and guard code that assumes an element exists. A callback that throws before the chart is created commonly appears as a blank export.
Scope CSS to the chart
Global rules for svg, text, font, overflow or transforms can alter Highcharts’ generated elements. Start with no custom stylesheet, then add only the rules required for the export. Prefer chart-container selectors over global element selectors.
Rank #3
- 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
5. Make fonts and geometry predictable
SVG text placement depends on the fonts available to the renderer. Different font files, fallback glyphs and font metrics change label widths and can trigger clipping. Geometry-sensitive code also relies on APIs such as getBBox; Highcharts documents feature differences among SVG clients, and its server-rendering experience reports unreliable box-model and getBBox behavior in alternative stacks.
Use installed, deterministic fonts
- Install the exact font family and weight on the PhantomJS host, or choose a broadly available fallback.
- Wait until the page has loaded its styles before constructing the chart.
- Compare a text-heavy chart and a chart with labels disabled. If only text changes, investigate fonts before data.
Reduce geometry-sensitive features while isolating the issue
Temporarily disable data labels, rotated axis labels, HTML labels and custom renderer code. If the basic SVG is correct, add these features back individually. This identifies whether the failure is a renderer limitation rather than an invalid option.
Free tools Windows power users keep installed
One-click scans. No signup required.
6. Capture useful diagnostics
When the server returns no meaningful error, instrument the page and preserve the complete run.
- Print PhantomJS console messages and uncaught page exceptions.
- Log every failed resource request, including the URL and failure reason.
- Record the working directory, Highcharts version, converter script version, constructor, width, scale and output format.
- Save the input options, callback files and generated SVG for the same run.
For the old converter, the official troubleshooting approach is to expose the underlying command and its output rather than relying on a web response alone. Apply the same principle to PhantomJS: make the renderer’s page errors and network failures observable before changing chart code.
Common symptoms and targeted fixes
| Symptom | Likely cause | Fix |
|---|---|---|
| Completely blank SVG | Wrong input type, constructor mismatch, missing core script or callback exception | Render the minimal configuration with local scripts, select Chart or StockChart explicitly, and inspect page errors. |
| Axes render but series are missing | Missing data, stock, map or other module; failed data URL | Load the required module locally and log resource requests; verify the data is available before chart creation. |
| Rightmost labels are clipped | Viewport narrower than chart, conflicting width/scale or font metrics | Set an explicit width and height, remove scale temporarily, and install the intended font. |
| Labels overlap or move compared with the browser | Different fonts or SVG geometry support | Use deterministic fonts, reduce rotated/HTML labels while testing, and compare with a maintained browser engine. |
| Export fails only with custom code | Unsupported DOM API, syntax error or CSS override | Remove injected files, re-add them individually and keep callbacks compatible with PhantomJS. |
| Large charts time out | Legacy renderer performance or geometry work | Reduce data for a diagnostic run and migrate production rendering. Highcharts reports one production environment where SVGs with more than 1,500 points became too slow; that figure is an experience report, not a universal limit. |
Keep the legacy endpoint private
Highcharts warns that its legacy PhantomJS web server is not intended to be exposed to the outside world. Bind it to localhost or place it behind a controlled internal service while you migrate. Restrict inputs, protect any network-enabled process and avoid accepting arbitrary URLs from untrusted callers.
Choose a maintained replacement
Use these criteria rather than assuming every renderer will produce identical SVG.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problems| Option | Browser support | Privacy and control | Compatibility considerations |
|---|---|---|---|
| PhantomJS legacy converter | Old WebKit behavior; deprecated | Can be kept inside your network, but requires hardening | Known differences in SVG features, fonts and geometry; migration debt remains |
| Highcharts Node.js export server | Uses Puppeteer and a maintained browser stack | Self-hosted control over chart data and fonts | Accepts chart configurations or SVG and renders PNG, JPG, PDF or SVG; supports batch conversion |
| Client-side export module | Uses the user’s browser | Data stays with the client unless your app sends it elsewhere | Highcharts says client-side exporting is the default since v12.3; PDF may require the offline-exporting module and its dependencies |
| Hosted export service | Service-managed renderer | Generated SVG is sent to the service, so review data policy first | Convenient when you do not want to operate a renderer; feature and font parity must be verified |
Migrate to the Node.js export server
Highcharts documents global installation with npm and command-line conversion from a configuration file. A typical migration sequence is:
- Install the export server in a controlled Node.js environment using the package and version approved for your Highcharts release.
- Run the command-line converter against the same minimal configuration used for PhantomJS.
- Compare SVG dimensions, fonts, data labels and custom callbacks.
- Move to batch conversion only after one chart is repeatable.
- Keep the service on a private network and monitor process memory, timeouts and failed jobs.
Because command-line flags differ by release, use the installed export server’s help output for the exact option names rather than copying a PhantomJS invocation unchanged.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
ScreenshotNeo provides a website screenshot API and MCP server. One GET request returns PNG, JPEG, WebP or PDF, with options for full-page capture, a CSS-selected element, device and viewport settings, retina scale, custom CSS and JavaScript, waits, request blocking, headers, cookies, user agents, timezone, geolocation, transparent backgrounds and more. It can also run asynchronous jobs, bulk capture up to 100 URLs per call and expose usage information.
Use the ScreenshotNeo API documentation for all parameters. The simplest call is:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo removes cookie banners, newsletter popups and chat widgets before the shot; bot checks, blank pages and failed loads are never billed; its MCP server lets Claude, Cursor and other MCP clients take screenshots; and the Free plan includes 1,000 screenshots a month with no card, while paid plans start at $5 for 3,000. Every response identifies the page verdict and whether it was billed, so cache hits and unsuccessful loads are distinguishable from clean captures. Create a free ScreenshotNeo account to get started.
FAQ
Can I make PhantomJS match Chrome exactly?
No. You can improve consistency with fixed fonts, dimensions and local resources, but PhantomJS uses an older rendering engine and does not support every SVG feature or geometry behavior available in modern browsers.
Should I keep a PhantomJS job for emergency exports?
Only as a private, temporary compatibility path with captured diagnostics and a documented migration plan. Do not expose the legacy web server publicly.
When is client-side exporting the better choice?
Choose it when the browser already has the data and required chart features, and when sending SVG to a server is unnecessary. Use a self-hosted Node.js renderer when repeatability, server-side batch work or data control is more important.
PC 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 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchFrequently Asked Questions
Can I make PhantomJS match Chrome exactly?
No. You can improve consistency with fixed fonts, dimensions and local resources, but PhantomJS uses an older rendering engine and does not support every SVG feature or geometry behavior available in modern browsers.
Should I keep a PhantomJS job for emergency exports?
Only as a private, temporary compatibility path with captured diagnostics and a documented migration plan. Do not expose the legacy web server publicly.
When is client-side exporting the better choice?
Choose it when the browser already has the data and required chart features, and when sending SVG to a server is unnecessary. Use a self-hosted Node.js renderer when repeatability, server-side batch work or data control is more important.
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.
