# Crossfilter

## Overview

Crossfilter allows our charts to filter a 2nd one.

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

The first chart is called the "parent chart" and the second is called the "child chart". The crossfilter is based on columns used to configure the both charts. By default, we're using the column used in the `label` field.

### Available "parent chart"

* Barchart
* Barlinechart
* Circularchart
* Linechart
* Heatmap
* Mapchart
* Stackedbarchart

### How to configure

1. Configure two charts with their mandatory options
2. Hover the first chart, it's available if it's available as parent chart, click on the link icon.

{% hint style="success" %}
**Success**

Your crossfilter is configured
{% endhint %}

1. Click on the link icon on the parent chart
2. On the "configuration" panel, you have the columns on which the crossfilter is based on.
3. Change or add a column on which you can't your crossfilter to be based.

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

{% hint style="success" %}
**How to edit**

**Success**

The crossfilter is directly updated
{% endhint %}

### How to apply/unapply

1. Click on the **cog** button on the parent chart
2. Click on the **link** button that appears on the child chart -> Your child chart isn't cross-filtered anymore
3. Click again on the link button -> Your child chart is now crossfiltered again.

   <figure><img src="https://1809014303-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZxYYf1KpgarKMgMsDCrw%2Fuploads%2Fgit-blob-9e1e73b759b37a77087865e474b6d49f23c18d09%2Fcrossfilter-off.png?alt=media" alt=""><figcaption><p>Crossfilter off</p></figcaption></figure>

   <figure><img src="https://1809014303-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZxYYf1KpgarKMgMsDCrw%2Fuploads%2Fgit-blob-6fffd28f4e5ac0e5bea547c269e74c5247db1000%2Fcrossfilter-on.png?alt=media" alt=""><figcaption><p>Crossfilter on</p></figcaption></figure>

{% hint style="success" %}
**Success**

Now you know how to manage crossfilter :tada:
{% endhint %}

### Manage charts' size

When having 2 charts at the same time, you might want to display one as smaller than the other.

By default, both charts will occupy half of the screen but you might want to make the top chart smaller.

You can find the `size` parameters in your chart options (in the **Display** category)

You can specify a size for each chart. It should be between 0 and 1.

{% hint style="info" %}
Both **0** and **1** values have no effect on the size! You should have a decimal value like **0.4**
{% endhint %}

If you need to set a different ratio for mobile displays, use the `mobile size` option. If there is no `mobile size` option, the `size` option will also be used for mobile as well.