---
title: "Bar ViewHelper <c:plotlychart.bar>"
manual: "SAV Charts"
version: "main"
permalink: "https://docs.typo3.org/permalink/yolftypo3/sav-charts:plotlychart-barviewhelper@main"
source: "Reference/FluidParserViewHelpers/PlotlyChart/BarViewHelper/Index.rst"
rendered: "2026-10-09T13:07:41+00:00"
---

# Bar ViewHelper \<c:plotlychart.bar> {#plotlychart-barviewhelper}

ViewHelper to include a bar chart with `Plotly`.

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

## Quick Test {#quick-test}

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

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

## Arguments {#arguments}

-   **id**

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

    Chart ID

-   **data**

    -   *Required:* true
    -   *Type:* mixed

    Data, or a reference to data

-   **layout**

    -   *Type:* mixed

    Layout, or a reference to layout

-   **config**

    -   *Type:* mixed

    Config, or a reference to config

-   **width**

    -   *Type:* string
    -   *Default:* 600

    Width value, or a reference to the width value

-   **height**

    -   *Type:* string
    -   *Default:* 400

    Height value, or a reference to the height value

## Examples {#examples}

### Defining a Bar Chart {#defining-a-bar-chart}

```xml
<c:plotlycharts>
    <c:plotlychart.bar id="1" data="data__barChartData" layout="data__barChartLayout" >
        ...
    </c:plotlychart.bar>
</c:plotlycharts>
```