---
title: "Bi-Variate Line"
description: "Visualize multiple grouped or split line charts with optional horizontal or vertical orientation across panels."
group: Charts
tags: [Visualization, Chart, Dashboard, Multi-Panel, Small Multiples, Time Series, Split Charts]
---
import { Aside, Steps } from '@astrojs/starlight/components';
# Bi-Variate Line
A **BiVariate Line Chart** is a versatile multi-panel line chart visualization that plots series of continuous data (like trends or time series) grouped by an **Axis** dimension and split into multiple grids based on a **Split** dimension. Optionally, a **Group** dimension can further break down lines within each panel.
It also supports switching chart **orientation** between horizontal (standard) and vertical, useful for comparing multiple measures or groups across categories.
**Key Features:**
- **Multi-panel (small multiples)** line charts split by a **Split** dimension.
- Optional **Group dimension** to plot multiple series within each panel.
- Toggle between **Horizontal** (X-axis = categories) or **Vertical** (Y-axis = categories) layouts.
- Custom line styles, markers, colors, and shadow effects.
- Interactive tooltips and zoom controls for each grid.
- Supports dynamic pivoting and sorting.
- Heatmap coloring based on value ranges.
**Use Cases:**
- Year-on-year trend comparisons split by region or product category.
- Parallel KPI trends across multiple business units.
- Sensor readings split by equipment ID.
- Monthly sales trends per region.
---
## ⚙️ Setup
1. Add the **BiVariate Line Chart** widget from the chart library onto your designer workspace.
2. Select the chart.
3. Go to the [Widget Configuration](/insights-v8/guide-to-infoboard-designer/customize-panel/configure/) tab in the Customize panel.
4. Under the Configuration tab, select the [Basic Configuration](/insights-v8/guide-to-infoboard-designer/customize-panel/configure/#basic) option to access the essential settings for the bi variate line chart.
5. Select the [Source](/insights-v8/guide-to-infoboard-designer/customize-panel/setup/#sources) which the chart will pull the data from the option.
6. Map:
- **[Value (Measure)](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** — The numeric value plotted along the Y-axis (or X if vertical).
- **[Axis (Dimension)](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** — The categorical or date/time value for the independent axis.
- **[Split (Dimension)](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** — The dimension used to split charts into grids.
- (Optional) **[Group (Dimension)](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** — Categorizes multiple lines within a panel.
7. Optionally add a **Date** field for time-based filtering.
8. Enable **Hide Zero Values** to omit symbols with zero values if needed.
---
## 📊 Basic Configuration
| Configuration Item | Description |
|:------------------|:----------------------------|
| **[Source](/insights-v8/guide-to-infoboard-designer/customize-panel/setup/#sources)** | Source providing the data for measures and dimensions. |
| **[Value](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** | Numeric value for each data point. |
| **[Axis](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** | Dimension for the X-axis (or Y if vertical). |
| **[Split](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** | Dimension to split data into multiple line charts. |
| **[Group](/studio-v8/datasources/measures-dimensions-and-hierarchies/)** (optional) | Secondary dimension to group multiple lines within each grid. |
---
## 🎨 Chart Customizations
| Category | Options & Description |
|:---------|:-------------------------------------------------|
| **[General](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#general)** | Modify the chart’s general appearance, including the background color, borders, shadows, and drill-out choices.
| **[Title](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#title)** | Enable and customize chart title text, alignment, font, and color. |
| **[Sorting](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#sorting)** | Define custom sort orders for categories along the X and Y axes. |
| **[Grid](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#grid)** | Adjust chart margins, grid spacing, and padding around the matrix area. |
| **[Legend](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#legends)** | Toggle visibility, position, orientation, and customize legend labels and icons. |
| **[HeatMap](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#heatmap)** | Configure a visual color map to represent value intensity with a gradient. |
| **[Categorical Axis (X, Y)](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#categorical-axis)** | Customize axis labels, intervals, rotation, visibility, and range sliders for both axes. |
| **[Numerical Axis](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#numerical-axis)** | Set axis type, scale (linear/log), and formatting for numeric values. |
| **[Series](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#series-customization)** | Customize line styles, markers, colors, and shadows. |
| **[Tooltip](/insights-v8/guide-to-infoboard-designer/customize-panel/customization-tab/#tooltip)** | Control tooltip content, formatting, and visibility on hover. |
| **[Others]** | Toggle chart orientation (**Horizontal** or **Vertical**), and apply box shadows. |
---
## 📊 Example Visualization
