# Adding a Slicer

## Steps to Add Slicer in the New UI

{% hint style="success" %}
*Check out the walk-through given below on how to add a slicer.*
{% endhint %}

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxZF8YGlESz97qqyTOJvz%2Fuploads%2FjYit7VkK2QIzY0pEGWVg%2FSlicing%20a%20View%20New%20UI.mp4?alt=media&token=78560f6e-2360-4775-854f-56e26fc2dc9e>" %}
***Adding a Slicer in the New UI***
{% endembed %}

* Navigate to the ***Design*** canvas.
* Select the dimension and one measure to the ***Dimensions/ Measures*** column using the clicks at the top bar.
* Click the ***GO*** option.
* A ***View*** is displayed based on the selected combination of the Dimension and Measure.

<figure><img src="https://content.gitbook.com/content/qcRKh6n896BG051TWTp3/blobs/cfPHCCqXqzPEwyBVPgPw/image.png" alt=""><figcaption></figcaption></figure>

* Select the ***sliceBy*** option by the next click.

<figure><img src="https://content.gitbook.com/content/qcRKh6n896BG051TWTp3/blobs/UGL0MBSQ8EcJdvCCJjZJ/image.png" alt=""><figcaption></figcaption></figure>

* Select another Dimension by using the next click.

<figure><img src="https://content.gitbook.com/content/qcRKh6n896BG051TWTp3/blobs/YVYdHj8pQJRtHdJvCK0P/image.png" alt=""><figcaption></figcaption></figure>

* Click the ***GO*** option.
* The ***View*** is displayed based on the selected slicer dimension value.

<figure><img src="https://content.gitbook.com/content/qcRKh6n896BG051TWTp3/blobs/PSvSkz67xDM0Q7dkXmiH/image.png" alt=""><figcaption><p><em><strong>View displaying the Slices based on the selected Dimension</strong></em></p></figcaption></figure>

* Open the ***Chart Properties*** window.
* Navigate to the ***General Settings***.
* &#x20;Provide the Order, Order By, and Limit fields.

<figure><img src="https://content.gitbook.com/content/qcRKh6n896BG051TWTp3/blobs/Mr9sq0M7KnBdKKrIaJgz/image.png" alt=""><figcaption></figcaption></figure>

* Select the ***Horizontal*** option for the ***Legend Orientation***.&#x20;

<figure><img src="https://content.gitbook.com/content/qcRKh6n896BG051TWTp3/blobs/mbC9ClKonpfZPYaapWYw/image.png" alt=""><figcaption></figcaption></figure>

* The ***View*** gets modified based on the selected ***slicer*** and ***order*** option.

<figure><img src="https://content.gitbook.com/content/qcRKh6n896BG051TWTp3/blobs/26E5REtn2JeWTWbnuqgA/image.png" alt=""><figcaption><p><em><strong>Modified View based on the selected Sliced By and Order By options with Legend</strong></em></p></figcaption></figure>

## Steps to Add Slicer in the Old UI

The users can add a further dimension to the created view using the ***Slicer*** option.

{% hint style="success" %}
*Check out the illustration on how to use Slicer in the Old UI of the Design Canvas.*
{% endhint %}

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxZF8YGlESz97qqyTOJvz%2Fuploads%2FWs3Lw52YJOBaxsh6W6BW%2FSlicing%20a%20View%20Old%20UI.mp4?alt=media&token=515e66af-cefa-424f-b0a5-d070cc03f536>" %}
***Adding Slicer for a View in the old UI***
{% endembed %}

* Navigate to the ***Design*** canvas.
* Use the ***Switch UI*** icon to access the old UI.
* Drag and drop one dimension and one measure to the ***Dimensions/ Measures*** column using the Design canvas.
  * The ***View*** gets displayed based on the selected dimension and measure. Here, Mixed chart has been selected to plot the selected dragged dimensions and measures as it supports a slicer.&#x20;

<figure><img src="https://content.gitbook.com/content/qcRKh6n896BG051TWTp3/blobs/hlqIjWEGqjn1noLH8Vb8/image.png" alt=""><figcaption></figcaption></figure>

* Drag and drop another dimension to the ***Slicer*** section (E.g., City is used as a slicer over here).
* The slices are displayed in the created View based on the dimension value selected as slicer for the View.

<figure><img src="https://content.gitbook.com/content/qcRKh6n896BG051TWTp3/blobs/sVZzuIfAcLcV3qeWILjI/image.png" alt=""><figcaption></figcaption></figure>

* Open the ***Chart Properties*** window.
* Navigate to the ***General Settings*** option.
* Order the displayed data by sorting it with a specific ***limit*** and ***order***. You can also select a ***Style*** to display the data differently.

<figure><img src="https://content.gitbook.com/content/qcRKh6n896BG051TWTp3/blobs/mfKJkYwkFwGrqhc4Pknz/image.png" alt=""><figcaption></figcaption></figure>

* The ***View*** displays sliced data in the set order and limit.

<figure><img src="https://content.gitbook.com/content/qcRKh6n896BG051TWTp3/blobs/PtQPRuR8FnAlW1mtCIzL/image.png" alt=""><figcaption><p><em><strong>Modified View with Slicer in the cluster Style</strong></em></p></figcaption></figure>

## Customized Slice Color Support

We have introduced the ability to customize slice colors in our Stories. This functionality empowers users to assign specific colors to individual slices, providing greater control over the visual representation of data.

{% hint style="success" %}
*Check out the given illustration to understand the customized slice color functionality in the Story module.*
{% endhint %}

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxZF8YGlESz97qqyTOJvz%2Fuploads%2F3igrwWTW8CK2bF7eHuBH%2FCustomising%20colors%20of%20slicers..mp4?alt=media&token=70b426ce-098f-41b7-ac1c-8fcfbfaa5f69>" %}
***Customizing colors***
{% endembed %}

* Open a ***View*** in the ***Design*** canvas with slicer.     &#x20;
* Click on the ***ellipsis*** icon provided for the slicer Dimension.

<figure><img src="https://content.gitbook.com/content/qcRKh6n896BG051TWTp3/blobs/sdzSI6XB9cXFshiSgR8W/image.png" alt=""><figcaption></figcaption></figure>

* The dimension window opens displaying all the Field Colors.

<figure><img src="https://content.gitbook.com/content/qcRKh6n896BG051TWTp3/blobs/mfwS51nfT9zCFCyabPN4/image.png" alt=""><figcaption><p><em><strong>Opening the Default field colors for the slicer</strong></em></p></figcaption></figure>

* Click on the default color.
* A menu opens to choose a new color for the field.
* Select a new color.

<figure><img src="https://content.gitbook.com/content/qcRKh6n896BG051TWTp3/blobs/DTXO1xxLeyOD9IYR6I2o/image.png" alt=""><figcaption><p><em><strong>Choosing another color for a slicer field</strong></em></p></figcaption></figure>

* The provided color(s) will be applied to a field value.

<figure><img src="https://content.gitbook.com/content/qcRKh6n896BG051TWTp3/blobs/eEzhrceba0usZuiT5YhQ/image.png" alt=""><figcaption><p><em><strong>View displayed with the changed Slicer field color</strong></em> </p></figcaption></figure>

{% hint style="info" %}
*<mark style="color:green;">Please Note:</mark>*

* *The Slicer supports the selection of only one dimension and one measure in the **Dimensions/Measures** space. Another dimension should be added to the **Slicer** spac&#x65;**.***
* Click the ***Chart Properties*** ![](https://content.gitbook.com/content/qcRKh6n896BG051TWTp3/blobs/LKpJtboEybjjTa0y2Sh7/image.png) icon to open the Chart Properties window.
* *The **Manual Sort** order option does not get supported by the **Slicer** functionality.*
  {% endhint %}