---
title: "Using Other Libraries"
manual: "SAV Charts"
version: "main"
permalink: "https://docs.typo3.org/permalink/yolftypo3/sav-charts:usingotherlibrariestutorial@main"
source: "Tutorial/UsingOtherLibraries/Index.rst"
rendered: "2026-10-09T13:07:41+00:00"
---

# Using Other Libraries {#usingotherlibrariestutorial}

All the concepts used
in `Charts.js` can be used with the following
libraries:

-   `Apache ECharts` was introduced
    in version 14.7.0 of SAV Charts.
-   `ApexCharts` was introduced
    in version 14.8.0.
-   `Plotly` was introduced
    in version 14.9.0.

## Using Apache ECharts {#using-apache-echarts}

Charts must be created using the `<c:echarts>`
and its [children viewHelpers](https://docs.typo3.org/permalink/yolftypo3/sav-charts:echart@main) instead of `<c:charts>` with `Charts.js`.

Several examples of basic charts are provided
in the directory
**Resources/Private/Templates/EChartsExamples**.

All of the provided examples were
converted from the
[ECharts Examples section](https://echarts.apache.org/examples/en/index.html).
For instance, adding the following code in the
Template field of the plugin Flexform generates
a basic bar chart.

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

![](../../Images/ScreenShots/ECharts/barChart.png)

## Using ApexCharts {#using-apexcharts}

Charts must be created using the `<c:apexcharts>`
and its [children viewHelpers](https://docs.typo3.org/permalink/yolftypo3/sav-charts:apexchart@main) instead of `<c:charts>` with `Charts.js`.

> [!IMPORTANT]
> The Community Licence is free for individuals,
> non-profits, educators, and small businesses
> with less than $2 million USD in annual
> revenue. Please read [License Options for ApexCharts](https://apexcharts.com/license/).

Several examples of basic charts are provided
in the directory
**Resources/Private/Templates/ApexChartsExamples**.

All of the provided examples were
converted from the
[ApexCharts JavaScript Chart Demos section](https://apexcharts.com/javascript-chart-demos).
For instance, adding the following code in the
Template field of the plugin Flexform generates
a basic bar chart.

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

![](../../Images/ScreenShots/ApexCharts/barChart.png)

## Using Plotly Library {#using-plotly-library}

Charts must be created using the `<c:plotlycharts>`
and its [children viewHelpers](https://docs.typo3.org/permalink/yolftypo3/sav-charts:plotlychart@main) instead of `<c:charts>` with `Charts.js`.

Several examples of basic charts are provided
in the directory
**Resources/Private/Templates/PlotlyChartsExamples**.

All of the provided examples were
converted from the
[Plotly JavaScript Demos section](https://plotly.com/javascript/).
For instance, adding the following code to the
`Template` field of the Flexform plugin generates
a basic bar chart.

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

![](../../Images/ScreenShots/PlotlyCharts/barChart.png)

It is also possible to generate more complex charts. For example,
adding the following code to the `Template` field of the
Flexform plugin generates
a 2D contour chart, or a 3D surface chart
using data from the provided CSV spreadsheets.

```xml
<c:template id="1">
EXT:sav_charts/Resources/Private/Templates/PlotlyChartsExamples/Gaussian2DChart.fluid"
</c:template>
```

![](../../Images/ScreenShots/PlotlyCharts/gaussian2D.png)

```xml
<c:template id="1">
EXT:sav_charts/Resources/Private/Templates/PlotlyChartsExamples/Surface3DChart.fluid"
</c:template>
```

![](../../Images/ScreenShots/PlotlyCharts/surface3D.png)