---
title: "Using Advanced Templates"
manual: "SAV Charts"
version: "14.7"
source: "Tutorial/ParsersTutorial/UsingAdvancedTemplates/Index.rst"
rendered: "2026-09-17T13:01:15+00:00"
---

# Using Advanced Templates {#using-advanced-templates}

SAV Charts provides more complex templates.
They can display up to nine items on the same
chart.

The colors are defined in a specific template,
either `DefaultColors.xml` for the XML parser
or `FluidParser/DefaultColors.fluid` for the
Fluid parser. These colors were chosen to
provide contrast between items.

To illustrate the use of advanced templates,
consider the `LineChartAdvanced.xml` template or
the `FluidParser/LineChartAdvanced.fluid`
template.

Enter the following code in the template section,
then save and go to the front end.

**Fluid Parser**

```xml
<c:template id="1">
    EXT:sav_charts/Resources/Private/Templates/ChartsExamples/FluidParser/LineChartAdvanced.fluid
</c:template>
```

**XML Parser**

```xml
<template id="1">
    EXT:sav_charts/Resources/Private/Templates/ChartsExamples/LineChartAdvanced.xml
</template>
```

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

The chart has nine superimposed curves with the
same data, as well as predefined colors, labels, and a title.
Click on the legend to hide a curve.

In the data section enter the following code, save, and go to
the front-end.

**Fluid Parser**

```xml
<c:data id="data">
    <c:item key="0" values="10, 6, 7, 2, 1, 5, 3" />
</c:data>
```

**XML Parser**

```xml
<data id="data">
    <item key="0" values="10, 6, 7, 2, 1, 5, 3" />
</data>
```

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

Modify the data section as follows:

**Fluid Parser**

```xml
<c:data id="data">
    <c:item key="0" values="10, 6, 7, 2, 1, 5, 3" />
    <c:item key="1" values="5, 3, 8, 1, 6, 9, 2" />
</c:data>

<c:data id="labels">
    1, 2, 3, 4, 5, 6, 7
</c:data>
```

**XML Parser**

```xml
<data id="data">
    <item key="0" values="10, 6, 7, 2, 1, 5, 3" />
    <item key="1" values="5, 3, 8, 1, 6, 9, 2" />
</data>

<data id="labels">
    1, 2, 3, 4, 5, 6, 7
</data>
```

Enter the following code in the marker section, then save and go to the front-end.

**Fluid Parser**

```xml
<c:marker id="title">A line chart with two curves</c:marker>
<c:marker id="labelSet0">Curve 1</c:marker>
<c:marker id="labelSet1">Curve 2</c:marker>
```

**XML Parser**

```xml
<marker id="title">A line chart with two curves</marker>
<marker id="labelSet0">Curve 1</marker>
<marker id="labelSet1">Curve 2</marker>
```

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