# Cards

{% embed url="<https://www.youtube.com/watch?v=U-PRanxXws0>" %}
Check out our video tutorial on cards
{% endembed %}

💡 Cards are data representations in the form of boxes, in which numerical values are displayed, as well as value comparisons (delta) and trend curves (sparkline). They are recommended for the display of KPIs.

## Creating the component <a href="#id-3cd60b25-f4a3-4ddd-ab06-5bffb3ae77e7" id="id-3cd60b25-f4a3-4ddd-ab06-5bffb3ae77e7"></a>

Click on the **Card** icon to add a card indicator to the dashboard.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdQPXRzpnJgc_smui-%2FCreateCards.gif?alt=media\&token=f537d1bf-d1b4-49dc-b8a5-6a375be86d6f)

The settings of the component is then done in the following order:

* [Adding the data fields by drag and drop](#d8e557e9-fa68-4051-9104-0c4f50337b12)
* [Cards settings](#d750b42e-b50a-472f-9fe9-55e36cbe41ff)
* [Setting up the content of the Cards (layout, coloring indicators, Sparklines, data formats)](#50c113a8-483f-4699-9a0a-9f70b606b5ef)

## Fields of data items <a href="#d8e557e9-fa68-4051-9104-0c4f50337b12" id="d8e557e9-fa68-4051-9104-0c4f50337b12"></a>

The fields to be visualized are added by drag and drop in the following 4 main areas

* Actual
* Target
* Series
* Sparkline

### Actual <a href="#id-0b44bcc4-3fe1-471f-bc98-16b7be388ddc" id="id-0b44bcc4-3fe1-471f-bc98-16b7be388ddc"></a>

Data values to analyze.

*Actual sales analysis.*

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdQPXXtMeT4EJrdbX_%2FActual.png?alt=media\&token=01cf25b0-3c5a-4e85-a865-aaa986e17d41)

### Target <a href="#id-59c5dea9-e0f7-47d7-a82f-0e38563f3630" id="id-59c5dea9-e0f7-47d7-a82f-0e38563f3630"></a>

Target goal, to be compared with analyzed values

*Comparison of actual sales with a forecasted target.*

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdQPXSBrk-VGE5FDYy%2FTarget.png?alt=media\&token=7cc1b729-ab6f-491c-a043-b947f56ad441)

### &#x20;<a href="#id-39f907eb-014f-4146-8ea0-8c94d44cfca9" id="id-39f907eb-014f-4146-8ea0-8c94d44cfca9"></a>

### Series <a href="#id-39f907eb-014f-4146-8ea0-8c94d44cfca9" id="id-39f907eb-014f-4146-8ea0-8c94d44cfca9"></a>

Data to be broken down during the analysis. One card is created per item in the series.

*Breakdown of the analysis by sales person.*

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdQPXUahho50Pz8Iw4%2FSeries.png?alt=media\&token=ad15aee7-c906-4e3e-8ac2-b03420db7380)

### Sparkline <a href="#cd7fcabc-e940-495c-8307-c051c9156b4d" id="cd7fcabc-e940-495c-8307-c051c9156b4d"></a>

Date type field. Displays a trend curve of the actual value, detailed according to the granularity of the date (year, quarter, month...).

*Visualization of sales evolution by month.*

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdQPXTo84jjPlG4O3w%2FSparkline.png?alt=media\&token=9baeb9fd-2950-4232-b87c-cd8a37403de2)

## Multiple data items <a href="#id-828e1631-c8da-4638-b7a5-f4fc9d4e3497" id="id-828e1631-c8da-4638-b7a5-f4fc9d4e3497"></a>

### Multiple series <a href="#id-3ba2fb58-cb70-4ba0-b3f5-c3369239b7f6" id="id-3ba2fb58-cb70-4ba0-b3f5-c3369239b7f6"></a>

The addition of series increases the granularity of the information. If the drill down is activated, it is possible to see the detail of the information of a card by clicking on it.

*Adding the information "Store Country" in series*

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdQPXW8JbpgcVIJXQv%2FMultipleSeries.png?alt=media\&token=7c7d150b-7acd-4c05-932a-7216f9fcfe65)

*Addition of the information "Store City" in series, with drill down activated*

Clicking on a commercial gives access to the data by city of this commercia&#x6C;*.*

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdQPXVmQtlPEinNAcP%2FMultipleSeriesZoom.png?alt=media\&token=8082bc10-35af-4cf2-b57e-0d864393750d)

### &#x20;<a href="#id-86709e18-b4d7-4865-97af-4511e866a69f" id="id-86709e18-b4d7-4865-97af-4511e866a69f"></a>

### Real value pairs and multiple targets <a href="#id-86709e18-b4d7-4865-97af-4511e866a69f" id="id-86709e18-b4d7-4865-97af-4511e866a69f"></a>

Adding pairs of actual and target values to a set of Cards creates a new set of Cards per pair. These sets are layered within the same dashboard component. Switching between the Cards for each actual and target value pair is done by clicking on the stacked areas icon.

💡 If no set is populated, this displays multiple Cards on the same component, one per actual/target value pair.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdQPXYyX4fvzuTlOdv%2FMultipleActualTarget.png?alt=media\&token=05f9c9e6-89bd-4afa-b45b-52b3b752b0c9)

## Specific settings by value <a href="#id-50c113a8-483f-4699-9a0a-9f70b606b5ef" id="id-50c113a8-483f-4699-9a0a-9f70b606b5ef"></a>

You can configure the display of each set of Cards in the component by clicking on this icon. The Card Options window has four tabs: Layout Options, Delta Options, Sparkline Chart Option and Format Options

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdR5FVQ1HR_pRfAAbW%2FSettingsCards.png?alt=media\&token=3d673c3f-3499-4833-ab3c-01d2ce82e2dd)

### Layout options <a href="#id-83a9578d-cedc-4d6e-811b-7c555ebe0edc" id="id-83a9578d-cedc-4d6e-811b-7c555ebe0edc"></a>

This part allows you to manage the size of the Cards as well as the position and visibility of the different elements displayed in the Cards: actual value, target, Delta indicator, Sparkline...

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdQPX24CufXU8ZDZac%2FLayoutOptions.png?alt=media\&token=2b685e0c-b1a2-4df6-9cfd-4b1bfc4ffb79)

* *Select template:* The chosen template allows to manage the position and the display of the elements in the card.

{% tabs %}
{% tab title="Stretched" %}

* The Stretched template organizes the elements so that they take up the whole space of the Card.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdQPXNlC9xK5RW7ayy%2FStretched.png?alt=media\&token=0dc0d14a-4fa4-4fa8-b673-1bcaa7f76c73)
{% endtab %}

{% tab title="Centered" %}

* The Centered template is used to center all displayed elements.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdQPXHYZG7toTm3Hd0%2FCentered.png?alt=media\&token=c12c50a0-ab84-4349-ae12-ce42fc1ce76f)
{% endtab %}

{% tab title="Compact" %}

* The Compact template is used to make the displayed elements take up as little space as possible.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdQPXOXXNEgV7TJb-5%2FCompact.png?alt=media\&token=2cb1fb71-445d-4adf-a877-ca86532ee7c0)
{% endtab %}

{% tab title="Lightweight" %}

* The Lightweight template displays the minimum amount of information.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdQPXPEu9xak4mavMj%2FLightweight.png?alt=media\&token=f110e13c-6681-49b6-8666-ddba68c3359b)
{% endtab %}
{% endtabs %}

* **Customization of the chosen template:** Each template can be customized according to the options available in the right-hand zone.

  * *Mix width:* Minimum width for the content of the cards.
  * *Max width:* Maximum width for the content of the cards. If auto is checked, the width of the card will adapt to the displayed content.
  * *Visible:* Checked elements will be visible in the card.
  * *Apply to all cards:* The settings done for this template will be applied to all the tiles of the component
  * *Reset:* The settings of the selected template will be reset to default values.

* **Value/Element:** Content to be displayed in the chosen template card. The content to be displayed cannot be changed for the chart elements, i.e. the Delta indicator and the Sparkline. These are reserved content locations, they can only be shown or hidden.

*Example with data items, the menu of values and items and the associated Sparkline, for a bicycle subcategorys sales analysis extract*

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdRNu_ergVZfESTYLz%2FTitleCards.png?alt=media\&token=73b55b8e-fefc-4d0d-8451-ee3fdec51729)

* *Title:* Title of the broken down series. If several series are entered, this is the title of the last series entered. If no series is defined, the information "card name" is displayed.
  * *In the example above, the title is the last series entered: the sub-category. This corresponds to "Touring Bikes".*
* *Subtitle:* In the case where several series are present, list box preceding the "Title" part.
  * *In the example above, the sub-title is the list box "Store Country - Store City - Category". This corresponds to "Australia - Hawthorne - Bikes".*
* *Absolute variation:* Difference in values \["actual" - "target" ].
  * *In this example above, this corresponds to "+3.39M".*
* *Actual value:* "Actual" data field.
  * *In this example above, this correponds to "8.55M".*
* *Card name:* Title defined as "title of the cards".
* *Percent of target:* Ratio of the values \["actual"/"target"].
  * *In the example above, this would correspond to "+165.58%".*
* *Percentage variation:* Ratio of values \[ ("actual" - "target") / "target" ].
  * *In this example above, this correponds to "+65.58%".*
* *Target value:* "Target" data field.
  * *In this example above, this would correponds to "5.16M".*
* *Dimension (xxxx, yyyy, zzzz, ....):* an additional line is displayed per series filled in. This allows to display specifically the information of the series.

💡 These visualizations are only representative of the location of the Sparkline elements, regardless of their value. The number on the left is the position number, and is not dependent on the value selected.

* Stretched template

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdQPXfJ2gVZN9vzO0w%2FStretchedModel.png?alt=media\&token=75cd8d46-a4b7-44aa-a56d-5f555da10605)

* Centered template

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdQPXc7f13VGBlzoUq%2FCenteredModel.png?alt=media\&token=373785f2-8a20-4e00-a902-d58bc73d91f0)

* Compact template

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdQPX7jqHqYj9ahD54%2FCompactModel.png?alt=media\&token=dbbd5bb0-2dd2-47f9-937b-30b2534020d4)

* Lightweight template

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdQPX6pbM8lIc9zda6%2FLightweightModel.png?alt=media\&token=811571b4-3be9-4da3-bb32-c8bf2984f20f)

### **Delta options** <a href="#id-7d9b0e0f-d64d-48f0-856f-80cd143f4fc5" id="id-7d9b0e0f-d64d-48f0-856f-80cd143f4fc5"></a>

This part allows you to set the delta color display on the cards.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdQPX5D6c5V9YgUfy3%2FDeltaOptions.png?alt=media\&token=0c224266-e93f-462f-ba71-40b0ed4d7cc4)

* *Result indication:* Allows you to specify the color code used for the delta of the cards.

💡 It is possible to specify a tolerance threshold with respect to the target. Actual values within this threshold, below or above the target, will not be colored according to the result indication and will be displayed in gray.

* *Threshold type:* Definition of the tolerance threshold as a percentage of the target or as an absolute value.
* *Threshold value:* Specification of the tolerance threshold value, depending on the type chosen.

You can choose the following options:

{% tabs %}
{% tab title="Greater is good" %}
The delta is displayed in green if the actual value is higher than the target value. If the target value is higher than the actual value, the delta is displayed in red

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdQPXB4cNNCfg186--%2FGreaterIsGood.png?alt=media\&token=2d7ad798-aa6e-4ba9-8867-c1fcc3abf999)
{% endtab %}

{% tab title="Less is good" %}
The delta is displayed in green if the actual value is below the target value. The delta is displayed in red if the actual value is above the target value.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdQPXAU63-DSZIWNTC%2FLessIsGood.png?alt=media\&token=14aaae1e-d026-4492-8ad1-8fa5401d57f9)
{% endtab %}

{% tab title="No indication" %}
No color is displayed. The delta is displayed in gray.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdQPXEa5oR1cXxTaP6%2FNoIndication.png?alt=media\&token=97b4805c-27c8-4f4b-9be6-edc0e8652469)
{% endtab %}

{% tab title="Warning if greater" %}
An indication is displayed if the actual value exceeds the target value. Otherwise no color indication is displayed.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdQPXD8H9YECvDj5hJ%2FWarningIfGreater.png?alt=media\&token=53e3031a-a5b3-4309-bbd5-65e7f1f11632)
{% endtab %}

{% tab title="Warning if less" %}
An indication is displayed if the actual value is below the target value. Otherwise no color indication is displayed.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdQPXCjAxHvWv6kl9A%2FWarningIfLess.png?alt=media\&token=e9a4805f-348b-435e-844f-23064800727e)
{% endtab %}
{% endtabs %}

*Configure a threshold value for delta indications:* You can configure more advanced display conditions for delta colors, you have to choose a type before a value. For example, you can decide to display in green only those cards whose value exceeds 20% of the target (percent chosen), or exceeds 10 000€ (absolute chosen).

### **Sparkline options** <a href="#id-7ed7e3e4-9d6a-49f2-81a2-5379687ef761" id="id-7ed7e3e4-9d6a-49f2-81a2-5379687ef761"></a>

This part allows you to set the Sparklines display.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdQPX3u1AuBB8V8aEm%2FSparklineOptions.png?alt=media\&token=5db7e99c-93fd-4d64-acf8-9963c9e2fe5f)

* *Sparkline view type: Sparkline display mode.*
* *Highlight min/max points:* If checked, the minimum value of the Sparkline will be in red, the maximum in green. Otherwise, the Sparkline will not have a color for highlighting the minimum and maximum values.
* *Highlight start / end points:* If checked, the values of the start and end points of the Sparkline, if represented as a line or an area, will be visible. Otherwise they will be hidden.

{% tabs %}
{% tab title="Line" %}
![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdS2dQapzDqq5PpaKE%2FSparklineLine.png?alt=media\&token=3e037d75-717d-4fbc-a300-74cc08d6b337)
{% endtab %}

{% tab title="Area" %}
![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdQPXKMvPK5y9q3B3z%2FSparklineArea.png?alt=media\&token=dddd1027-82aa-4bec-b3da-aa551251d968)

{% endtab %}

{% tab title="Bar" %}
![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdQPXMEceJx2N0E0RO%2FSparklineBar.png?alt=media\&token=ba708682-8cee-44ff-8de2-2ef0906ea83d)
{% endtab %}

{% tab title="Win/Loss" %}
![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdQPXJdzT3gR_2CJ2Q%2FSparklineWinLoss.png?alt=media\&token=e87962ba-a100-4f37-928f-5e3b19bf4ad8)
{% endtab %}
{% endtabs %}

### &#x20;<a href="#id-016e5db6-5bb4-4d5e-9f3f-043ec79fc001" id="id-016e5db6-5bb4-4d5e-9f3f-043ec79fc001"></a>

### Format options <a href="#id-016e5db6-5bb4-4d5e-9f3f-043ec79fc001" id="id-016e5db6-5bb4-4d5e-9f3f-043ec79fc001"></a>

This part allows you to define the format of the displayed values.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdSF3T61kNarwbfvCg%2FFormatOptions.png?alt=media\&token=16d9e6f7-d875-464d-8b18-758a054e165e)

* *Format type:* Unit format to be displayed.
* *Unit:* Unit scale.
* *Precision:* Number of digits after the decimal point.
* *Currency:* Currency to display in the case of a monetary unit.
* *Culture:* Country of the currency if selected.
* *Includ group separator:* Split the values by 3 digit dashboard item groups.

## Cards settings <a href="#d750b42e-b50a-472f-9fe9-55e36cbe41ff" id="d750b42e-b50a-472f-9fe9-55e36cbe41ff"></a>

The cards can be customized using the interaction and layout tool. Click on the cogwheel on the top right of the component to access the tool.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdSSNd9lmlu6kZFZqo%2FInteractionsSettings.png?alt=media\&token=8779cf84-c3a4-42ee-a6e5-40acb8f3341c)

It is divided into 3 tabs:

* Interactions
* Layout
* Filters

### Interactions <a href="#id-915dbcdb-653d-4d71-858d-853c170c9225" id="id-915dbcdb-653d-4d71-858d-853c170c9225"></a>

The interaction settings allow cards to interact with other dashboard components.Cards, like any other dashboard item, can be configured to filter dashboard data.

[For more details, see the section dedicated to the interactivity between visual components](https://doc.biwee.fr/english/create-dashboard/interactivity-component).

### Layout <a href="#id-2a0de7a6-002d-4634-b90a-03bc14848816" id="id-2a0de7a6-002d-4634-b90a-03bc14848816"></a>

This tab is used to customize the display of the component's cards.

**Common**

This part allows you to configure the title of the component.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdSW_er14XfbGM-LLG%2FCommon.png?alt=media\&token=cbe4343d-02ff-4dbc-a5b8-31ca2dd4f601)

* *Show title:* Hide or show the title. It is displayed by default.
* *Modify title:* Rename the component.

**Content arrangement**

This part allows you to set the arrangement of the cards in relation to each other.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdSZQLdjVAKLZvLD6E%2FContentArrangement.png?alt=media\&token=a9e8ea63-d4fd-4f07-8bc5-edd3e46a197b)

* *Auto arrange*
* *Arrange in colums*&#x20;
* *Arrange in rows*

If you choose columns or rows, you have to select the number of them.

### Filters <a href="#a3385452-a7e7-4bde-8fce-ad06df9195a5" id="a3385452-a7e7-4bde-8fce-ad06df9195a5"></a>

This tab allows you to add a simple or combined filter on the data displayed in the charts of this component and has no influence on the other dashboard components.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdSaiiuVJo3jPt_81R%2FFiltersSettings.png?alt=media\&token=53a3e1a9-a930-4e0e-90eb-8231c84d3927)

For more details, see the help topic dedicated to [filters for a visual component](https://doc.biwee.fr/english/create-dashboard/data-filters-component).

## Conditionnal formatting

You can use conditional formatting to highlight visual elements of a card dashboard component (such as title, subtitle, different values) and change the background of the card.

You can use measurement or dimension values to calculate a format rule. You can also use delta values to calculate format rules for a card.

To do this:

* Either by right-clicking on the field that will be used to define the conditional format rule.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdScqEJMvrTvN7ZUnz%2FConditionnalFormatting1.png?alt=media\&token=1a08b306-a76c-42b4-b369-ebce15c950e2)

* Or by right-clicking on the Card component and selecting "Edit rules".

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdSgK-bQDnB3hxmlR4%2FConditionnalFormatting2.png?alt=media\&token=add3e193-696f-4e2b-9afa-171223602780)

### Example

Here are some cards representing the number of medals per country.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdSvKfbK-9zr8tfk68%2FCardsFormatting.png?alt=media\&token=81d21b3b-fd55-4404-aba9-3ea7a4ca3c8f)

We are going to add a format rule that will change the appearance of the Cards whose country name contains the letter G.&#x20;

To do this, right click on the field "Team" in the "Series" area, then add the format rule of type "Value", and select "Text that contains".

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdT2BSoUgr32ad8Bxv%2FAddFormatRule.png?alt=media\&token=a7120db6-3cc9-402c-88df-27b6588ace1b)

We then choose the format condition, and the appearance that will be applied.

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdT4QC7kG8s-vNMRn9%2FTextThatContains.png?alt=media\&token=600f71c5-ae61-4647-b6b2-5bcafda5c93a)

We can add several rules that combine.

For example, we want to have a green icon when the number of medals is greater than 50 and a red icon when the number of medals is less than 50.

For this we need to add 2 new rules, and also add in HIDDEN DATA ITEMS -> Measures, our field "Medal per event". Then we can start an expression rule on this field, by right-clicking the component "Edit Rules", select "Add" and finally select "Expression".

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdT9v9dbgEsLYTjuN3%2FExpression1.png?alt=media\&token=66ae964d-92a8-4d2b-a7e3-cd3048890340)

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdTC_dcleVIcFPlNFI%2FExpression2.png?alt=media\&token=828d56e4-099d-4150-b98d-45cfd111bf8a)

Result:

![](https://1155922781-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-ML7J3m_7oFtqqYdq0mw%2F-MjdBOaBpFwxm47rLZLO%2F-MjdTFewjsX3IdUkvyb5%2FResultExpression.png?alt=media\&token=be9f198e-971d-4121-8c1b-3d86dcee597e)

For more details, see the following pages.

[Right-click menu](https://doc.biwee.fr/english/create-dashboard/right-click)

[Maximize](https://doc.biwee.fr/english/create-dashboard/maximize-component)

[Export](https://doc.biwee.fr/english/create-dashboard/export-component)
