# Printing PNG Charts 1. [Overview](https://developers.google.com/chart/interactive/docs/printing#Overview) 2. [Snapshotting Selections](https://developers.google.com/chart/interactive/docs/printing#Snapshotting) ## Overview Google Charts can be printed directly from your browser, or from JavaScript via the `print()` function. If you want to provide access to a PNG image of a chart, you can use the `getImageURI()` method. This currently works for core charts and [geocharts](https://developers.google.com/chart/interactive/docs/gallery/geochart). If your chart (of type *ChartType*, such as ColumnChart or PieChart) is called *my_chart* and the div displaying it is *my_div*, here's how you access the chart as a PNG: ``` var my_div = document.getElementById('chart_div'); var my_chart = new google.visualization.ChartType(chart_div); google.visualization.events.addListener(my_chart, 'ready', function () { my_div.innerHTML = ''; }); my_chart.draw(data); ``` **Note:** You should wait for the `ready` event, as shown in the examples on this page, to ensure that the chart has finished rendering. **Note:** This will only work in browsers that support the HTML5 `` element, and so won't work on Internet Explorer 9 or earlier. Here's a complete example: ```html
``` When this program runs, `chart_div.innerHTML` will be set to this PNG encoding of the chart and displayed in the JavaScript console: ``` data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADICAYAAADGFbfiA... ``` When that URI is placed directly into a browser address bar, modern browsers will render the image: ![](https://developers.google.com/static/chart/interactive/images/chart_printable.png) You can include a link to the printable version with the following line of JavaScript: ``` document.getElementById('png').outerHTML = 'Printable version'; ``` followed by this line in your HTML: ```
``` ## Snapshotting Selections As a chart creator, you can do most anything to your charts programmatically that users can do in their browsers. So if you want to create a static image of the chart with a [tooltip](https://developers.google.com/chart/interactive/docs/customizing_tooltip_content) showing or with [crosshairs](https://developers.google.com/chart/interactive/docs/crosshairs) at a particular point, you can do that by calling `setSelection()` prior to `getImageURI()`, as shown below. Here's a scatter chart with 100 random points, one of them with tooltip and crosshairs pre-selected: Reload and you'll see a different point selected. The code, with key lines in bold: ```