Convert highcharts.js into an image

Generate charts and graphs using Highcharts.js

You can generate images of charts using Highcharts.js + the HTML/CSS to Image API. When making charts, be sure to disable any animations. They may cause issues when creating the image.

Live Demo

Make changes to the code and click the Image button below

Content

Adjust how content is rendered by adjusting these settings.

Url

Pass a publicly available URL and the API will screenshot it. This overrides any HTML.

Google Fonts

Google fonts to be loaded. Example: Roboto. Multiple fonts can be loaded like this: Roboto|Open Sans. You must also set the font-family in your CSS to use the loaded font.

Selector

A CSS selector for an element in the HTML. We’ll crop the image to this specific element.

Image size & Cropping

Images are automatically cropped by default. We crop to the outermost HTML element. For extra tweaking, use these settings.

Full Screen

Take a screenshot of the entire screen (Only applies when a URL is provided)

Device Scale

Adjusts the pixel ratio for the screenshot. The default is 2 which is equivalent to a 4K monitor.

Viewport Width

Set the width of Chrome's viewport. This will disable automatic cropping.

Viewport Height

Set the height of Chrome's viewport. This will disable automatic cropping.

Landscape Viewport

Set the viewport to landscape orientation.

Timing

By default the API generates a screenshot once everything is loaded. If the page executes JavaScript, you may want extra time before the image is rendered.

Ms Delay

Adds extra time for JavaScript to execute. Use this if you're seeing a blank image and are using JavaScript.
Default: 0. Start with 500 if needed.

Max Wait Ms

Sets a limit on time to wait until the screenshot is taken. Use this if your page loads a lot of extra irrelevant content, and you want to reduce the render time.

Render When Ready?

Check to control when the image is generated.
Call ScreenshotReady() from JavaScript in your code to trigger the image generation.

Browser Context

These settings will impact how Chrome is started, giving you more control when taking screenshots.

Mobile Viewport

Instructs the viewport to behave as if it's being viewed from a mobile device.

Touch Viewport

Instructs the viewport to behave as if it is being viewed on a device supporting touch events.

Color Scheme

Set Chrome to render assuming the user has explicitly set their browser to Light or Dark mode.

Media Type

Set Chrome to render as if it's being set to print or screen mode.

Timezone

Render your image with Chrome set to a specified timezone.

Block Consent Banners

Attempt to block cookie/consent banners from displaying (Only applies when a URL is provided)

Quick start code

Select your favorite language or tool for some example code.

Learn More

Dive into some more advanced topics with these tutorials.

Image charts with Highcharts.js

How does HTML/CSS to Image work?

We run your HTML/CSS in a specialized instance of Google Chrome so that it renders exactly how you'd expect it to. Then we generate a screenshot from Chrome, crop it for you automatically and give you back a performance optimized URL to your image.

You can then use this URL anyway you'd like. You can download the image and host it somewhere else. Or directly use the URL in your apps and webpages.

We've spent years on this problem and our API generates millions of images each month. We continually improve it as people find new ways to use the API.