---
title: "Template ViewHelper <c:plugin>"
manual: "SAV Charts"
version: "14.7"
source: "Reference/FluidParserViewHelpers/PluginViewHelper/Index.rst"
rendered: "2026-09-17T13:01:15+00:00"
---

# Template ViewHelper `<c:plugin>` {#template-viewhelper-c-plugin}

ViewHelper that includes a plugin.

Go to the source code of this ViewHelper:
[PluginViewHelper.php](https://github.com/YolfTypo3/SavCharts/blob/main/Classes/ViewHelpers/PluginViewHelper.php) (GitHub).

## Arguments {#arguments}

The following arguments are available for the plugin ViewHelper:

-   **chartId**

    -   *Required:* true
    -   *Type:* string

-   **key**

    -   *Required:* true
    -   *Type:* string

    Plugin key

-   **fileName**

    -   *Default:* ''
    -   *Type:* string

    File name containing the JavaScript function

## Examples {#examples}

The following examples should be included in the
"Templates" field of the "Fluid Parser" tab
of the plugin.

### With fileName attribute {#with-filename-attribute}

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

### Child nodes {#child-nodes}

The JavaScript function is directly inserted in the child.

```xml
<c:plugin chartId="pie__1" key="chartAreaBorder">
    beforeDraw(chart, args, options) {
        const {
            ctx,
            chartArea: { left, top, width, height }
        } = chart;

        ctx.save();
        ctx.strokeStyle = options.borderColor;
        ctx.lineWidth = options.borderWidth;
        ctx.setLineDash(options.borderDash || []);
        ctx.lineDashOffset = options.borderDashOffset;
        ctx.strokeRect(left, top, width, height);
        ctx.restore();
    }
</c:plugin>
```