---
title: "Frequently Asked Questions (Charts.js)"
manual: "SAV Charts"
version: "14.7"
source: "FAQ/Index.rst"
rendered: "2026-09-17T13:01:15+00:00"
---

# Frequently Asked Questions (Charts.js) {#frequently-asked-questions-charts-js}

> [!WARNING]
> SAV Charts is now using  Chart.js 4.x. Several breaking changes were made in
> Chart.js 3.0 and Chart.js 4.0 (see [3.x Migration Guide](https://www.chartjs.org/docs/latest/migration/v3-migration.html)
> and [4.x Migration Guide](https://www.chartjs.org/docs/latest/migration/v4-migration.html)).
> All templates in `Resources/Private/Templates/ChartsExamples`
> were modified to take these changes into consideration.
>
> If you are upgrading Sav Charts, you may have to modify your templates.

## How to Generate a Boolean Value? {#how-to-generate-a-boolean-value}

Set the attribute `value` to `true` or `false`.

**Fluid Parser**

```xml
<c:data id="barChartOptions">
    <c:item key="animation" value="false" />
    <c:item key="responsive" value="false" />
    <c:item key="plugins">
        <c:item key="title">
            <c:item key="display" value="true" />
            <c:item key="text" value="{marker__title}" />
        </c:item>
        <c:item key="tooltip">
            <c:item key="backgroundColor">rgba(0,0,0,0.7)</c:item>
        </c:item>
    </c:item>
</c:data>
```

**XML Parser**

```xml
<data id="barChartOptions">
    <item key="animation" value="false" />
    <item key="responsive" value="false" />
    <item key="plugins">
        <item key="title">
            <item key="display" value="true" />
            <item key="text" value="marker#title" />
        </item>
        <item key="tooltip">
            <item key="backgroundColor">rgba(0,0,0,0.7)</item>
        </item>
    </item>
</data>
```

## How to Set the y-Axis Properties? {#how-to-set-the-y-axis-properties}

You can change the default y-axis (or x-axis) properties using the options for the chart.
For example, assume that the y-axis for the lineChart example has to be changed so that
the minimum is 10, the maximum is 100 and the step is 5.

Add the following configuration in the data section or in your template.

**Fluid Parser**

```xml
<c:data id="lineChartOptions">
    <c:item key="scales">
        <c:item key="y">
            <c:item key="max" value="100" />
            <c:item key="min" value="10" />
            <c:item key="ticks">
                <c:item key="stepSize" value="5" />
            </c:item>
        </c:item>
    </c:item>
</c:data>
```

**XML Parser**

```xml
<data id="lineChartOptions">
    <item key="scales">
        <item key="y">
            <item key="max" value="100" />
            <item key="min" value="10" />
            <item key="ticks">
                <item key="stepSize" value="5" />
            </item>
        </item>
    </item>
</data>
```

Save, clear the cache and go to the front-end.

![](../Images/FAQ/lineChartWithY-axisOptionsInFrontend.png)

> [!TIP]
> You can easily adapt the previous configuration to other cases by translating
> the JavaScript configuration examples given in the Charts.js documentation.
>
> The translation is simple:
>
> **Fluid Parser**
>
> -   Replace options by a `<c:data id="..."> ... </c:data>` where the `id` is the identifier for the chart options (it is defined in the template).
> -   Replace opening braces by `<c:item>` tags with attributes as keys.
> -   Replace open brackets, if any, by `<c:item>` tags with keys equal to 0.
> -   Replace simple attributes inside braces by `<c:item />` tags with key and value attributes.
> -   Replace closing braces or brackets by `</c:item>` tags.
>
> **XML Parser**
>
> -   Replace options by a `<data id="..."> ... </data>` where the `id` is the identifier for the chart options (it is defined in the template).
> -   Replace opening braces by `<item>` tags with attributes as keys.
> -   Replace open brackets, if any, by `<item>` tags with keys equal to 0.
> -   Replace simple attributes inside braces by `<item />` tags with key and value attributes.
> -   Replace closing braces or brackets by `</item>` tags.

For example, the following code changes also the label style of the x-axis.
A callback is used to modify the tick labels.

**Fluid Parser**

```xml
<c:data id="lineChartOptions">
    <c:item key="scales">
        <c:item key="y">
            <c:item key="max" value="100" />
            <c:item key="min" value="10" />
            <c:item key="ticks">
                <c:item key="stepSize" value="5" />
            </c:item>
        </c:item>
        <c:item key="x">
            <c:item key="ticks">
                <c:item key="font">
                    <c:item key="size" value="15" />
                    <c:item key="tyle" value="italic" />
                </c:item>
                <c:item key="color" value="rgb(200, 0, 0)" />
                <c:callback key="callback">
                    function(value, index, values) {
                        return '- ' + this.getLabelForValue(value) + ' -';
                    }
                </c:callback>
            </c:item>
        </c:item>
    </c:item>
</c:data>
```

**XML Parser**

```xml
<data id="lineChartOptions">
    <item key="scales">
        <item key="y">
            <item key="max" value="100" />
            <item key="min" value="10" />
            <item key="ticks">
                <item key="stepSize" value="5" />
            </item>
        </item>
        <item key="x">
            <item key="ticks">
                <item key="font">
                    <item key="size" value="15" />
                    <item key="tyle" value="italic" />
                </item>
                <item key="color" value="rgb(200, 0, 0)" />
                <callback key="callback">
                    <!--
                    function(value, index, values) {
                        return '- ' + this.getLabelForValue(value) + ' -';
                    }
                    -->
                </callback>
            </item>
        </item>
    </item>
</data>
```

> [!NOTE]
> The JavaScript function must be in an XML comment.

![](../Images/FAQ/lineChartWithYAndX-axesOptionsInFrontend.png)

> [!NOTE]
> In Chart.js 3.0 , the former `xAxes` and `yAxes` arrays in `scales` were removed.

## How to Modify the Tooltip Format? {#how-to-modify-the-tooltip-format}

The tooltip format can be modified using callbacks that are provided with Chart.js.
For example let us assume that data provided with the Pie Chart example
are in €. Let us also assume that we want to change the tiptool content
in order to have `label - value €` instead of the defaut format `label:value`.

Chart.js library allows to modify several behaviors by means of callbacks.
Please consult the [Chart.js documentation](https://www.chartjs.org/docs/) for details.

The tooltip label can been changed by means of the label callback in `tooltip` options.

### Inline JavaScript Function {#inline-javascript-function}

Add the following configuration in the data section or in your template.

**Fluid Parser**

```xml
<c:data id="pieChartOptions">
    <c:item key="plugins">
        <c:item key="tooltip">
            <c:item key="callbacks">
                <c:callback key="label">
                    function(context) {
                        return context.label + ' - ' + context.formattedValue + ' €';
                    }
                </c:callback>
            </c:item>
        </c:item>
    </c:item>
</c:data>
```

**XML Parser**

```xml
<data id="pieChartOptions">
    <item key="plugins">
        <item key="tooltip">
            <item key="callbacks">
                <callback key="label">
                    <!--
                    function(context) {
                        return context.label + ' - ' + context.formattedValue + ' €';
                    }
                    -->
                </callback>
            </item>
        </item>
    </item>
</data>
```

> [!NOTE]
> The JavaScript function must be in an XML comment.

Save, clear the cache and go to the front-end.

![](../Images/FAQ/tooltipLabelCallbackInFrontend.png)

The configuration is simply the translation of the following JavaScript configuration.

```javascript

options: {
    plugins: {
        tooltip: {
            callbacks: {
                label: function(context) {
                    return context.label + ' - ' + context.formattedValue + ' €';
                }
            }
        }
    }
}
```

> [!NOTE]
> In Chart.js 3.0 `tooltips` was renamed `tooltip` and
> is now in the `plugins` item of the `options`. A tooltip item context is avaible in callbacks.
> For more information see the [tooltip section](https://www.chartjs.org/docs/latest/configuration/tooltip.html)
> in Chart.js documentation.

### JavaScript Function in a File {#javascript-function-in-a-file}

When the JavaScript function associated with the callback is more complex,
you can also put it in a file and call that file in the callback
as shown in the following configuration.

**Fluid Parser**

```xml
<c:data id="pieChartOptions">
    <c:item key="plugins">
        <c:item key="tooltip">
            <c:item key="callbacks">
                <c:callback key="label">
                    EXT:sav_charts/Resources/Public/Callbacks/TooltipLabel.js
                </c:callback>
            </c:item>
        </c:item>
    </c:item>
</c:data>
```

**XML Parser**

```xml
<data id="pieChartOptions">
    <item key="plugins">
        <item key="tooltip">
            <item key="callbacks">
                <callback key="label">
                    EXT:sav_charts/Resources/Public/Callbacks/TooltipLabel.js
                </callback>
            </item>
        </item>
    </item>
</data>
```

## How to call a JavaScript Function on Events? {#how-to-call-a-javascript-function-on-events}

The following configuration shows how to associate the JavaScript function
`newLegendClickHandler` with the `onClick` event of the `legend`.

**Fluid Parser**

```xml
<c:data id="barChartOptions">
    <c:item key="plugins">
        <c:item key="legend">
            <c:callback key="onClick">newLegendClickHandler</c:callback>
        </c:item>
    </c:item>
</c:data>

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

**XML Parser**

```xml
<data id="barChartOptions">
    <item key="plugins">
        <item key="legend">
            <item key="onClick" type="function" value="newLegendClickHandler" />
        </item>
    </item>
</data>

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

The function `newLegendClickHandler`
is available in `ResourcesPublicCallbacksNewLegendClickHandler.js` and must be
inserted by TypoScript.

```typoscript
page.includeJSFooter{
    newLegendClickHandler = EXT:sav_charts/Resources/Public/Callbacks/NewLegendClickHandler.js
}
```

Open the console and click on the chart legend.

![](../Images/FAQ/functionOnEvent.png)

## How to Create a Combination Chart? {#how-to-create-a-combination-chart}

An example which combines a bar chart and a line chart is provided in the directory
`Resources/Private/Templates/ChartsExamples`. Create a new graph then, in the template
section, enter the following code, save and go to the front-end.

**Fluid Parser**

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

**XML Parser**

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

![](../Images/ScreenShots/Charts/comboChart.png)

The file `ComboChart.xml` is very similar to the file `BarChart.xml`. Only slight changes were made.
The `type` attribute of the second dataset is set to `line` and the `fill` attribute to `false`.

**Fluid Parser**

```xml
<c:data id="set1">
    <c:item key="type">line</c:item>
    <c:item key="fill" value="false"/>
        ...
</c:data>
```

**XML Parser**

```xml
<data id="set1">
    <item key="type">line</item>
    <item key="fill" value="false"/>
        ...
</data>
```

The value for the `type` attribute of each chart is given in
the [Chart.js documentation](https://www.chartjs.org/docs/).

## How to use Plugins? {#how-to-use-plugins}

A plugin to draw a border around the chart is
available in `ResourcesPublicPluginsCharAreaBorder.js`.

**Fluid Parser**

```xml
<c:plugin chartId="pie__1" key="chartAreaBorder" fileName="EXT:sav_charts/Resources/Public/Plugins/ChartAreaBorder.js" />

<c:data id="pieChartOptions">
  <c:item key="plugins">
    <c:item key="chartAreaBorder">
      <c:item key="borderColor">red</c:item>
      <c:item key="borderWidth">2</c:item>
    </c:item>
  </c:item>
</c:data>

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

> [!NOTE]
> The argument chartId is `pie__1` if
> you use \<c:chart.pie>. It becomes `pieChart__1`
> if you use \<c:pieChart> (a viewHelper for
> compatibility with the XML parser).

**XML Parser**

```xml
<plugin chartId="pieChart#1" key="chartAreaBorder" fileName="EXT:sav_charts/Resources/Public/Plugins/ChartAreaBorder.js" />

<data id="pieChartOptions">
  <item key="plugins">
    <item key="chartAreaBorder">
      <item key="borderColor">red</item>
      <item key="borderWidth">2</item>
    </item>
  </item>
</data>

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

![](../Images/FAQ/plugin.png)