---
title: "Including Charts in HTML Templates"
manual: "SAV Charts"
version: "main"
permalink: "https://docs.typo3.org/permalink/yolftypo3/sav-charts:includingchartsinhtmltemplates@main"
source: "Tutorial/OtherFeatures/IncludingChartsInHtmlTemplates/Index.rst"
rendered: "2026-10-09T13:07:41+00:00"
---

# Including Charts in HTML Templates {#includingchartsinhtmltemplates}

SAV Charts viewHelpers can be used in any
HTML template processed by Fluid.

The following example illustrates how to
integrate a bar chart that displays
the number of pages created per year
(see [Using and Developing Query Managers](https://docs.typo3.org/permalink/yolftypo3/sav-charts:usinganddevelopingquerymanagers@main)).

```html
{namespace c=YolfTypo3\SavCharts\ViewHelpers}
<c:marker id="title">Analysis of the site</c:marker>
<c:marker id="labelSet0">Pages per year</c:marker>
<c:query id="1"  manager="savcharts" uid="1" />
<c:data id="labels" values="{query__1.Year}" />
<c:data id="data">
  <c:item key="0" value="{query__1.Count}" />
</c:data>
<c:template id="1">
    EXT:sav_charts/Resources/Private/Templates/ChartsExamples/FluidParser/BarChartAdvanced.fluid
</c:template>

<canvas id="canvas{charts.0.chartId}" width="{charts.0.width}" height="{charts.0.height}"></canvas>
```

> [!NOTE]
> The Fluid variable `charts` contains information
> on the created charts, starting from 0. Therefore,
> `charts.0.chartId` is the ID of the first chart
> in **EXT:sav_charts/Resources/Private/Templates/ChartsExamples/FluidParser/BarChartAdvanced.fluid**.

![](../../../Images/Tutorial/BarChartInHtmlTemplate.png)