# Barlinechart

<figure><img src="https://1809014303-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZxYYf1KpgarKMgMsDCrw%2Fuploads%2Fgit-blob-3344d4c380b0d49c5658b92a083fe45c61b2829d%2Fillustration_barlinechart_NEW.png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

## 🧭 Overview

Barlinecharts combine bar and line elements to visualize relationships between different data sets. Bars effectively compare categorical values, while the line highlights trends or patterns over time. This hybrid approach enhances data interpretation by providing both absolute comparisons and trend analysis in a single, clear visualization, making insights easier to identify and understand.

> 📊 Example Use Case
>
> * Revenue vs. Profit Margin Over Time
> * Website Traffic and Conversion Rate
> * Sales Volume and Average Selling Price
> * Marketing Spend vs. ROI
> * Employee Headcount and Attrition Rate
> * Production Output and Defect Rate

### ⭐ Key Features

The Barlinechart is a powerful visualization that combines volume and variation, making complex comparisons clear and insightful.

* **Correlate Volume and Variation:** This chart uniquely helps you analyze how a *volume* (e.g., sales) relates to a *variation* (e.g., margin changes).
* **Compare Metrics with Different Scales:** Perfect for confronting dimensions like *absolute values* and *percentages* on the same chart.\
  📝 *Example: Analyze how your Business Units’ sales (€) and margins (%) have evolved over time.*
* **Visualize Trends and Progress Over Time:** The combination of bars and a line clearly reveals trends, progressions, and patterns across time periods.
* **Handle Continuous and Categorical Data:** Use it to display continuous data (e.g., time series) alongside different categories.
* **Ideal for Different Value Scales:** Great when comparing two metrics with vastly different scales—*e.g., 3% vs. €3,000K*.\
  📝 *Example: Track your energy consumption (absolute value) over time while evaluating its percentage change.*

## Configuration

{% tabs %}
{% tab title="New Barlinechart" %}
**Learn how to create a barlinechart using the new design with this step-by-step guide.**\
Explore the interactive walkthrough below to get started quickly, then dive into the full configuration reference table for in-depth details.

{% @arcade/embed url="<https://app.arcade.software/share/OJ5SndpjBBzcogs77CzZ>" flowId="OJ5SndpjBBzcogs77CzZ" %}

**Chart Configuration Step-by-Step**

|                           | Option                          | How does it work?                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| ------------------------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Dimension**             |                                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
|                           | Bar category                    | The bar category corresponds to a column in your dataset, such as 'Product Type'.                                                                                                                                                                                                                                                                                                                                                                                                                                              |
|                           | Order bars                      | <p>This option allows to order bars either by column or by custom value.</p><p><em>By column</em></p><p>Bars are ordered based on the selected column. By default, they follow an ascending order—starting with numerical categories, followed by alphabetical (A-Z). This order can be reversed.</p><p><em>By custom value</em></p><p>Bars are ordered based on the selected measure. For example, if the category is 'October' and the bar height is '10', you need to set the value to 10 for this bar to appear first.</p> |
|                           | Group bars                      | Bars are grouped by category. For example, product types tracked monthly over a long period can be grouped by year.                                                                                                                                                                                                                                                                                                                                                                                                            |
|                           | Change date format              | You can change the display format by selecting an option from the dropdown. Common D3 formats are suggested. *Note: Your column must be in a date format for this option to work.*                                                                                                                                                                                                                                                                                                                                             |
| **Measure**               |                                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
|                           | Bar height                      | The bar height represents a value from your dataset. You can select an aggregation method from the menu, which may vary depending on the chart type.                                                                                                                                                                                                                                                                                                                                                                           |
|                           | Line Y-Axis                     | The Y-Axis represents a value from your dataset. You can select an aggregation method from the menu, which may vary depending on the chart type.                                                                                                                                                                                                                                                                                                                                                                               |
|                           | Precision                       | <p>Precision determines the level of detail in how your values are displayed. By default, measures use a .2f format, meaning they are shown with two decimal places.</p><p><strong>Example:</strong><br>A value of 3.14159 will be displayed as 3.14 when using .2f formatting.</p>                                                                                                                                                                                                                                            |
|                           | Unit                            | Unit represents the total quantity or category being measured for a KPI. It defines what the values correspond to, providing context for better interpretation.                                                                                                                                                                                                                                                                                                                                                                |
|                           | Show value on bar               | Displays all values above the bar for easy visibility.                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
|                           | Show value on line              | Displays all values above the line for easy visibility.                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
|                           | Unify scales for bars and lines | Ensure bars and lines share the same scale for accurate comparison and clear visualization.                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| **Additional parameters** |                                 |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
|                           | ID                              | Unique chart Id                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
|                           | Add complementary value         | The complementary value is displayed in the data label, providing additional context and making it easier for viewers to interpret the data at a glance. It is possible to add a precision, an unit and a sentiment.                                                                                                                                                                                                                                                                                                           |
|                           | Add user chart guide            | Lead your chart viewers through the narrative of your data.                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| **Chart performance**     |                                 | Technical performance                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |

**Style Configuration**

|              | Option         | How does it work?                                                         |
| ------------ | -------------- | ------------------------------------------------------------------------- |
| Theme        |                |                                                                           |
|              | Bars and lines | Customize the bar and line color to align with your branding preferences. |
| {% endtab %} |                |                                                                           |

{% tab title="Legacy Barlinechart" %}
*New Chart Design*

<mark style="color:red;">\*</mark>**Mandatory parameters**

| Section      | Option                                       | Configuration tutorial                                                 |
| ------------ | -------------------------------------------- | ---------------------------------------------------------------------- |
|              | Dataset<mark style="color:red;">\*</mark>    | Select the dataset used by the chart                                   |
|              | Bars Label<mark style="color:red;">\*</mark> | Select the column containing the label of bars                         |
|              | Bars Value<mark style="color:red;">\*</mark> | Select the column containing the value of bars                         |
| Bars         | Bars groups                                  | Select the column containing the name of the parent bars to group them |
| Bars         | Show all bar values                          | Displays values on top of bars. Activated by default.                  |
| Lines        | Y axis<mark style="color:red;">\*</mark>     | Select the column name containing y axis values                        |
| Sort         | Labels order                                 | Order labels based on a column, an advanced order or a custom order.   |
| Display      | Use same scale for bars and lines            | Enhance readability of barlinecharts                                   |
| {% endtab %} |                                              |                                                                        |

{% tab title="New vs. Legacy Configuration" %}

| **⭐️ New**                  | **Legacy**                        |
| --------------------------- | --------------------------------- |
| **Bar category**            | Bars label                        |
| Order bars                  | Labels order                      |
| Groups bars                 | Bars groups                       |
| Change date format          | Custom date tick format           |
| **Bar height**              | Bars value                        |
| **Line Y-Axis**             | Y axis                            |
| Show value on bar           | Show all bar values               |
| Show value on line          | Show all values on line           |
| Unify scales bars and lines | Use same scale for bars and lines |
| Add complementary value     | Additional info                   |
| Add user chart guide        | Tutorial                          |
| {% endtab %}                |                                   |
| {% endtabs %}               |                                   |