---
title: "Convert a Chart.js Chart to a PNG"
description: "Convert a Chart.js chart to a PNG using the HTML API. Code in cURL, Python and Node, plus rendering pitfalls."
url: "https://html2img.com/docs/examples/chart-screenshot/"
---
# How to Convert a Chart.js Chart to a PNG
Render a Chart.js visualisation as a static PNG. Useful for reports, dashboards, email digests and printed analytics.
> **Note**
>
> For a deeper walkthrough including server-side rendering, see [Server-side Chart.js rendering in Python](https://html2img.com/articles/chartjs-server-side-rendering-image-python/).
> **Note**
>
> If you want a pre-built version of this for snippets of source code, use the [Code screenshot template](https://html2img.com/templates/code-screenshot/). Send the code body and language as JSON and get a syntax-highlighted PNG back. To paste code and download an image straight away, use the [code screenshot tool](https://html2img.com/tools/code-screenshot/).
## HTML Content
```html
```
## CSS Styles
```css
body {
margin: 0;
padding: 16px;
background: white;
}
canvas {
display: block;
margin: 0 auto;
}
```
## API Request
```bash
POST https://app.html2img.com/api/html
```
```json
{
"html": "",
"width": 450,
"height": 350,
"css": "body { margin: 0; padding: 16px; background: white; } canvas { display: block; margin: 0 auto; }"
}
```
> **Note**
>
> The example uses Chart.js, but you can use any JavaScript charting library like D3.js, Highcharts, or ApexCharts.
## How it Works
1. We include Chart.js from CDN and create a canvas element
2. The chart is configured with static data and options
3. Animation is disabled to ensure immediate rendering
4. Padding is added around the canvas for better presentation
> **Warning**
>
> For larger charts, use a [webhook_url](https://html2img.com/docs/parameters/webhook-url/) so a slow chart library cannot push the render past the 30 second synchronous budget.
## Code in other languages
### Node.js
```javascript
const response = await fetch('https://app.html2img.com/api/html', {
method: 'POST',
headers: { 'X-API-Key': process.env.HTML2IMG_API_KEY, 'Content-Type': 'application/json' },
body: JSON.stringify({
html: chartHtml,
css: chartCss,
width: 450,
height: 350,
wait_for_selector: '#myChart',
ms_delay: 500,
}),
});
const { url } = await response.json();
```
### Python
```python
import os, requests
response = requests.post(
'https://app.html2img.com/api/html',
headers={'X-API-Key': os.environ['HTML2IMG_API_KEY']},
json={
'html': chart_html,
'css': chart_css,
'width': 450, 'height': 350,
'wait_for_selector': '#myChart',
'ms_delay': 500,
},
)
url = response.json()['url']
```
### PHP
```php
$ch = curl_init('https://app.html2img.com/api/html');
curl_setopt_array($ch, [
CURLOPT_RETURNTRANSFER => true, CURLOPT_POST => true,
CURLOPT_HTTPHEADER => ['X-API-Key: ' . getenv('HTML2IMG_API_KEY'), 'Content-Type: application/json'],
CURLOPT_POSTFIELDS => json_encode([
'html' => $chartHtml, 'css' => $chartCss,
'width' => 450, 'height' => 350,
'wait_for_selector' => '#myChart', 'ms_delay' => 500,
]),
]);
$url = json_decode(curl_exec($ch), true)['url'];
```
## Common pitfalls
- **Animations blur the capture.** Chart.js animates by default. Set `options.animation = false` so the chart paints in one frame.
- **Chart.js loads after capture.** Pair [wait_for_selector](https://html2img.com/docs/parameters/wait_for_selector/) with [ms_delay](https://html2img.com/docs/parameters/ms_delay/) to ensure the canvas is drawn.
- **High-DPI rendering looks wrong.** Charts can render at 1x even when DPI is 2. Set the canvas size in CSS, not just the `width` attribute.
## See also
- [Python integration guide](https://html2img.com/integrations/python/), [JavaScript integration guide](https://html2img.com/integrations/javascript/)
- [html parameter](https://html2img.com/docs/parameters/html/), [wait_for_selector parameter](https://html2img.com/docs/parameters/wait_for_selector/), [ms_delay parameter](https://html2img.com/docs/parameters/ms_delay/), [dpi parameter](https://html2img.com/docs/parameters/dpi/)