Evo uiUi elements
Vertical Chart
A bar chart component for comparing numeric values vertically
This page documents Evo UI v1. For the current version, see Evo UI v2. Upgrading? Read the migration guide.
Overview
Vertical Chart displays a list of labeled values using vertical bars. It supports custom styling through the Styler system.
At runtime or in the editor, the chart rebuilds itself whenever data changes or when the RectTransform size updates. All visible elements are generated dynamically.
Properties
Data
| Name | Type | Description |
|---|---|---|
dataPoints | List<DataPoint> | List containing label and value |
DataPoint
| Field | Type | Description |
|---|---|---|
label | string | Category label |
value | float | Bar value |
tableKey (optional) | string | Localization key for label |
Settings
| Name | Type | Description |
|---|---|---|
padding | RectOffset | Padding inside the chart area |
gridToBarsOffset | float | Gap between bars and grid |
barSpacing | float | Spacing between bars |
barCornerRadius | float | Corner radius for rounded bars |
barSprite | Sprite | Custom bar sprite (optional) |
Grid Settings
| Name | Type | Description |
|---|---|---|
showGrid | bool | Shows horizontal grid lines |
horizontalGridLines | int | Number of grid lines |
gridLineThickness | float | Grid line thickness |
Axis Settings
| Name | Type | Description |
|---|---|---|
showAxis | bool | Shows X and Y axis lines |
axisThickness | float | Axis line thickness |
Value Settings
| Name | Type | Description |
|---|---|---|
showValues | bool | Places numeric labels above bars |
valueHeight | float | Height for numeric label area |
valueFontSize | float | Font size for value labels |
Label Settings
| Name | Type | Description |
|---|---|---|
labelHeight | float | Height for label area below bars |
labelFontSize | float | Font size for category labels |
Styling
| Name | Type | Description |
|---|---|---|
stylingSource | StylingSource | Custom or Styler preset |
stylerPreset | StylerPreset | Style preset |
gridColor | ColorMapping | Color mapping for grid lines |
axisColor | ColorMapping | Color mapping for axes |
barColor | ColorMapping | Color mapping for bars |
labelColor | ColorMapping | Color mapping for labels |
valueFont | FontMapping | Font used for value labels |
labelFont | FontMapping | Font used for category labels |
Public Methods
| Name | Parameters | Description |
|---|---|---|
UpdateData(newData) | List<DataPoint> | Replaces all data points |
DrawChart() | None | Forces a full redraw |
AddDataPoint(label, value) | string, float | Adds a new bar |
RemoveDataPoint(index) | int | Removes bar at index |
ClearData() | None | Clears all points |
SetDataPoint(index, label, value) | int, string, float | Updates a point |
SetDataPoint(item, label, value) | DataPoint, string, float | Updates specific item |
ShowValues | bool | Enables or disables bar value labels |
Code Example
using UnityEngine;
using Evo.UI;
public class VerticalChartExample : MonoBehaviour
{
public VerticalChart chart;
void Start()
{
// Add or update data
chart.AddDataPoint("Jan", 60f);
chart.AddDataPoint("Feb", 90f);
chart.SetDataPoint(0, "January", 75f);
// Toggle labels
chart.ShowValues = true;
// Redraw
chart.DrawChart();
}
}