Skip to main content
HTML charts let you render any layout that Vega-Lite cannot produce — custom scorecards, branded cards, rich tables, or any structure built with HTML, CSS, and JavaScript. Query results are available inside the template via Handlebars expressions.

​
Variant

​
HTML template

A free-form HTML document with Handlebars expressions. Write any markup and bind query result data directly in the template.

​
Template structure

Query results are available in the template context under result. Access the first row with result._first: 
<div class="scorecard">
  <h2>{{result._first.order_items.status}}</h2>
  <p>{{result._first.order_items.count}} orders</p>
</div>
Iterate over all rows with {{#each result.data}}: 
<ul>
  {{#each result.data}}
    <li>{{this.order_items.status}}: {{this.order_items.count}}</li>
  {{/each}}
</ul>

​
Using JavaScript

Standard <script> tags are supported, enabling the use of charting libraries (D3, Chart.js, etc.) or any JavaScript that manipulates the rendered DOM. 
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const labels = [{{#each result.data}}"{{this.order_items.status}}"{{#unless @last}},{{/unless}}{{/each}}];
  const data = [{{#each result.data}}{{this.order_items.count}}{{#unless @last}},{{/unless}}{{/each}}];
  new Chart(document.getElementById('myChart'), {
    type: 'bar',
    data: { labels, datasets: [{ data }] }
  });
</script>