# Multiple Traces

> There's no limit to what you can do with Plotly and multiple traces.

## Combo Charts

When a chart uses more than one type of trace for visualization, it is a combo chart. Like combining column and line graphs in one chart.

Plotly could combine all types of traces with each other and make combo chart. Even if the traces nature is not match, Plotly will draw the result for you.

## Multiple Traces Options

When similar traces are used to make a chart, you can determine their position relative to each other. The default mode changes according to the chart type.

{% hint style="warning" %}
This feature is used for cartesian charts (with x and y axis) and cannot be used in some charts such as pie, polar and map.
{% endhint %}

### Mode

These modes offer versatile ways to visualize and interpret multiple traces in a single chart, each providing unique insights depending on the comparison or relationship you are exploring.

**Group** for side-by-side comparison, **Stack** for cumulative views, **Relative** for proportions, and **Overlay** for combined analysis across various chart types.

{% tabs %}
{% tab title="Group (Clustered)" %}
In Group mode, each trace is represented separately but aligned side-by-side for each category or segment. This mode is not limited to bars; it can be used with lines, points, or other chart types.

### **Use Case**

Ideal for direct comparison of different traces within the same category. It helps in analyzing how each trace performs in relation to others within the same segment.

### **Example**

Imagine comparing the sales of three products (A, B, C) across four quarters. Each quarter will have three bars (one for each product) grouped together
{% endtab %}

{% tab title="Stack " %}
In Stack mode, values from different traces are piled on top of one another for each category. This can be visualized with bars, areas in an area chart, or even segments in a funnel chart.

### **Use Case**

Useful for understanding the total cumulative effect of all traces in each category while also observing the individual contribution of each trace.

### **Example**

Continuing the example above, the sales of products A, B, and C in each quarter are stacked on top of each other. This shows the total sales per quarter and the contribution of each product to that total.
{% endtab %}

{% tab title="Relative" %}
Like Stack mode but displays the proportional contribution of each trace as a percentage of the total for each category. 

### **Use Case**

Best for comparing the relative size or importance of each trace within a total, especially when the absolute values are less important than the proportion.

### **Example**

In our sales example, each product's sales are shown as a percentage of the total sales per quarter. This way, you can easily compare the market share of each product per quarter.
{% endtab %}

{% tab title="Overlay " %}
In Overlay mode, different traces are plotted in the same space without stacking, often using unique styles (like combining a line chart and a bar chart) or transparencies.

### **Use Case**

Ideal for comparing multiple traces that may have different scales or units. It provides a clear view of how different traces relate to each other within the same context.

### **Example**

You could overlay a line graph showing customer satisfaction scores on top of the bar graph of sales. This allows for a comparison of sales figures with customer satisfaction trends.
{% endtab %}
{% endtabs %}

### Gap and Group Gap

These options are used to describe the spacing between elements in a chart, specifically when dealing with multiple traces like bars in a bar chart. 

{% tabs %}
{% tab title="Gap" %}
Refers to the space between separate groups of bars or elements in a chart. In charts with multiple traces, this setting controls how much space is left between these groups.
{% endtab %}

{% tab title="Group Gap" %}
Controls the space between individual bars or data points within a single category or location coordinate. It's a way to adjust how tightly or loosely the bars or elements are packed together.
{% endtab %}
{% endtabs %}

### Normalization

{% tabs %}
{% tab title="Fraction" %}
Fraction normalization is useful when you want to understand the relative size of each data point in relation to a total. It's often used in scenarios where the absolute values are less important than the proportion they represent of the whole.
{% endtab %}

{% tab title="Percentage" %}
This is like fraction normalization but scales the data points to sum up to 100%. Each data point is represented as a percentage of the total.
{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://nocode-artisan.gitbook.io/plotly-charts/additional-resources/elements-fields-reference/overview/multiple-traces.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.