HTML/CSS to Image API

Example code

Make changes to the code and click the Image button below

            <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>

<div id="container"></div>

<script>  
Highcharts.chart('container', {
  chart: {
    animation: false
  },
  title: {
    text: 'Solar Employment Growth by Sector, 2010-2016'
  },

  subtitle: {
    text: 'Source: thesolarfoundation.com'
  },

  yAxis: {

    title: {
      text: 'Number of Employees'
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },

  plotOptions: {
    series: {
      animation: false,
      label: {
        connectorAllowed: false
      },
      pointStart: 2010
    }
  },

  series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  }, {
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
  }, {
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
  }, {
    name: 'Project Development',
    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
  }, {
    name: 'Other',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
  }],

  responsive: {
    rules: [{
      condition: {
        maxWidth: 500
      },
      chartOptions: {
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'bottom'
        }
      }
    }]
  }
});
</script>
          

Advanced options

Use these settings to tweak your image even further. See our docs for full details on all the available options.

url Pass a publically 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.

device_scale Adjusts the pixel ratio for the screenshot. The default is 2 which is equivalent to a 4K monitor. Minimum: 1, Maximum: 3

Image size + cropping

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

viewport_width Set the width of Chrome's viewport. This will disable automatic cropping. Both height and width parameters must be set if using either.

viewport_height Set the height of Chrome’s viewport. This will disable automatic cropping. Both height and width parameters must be set if using either.

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

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.

render_when_ready
Set to true to control when the image is generated. Call ScreenshotReady() from JavaScript in your code to trigger the image generation. Learn more.

Live

re-generate image Loading

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

Convert highcharts.js into an image

It's easy to generate images just from some simple HTML

Example code

Advanced options

Image size + cropping

Timing

Click image to take a URL screenshot

How does HTML/CSS to Image work?