Столбчатая диаграмма

Столбчатая диаграмма сравнивает величины по категориям: высота столбца — значение. Так показывают доходы и расходы по годам, продажи по месяцам, посещаемость по дням.

Как добавить

1. Добавьте виджет Chart из Base Elements или прямо в дерево виджетов.
2. В панели свойств установите Chart Type в Bar.
3. Откройте Chart Data и раскройте [Bar] Chart Data 1.
4. Выберите Data Source:
   • Firestore Documents — укажите список документов в Data, затем поля Bar Labels Field и Bar Values Field.
   • Numbers Lists — задайте списки Bar Labels и Bar Values.
5. Кнопка Add Data добавляет второй ряд данных. Ряды встают рядом друг с другом, если не включён Stack Bars.
6. Размеры графика задаются в Chart Properties — Width и Height.

Оформление столбцов

Отдельный ряд данных

Выделите Chart, откройте Chart Data и раскройте Bar Properties нужного ряда:

• Bar Color — цвет столбцов этого ряда.
• Border Width — толщина обводки столбца.
• Border Color — цвет обводки.

Все столбцы сразу

Выделите Chart и откройте Bar Styling Properties:

• Bar Width — ширина столбца.
• Group Spacing — расстояние между группами столбцов.
• Bar Spacing — расстояние между столбцами внутри группы.
• Stack Bars — складывать ряды в один столбец друг на друга вместо того, чтобы ставить рядом.
• Main Axis Alignment — как столбцы распределены вдоль горизонтальной оси.
• Axis Bounds — нижняя и верхняя границы оси Y: Min Y и Max Y.

Оформление графика

Остальное — фон, границы осей, сетка, рамка — настраивается общими свойствами графика.