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

# Item ViewHelper \<c:item> {#item-viewhelper-c-item}

ViewHelper which defines items.

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

## Arguments {#arguments}

The following arguments are available for the item ViewHelper:

-   **key**

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

    Item key

-   **value**

    -   *Type:* mixed

    Item value

-   **values**

    -   *Type:* string

    Item comma-separated values

## Examples {#examples}

### With values attribute {#with-values-attribute}

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

```

### With value attribute {#with-value-attribute}

```xml
<c:data id="data">
    <c:item key="0" value="{data__set0}" />
    <c:item key="1" value="{data__set1}" />
</c:data>

```

### Child nodes {#child-nodes}

```xml
<c:data id="lowIntensityColors">
    <c:item key="0">rgba(77, 77, 77, 0.2)</c:item>
    <c:item key="1">rgba(93, 165, 218, 0.2)</c:item>
    <c:item key="2">rgba(250, 164, 58, 0.2)</c:item>
</c:data>
```

```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="style" 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>
```