Charts
bkhtmltopdf provides a built-in custom tag <chart> for generating charts. It is based on the standard <img> tag, so it supports common attributes such as style, class, and alt. The src, width, and height attributes are redefined to enable dynamic chart generation.
Chart rendering relies on Apache ECharts and Chart.js. You can refer to the official examples to get started quickly.
Attributes
| Attribute | Type | Description | Default |
|---|---|---|---|
| src | string | Data Source (id of the referenced <script> element) | |
| width | number | Width (unit: px) | 512 |
| height | number | Height (unit: px) | 512 |
| engine | string | Chart engine, supported: echarts chart.js | echarts |
Note: width and height control the actual rendering size of the chart. If you only need to adjust its display size, it’s recommended to use style or class instead.
Example
The src attribute of the <chart> tag links to chart data defined inside a corresponding <script> tag. The supported script types are: application/json5 and application/json.
ECharts
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hi, bkhtmltopdf!</title>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<chart src="chart-1" width="500" height="500" alt="This is a chart"/>
<chart src="chart-2" width="500" height="500" alt="This is a chart"/>
<script id="chart-1" type="application/json5">
{xAxis:{type:'category',data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},yAxis:{type:'value'},series:[{data:[150,230,224,218,135,147,260],type:'line'}]}
</script>
<script id="chart-2" type="application/json">
{"color":["#80FFA5","#00DDFF","#37A2FF","#FF0087","#FFBF00"],"title":{"text":"Gradient Stacked Area Chart"},"tooltip":{"trigger":"axis","axisPointer":{"type":"cross","label":{"backgroundColor":"#6a7985"}}},"legend":{"data":["Line 1","Line 2","Line 3","Line 4","Line 5"]},"toolbox":{"feature":{}},"xAxis":[{"type":"category","boundaryGap":false,"data":["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]}],"yAxis":[{"type":"value"}],"series":[{"name":"Line 1","type":"line","stack":"Total","smooth":true,"lineStyle":{"width":0},"showSymbol":false,"areaStyle":{"opacity":0.8},"emphasis":{"focus":"series"},"data":[140,232,101,264,90,340,250]},{"name":"Line 2","type":"line","stack":"Total","smooth":true,"lineStyle":{"width":0},"showSymbol":false,"areaStyle":{"opacity":0.8},"emphasis":{"focus":"series"},"data":[120,282,111,234,220,340,310]},{"name":"Line 3","type":"line","stack":"Total","smooth":true,"lineStyle":{"width":0},"showSymbol":false,"areaStyle":{"opacity":0.8},"emphasis":{"focus":"series"},"data":[320,132,201,334,190,130,220]},{"name":"Line 4","type":"line","stack":"Total","smooth":true,"lineStyle":{"width":0},"showSymbol":false,"areaStyle":{"opacity":0.8},"emphasis":{"focus":"series"},"data":[220,402,231,134,190,230,120]},{"name":"Line 5","type":"line","stack":"Total","smooth":true,"lineStyle":{"width":0},"showSymbol":false,"label":{"show":true,"position":"top"},"areaStyle":{"opacity":0.8},"emphasis":{"focus":"series"},"data":[220,302,181,234,210,290,150]}]}
</script>
</body>
</html>
Support for application/json5 is not comprehensive, and we still recommend prioritizing the use of application/json.
Preview
Chart.js
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hi, bkhtmltopdf!</title>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<chart src="chart-1" engine="chart.js" width="500" height="500" alt="This is a chart"/>
<chart src="chart-2" engine="chart.js" width="500" height="500" alt="This is a chart"/>
<script id="chart-1" type="application/json5">
{"type":"line","data":{"labels":["Red","Blue","Yellow","Green","Purple","Orange"],"datasets":[{"label":"# of Votes","data":[12,19,3,5,2,3],"borderColor":"red"}]}}
</script>
<script id="chart-2" type="application/json">
{"type":"radar","data":{"labels":["Eating","Drinking","Sleeping","Designing","Coding","Cycling","Running"],"datasets":[{"label":"My First Dataset","data":[65,59,90,81,56,55,40],"fill":true,"backgroundColor":"rgba(255, 99, 132, 0.2)","borderColor":"rgb(255, 99, 132)","pointBackgroundColor":"rgb(255, 99, 132)","pointBorderColor":"#fff","pointHoverBackgroundColor":"#fff","pointHoverBorderColor":"rgb(255, 99, 132)"},{"label":"My Second Dataset","data":[28,48,40,19,96,27,100],"fill":true,"backgroundColor":"rgba(54, 162, 235, 0.2)","borderColor":"rgb(54, 162, 235)","pointBackgroundColor":"rgb(54, 162, 235)","pointBorderColor":"#fff","pointHoverBackgroundColor":"#fff","pointHoverBorderColor":"rgb(54, 162, 235)"}]},"options":{"elements":{"line":{"borderWidth":3}}}}
</script>
</body>
</html>
Preview
Script
Chart data only supports static JSON or JSON5 formats. Dynamic JavaScript scripts or code execution are not supported.