---
title: "bar chart · RUAL Documentation"
description: "Basic bar chart"
canonical: https://docs.rual.nl/block-types/Component%20UI/component_apexcharts_bar
language: en
---

[Cluster](https://docs.rual.nl/cluster)

[Blocks](https://docs.rual.nl/block-types)

[Interfaces](https://docs.rual.nl/interfaces)

[Blueprints](https://docs.rual.nl/blueprints)

[Tutorials](https://docs.rual.nl/tutorials)

[Home automation](https://docs.rual.nl/home-automation)

[Examples](https://docs.rual.nl/examples)

[Reference](https://docs.rual.nl/reference)

[Architecture](https://docs.rual.nl/architecture)

[Troubleshooting](https://docs.rual.nl/troubleshooting)

Other

# bar chart

This block is part of the [`Component UI`](https://docs.rual.nl/block-types/Component%20UI) group and was last modified in core [`v10.4.28`](https://docs.rual.nl/core-versions/100428).

Basic bar chart

- Name required `value`

- Data `array`

- X Axis required `fielddefinitions`

- Y Axis required `fielddefinitions`

- Row Colors `array` Sets the colors of the background rows

Default `#fff`

- Data colors `array` Sets the colors of the lines

- Title align `value` Align the title, options: Left, Center, Right

Default `left`

- Theme `value`

- Color palette `value` Changes the colors of the lines to presets made by Apexcharts

Default `palette1`

- Height `number`

- Horizontal `condition` Rotates the chart 90 degress and shows the data horizontal

Default `false`

- Stacked `condition` Stacks the data on top of each other instead of next to each other

Default `false`

- Bar Width `value` Sets the width of the bars, use px or % to determine the width

Default `50px`

- Spacing `number` Spacing between bars

Default `0`

- Show data labels `condition`

- Label Position `value` Position of the Data Label, options: Top, Center, Bottom

Default `center`

- Label Offset Y `number`

- Label Offset X `number`

- Label fontsize `value` Default `12px`

- Label Color `value` Default `#fff`

- Zoom `condition` Default `false`

- uicomponent `uicomponent`

| `graph` |
| --- |

A typical wiring for [bar chart](https://docs.rual.nl/block-types/Component%2520UI/component_apexcharts_bar): [value](https://docs.rual.nl/block-types/value/value_default) feeds the `co-name` pin; [combine](https://docs.rual.nl/block-types/fields/fielddefinitions_multiple) feeds the `co-xaxis` pin; [combine](https://docs.rual.nl/block-types/fields/fielddefinitions_multiple) feeds the `co-yaxis` pin; the `uicomponent` out pin feeds [build PDF](https://docs.rual.nl/block-types/files/file_generate_pdf).

[![Studio canvas example for the bar chart block: typical wiring for bar chart.](https://docs.rual.nl/canvas-examples/component_apexcharts_bar.png)](https://docs.rual.nl/canvas-examples/component_apexcharts_bar.png?v=3)

## Version history

Introduced in [`v10.4.28`](https://docs.rual.nl/core-versions/100428).

- [Back to `Component UI`](https://docs.rual.nl/block-types/Component%20UI): Return to the main group to view all sub-groups

- [Back to `apexcharts`](https://docs.rual.nl/block-types/Component%20UI?group=apexcharts): Return to the group to view all blocks within this group

Was this page helpful? [Tell us what to improve](https://docs.rual.nl/support) · RUAL Docs is an integral component of the [RUAL ecosystem](https://rual.nl)