Evo uiUi elements
Horizontal Chart
A bar chart component for comparing numeric values horizontally
This page documents Evo UI v1. For the current version, see Evo UI v2. Upgrading? Read the migration guide.
Overview
Horizontal Chart renders a set of labeled data points as horizontal 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 of entries containing label and numeric value |
DataPoint
| Field | Type | Description |
|---|---|---|
label | string | Display name for the bar |
value | float | Height or length of the bar |
Layout Settings
| Name | Type | Description |
|---|---|---|
padding | RectOffset | Inner padding around chart content |
gridToBarsOffset | float | Distance between grid and bars |
barSpacing | float | Vertical spacing between bars |
barCornerRadius | float | Radius used for rounded bar corners |
barSprite | Sprite | Custom sprite used for bars (optional) |
labelWidth | float | Width of left side label area |
valueWidth | float | Width of right side value area |
Grid Settings
| Name | Type | Description |
|---|---|---|
showGrid | bool | 显示 vertical grid lines |
verticalGridLines | int | Number of divisions in the grid |
gridLineThickness | float | Thickness of grid lines |
Axis Settings
| Name | Type | Description |
|---|---|---|
showAxis | bool | Shows X and Y axes |
axisThickness | float | Thickness of axis lines |
Value Settings
| Name | Type | Description |
|---|---|---|
showValues | bool | Shows value text next to each bar |
valueFontSize | float | Font size for value text |
Styling
| Name | Type | Description |
|---|---|---|
stylingSource | StylingSource | Source used for styler color lookup |
stylerPreset | StylerPreset | Preset used when stylingSource is StylerPreset |
gridColor | ColorMapping | Grid coloring |
axisColor | ColorMapping | Axis coloring |
barColor | ColorMapping | Bar fill coloring |
labelColor | ColorMapping | Label coloring |
valueFont | FontMapping | Font for value text |
labelFont | FontMapping | Font for label text |
labelFontSize | float | Size of label text |
Public Methods
| Name | Parameters | Description |
|---|---|---|
DrawChart() | None | Clears and rebuilds the entire chart |
UpdateData(newData) | List<DataPoint> | Replaces all data points and redraws |
AddDataPoint(label, value) | string, float | Adds a new entry |
RemoveDataPoint(index) | int | Removes an entry |
ClearData() | None | Clears all points |
SetDataPoint(index, label, value) | int, string, float | Updates a single entry |
SetDataPoint(point, label, value) | DataPoint, string, float | Updates an existing item reference |
ShowValues | property | Enables or disables value labels |
Code Example
using UnityEngine;
using Evo.UI;
public class HorizontalChartExample : MonoBehaviour
{
public HorizontalChart chart;
void Start()
{
// Add some data
chart.AddDataPoint("Apples", 50);
chart.AddDataPoint("Oranges", 75);
chart.AddDataPoint("Bananas", 30);
// Modify data
chart.SetDataPoint(1, "Oranges", 90);
// Hide value labels
chart.ShowValues = false;
// Replace all data
chart.UpdateData(new()
{
new HorizontalChart.DataPoint("Product A", 120),
new HorizontalChart.DataPoint("Product B", 80)
});
// Redraw chart
chart.DrawChart();
}
}