---
title: "Including Charts in HTML Templates"
manual: "SAV Charts"
version: "14.8"
source: "Tutorial/ParsersTutorial/IncludingChartsInHtmlTemplates/Index.rst"
rendered: "2026-09-29T16:44:58+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](../UsingAndDevelopingQueryManagers/Index.html#usingAndDevelopingQueryManagers)).

```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)