> For the complete documentation index, see [llms.txt](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/kontroly/grafiki/stolbcy.md).

# Столбцы

![](https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2F5gAnXjIthsRB3PHO51JI%2Fgraph-bar.png?alt=media\&token=db6797ef-af57-4a7f-bf9b-23861e4cf954)

Компонент для создания графика в виде столбцов.

**Свойства:**

* *<mark style="color:purple;">textColor</mark>* - выбор цвета текста
* *<mark style="color:purple;">axisColor</mark>* - выбор цвета сетки осей
* *<mark style="color:purple;">valuesStacked</mark>* - складывать значения для создания диаграммы с накоплением
* *<mark style="color:purple;">valuesFormat</mark>* - выбор маски формата отображения значений. Можно написать свой или выбрать готовый вариант. Более подробную информацию о видах можно узнать [здесь](http://numeraljs.com/#format).
* *<mark style="color:purple;">tooltip</mark>* - содержит настройку **mode** для изменения вида отображения значений при наведении на значение графика. Описание и принцип работы всех значений можно найти [тут](https://www.chartjs.org/docs/2.7.3/general/interactions/modes.html#interaction-modes)
* *<mark style="color:purple;">barHorizontal</mark>* - отображение столбцов в горизонтальном виде
* *<mark style="color:purple;">axes</mark>* - настройка отображения осей **x** и **y**. Содержит следующие поля:
  * *<mark style="color:purple;">hidden</mark>* - скрыть подсказки на выбранной оси
  * *<mark style="color:purple;">min</mark>* - минимальное отображаемое значение на выбранной оси
  * *<mark style="color:purple;">max</mark>* - максимальное отображаемое значение на выбранной оси
* *<mark style="color:purple;">legend</mark>* - настроить подсказку об отображаемых данных. Содержит следующие поля:
  * *<mark style="color:purple;">hidden</mark>* - скрыть подсказку
  * *<mark style="color:purple;">position</mark>* - выбрать вариант отображения подсказки **сверху**, **снизу**, **слева** или **справа**
* *<mark style="color:purple;">labels</mark>* - подписи для каждого значения графика. Для корректного отображения графика количество подписей должно совпадать с максимальным количеством значений *<mark style="color:purple;">datasets</mark>* - *<mark style="color:purple;">data</mark>* в графике
* *<mark style="color:purple;">datasets</mark>* - создание массива данных для графика. Содержит следующие поля:
  * *<mark style="color:purple;">label</mark>* - название отображаемых данных
  * *<mark style="color:purple;">colors</mark>* - настройка цвета графика. Содержит следующие поля:
    * *<mark style="color:purple;">background</mark>* - выбрать или задать цвет заливки графика. Рекомендуется во избежание ошибок задавать в <mark style="color:green;">HEX</mark> формате
    * *<mark style="color:purple;">backgroundAlpha</mark>* - задать прозрачность заливки графика. Задается числом в диапазоне от **0** (полностью прозрачный) до **1** (непрозрачный). Может принимать дробные значения, например **0.75**, задавать такие значения нужно только с точкой
  * *<mark style="color:purple;">data</mark>* - список числовых значений данных

**События:**

* *<mark style="background-color:purple;">onClick</mark>* - событие срабатывает по клику на график