> 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/linii.md).

# Линии

![](https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2F3RHisrvj8RX0oE26qGjo%2Fgraph-line.png?alt=media\&token=9bd4be42-bdfe-4e3f-90a1-e08f741343b7)

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

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

* *<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;">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;">color</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;">backgroundFill</mark>* - выбрать вид заливки графика **start** или **end**
  * *<mark style="color:purple;">lineTension</mark>* - задать скругление линий графика. При значении **0** линия будет прямая
  * *<mark style="color:purple;">data</mark>* - список числовых значений данных

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

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