# Lollipop Chart

The Lollipop Chart in the KPI tool offers a visually distinct way to represent data, combining bars and markers to create a compelling visualization. This highly customizable chart enables users to present their data effectively and aesthetically. Below is a detailed guide to its features and settings. 

<figure><img src="https://2952853741-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL502qSSR9Gd1FbZtxvCe%2Fuploads%2FlLYkDPissyNMj9qcVitu%2Fimage.png?alt=media&#x26;token=19c8d69e-ad59-4a0f-a29c-137edb75bb72" alt="" width="408"><figcaption></figcaption></figure>

Here's a quick guide to create Lollipop chart in KPI:

<figure><img src="https://2952853741-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL502qSSR9Gd1FbZtxvCe%2Fuploads%2FaNneQtjTSfxoRqiKieLS%2FAdding%20Lollipop%20chart.gif?alt=media&#x26;token=9662d9a3-c63d-4b37-8550-3093889a22a7" alt=""><figcaption><p>Adding Line chart in KPI by Powerviz</p></figcaption></figure>

## Data Tab&#x20;

This tab allows users to configure the core data fields for the Lollipop Chart.&#x20;

<figure><img src="https://2952853741-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL502qSSR9Gd1FbZtxvCe%2Fuploads%2FlNuD3hMOw783lLY0bDQf%2Fimage.png?alt=media&#x26;token=7501dcab-69b9-4cad-851d-48eded0a7c77" alt="" width="307"><figcaption></figcaption></figure>

* **Value**: Select the numeric field that represents the lollipop bar's height.&#x20;
* **By**: Choose a categorical field that defines the grouping or axis for the chart.&#x20;

Tip: Ensure your fields are properly mapped to create meaningful and accurate visuals.&#x20;

## Lollipop Tab&#x20;

The **Lollipop** tab offers extensive customization for the chart's orientation, design, and markers.

***

#### **Orientation**

<figure><img src="https://2952853741-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL502qSSR9Gd1FbZtxvCe%2Fuploads%2FMuqU1IRGDcRltK6Lt5Co%2Fimage.png?alt=media&#x26;token=e8cc4b18-4224-4d97-9f20-711a8ba073a1" alt="" width="301"><figcaption></figcaption></figure>

* **Vertical**: Displays the chart with vertical lollipop bars (default option).
* **Horizontal**: Displays the chart with horizontal lollipop bars.

***

#### **Line Customization**

<figure><img src="https://2952853741-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL502qSSR9Gd1FbZtxvCe%2Fuploads%2FqFU7STXuClyWxzTh4ZXK%2Fimage.png?alt=media&#x26;token=d655adda-126f-4652-af1e-d97b6b2e1e7b" alt="" width="249"><figcaption></figcaption></figure>

* **Line Width**: Adjust the width of the lollipop stems to suit your chart's design.
* **Color Palette**: Select from various palettes, including:
  * Single
  * Gradient
  * Sequential
  * Diverging
  * Qualitative
* **Color**: Choose a custom or predefined color for the lollipop stems. You can input a specific color code or use the provided palette options with [conditional formatting](https://docs.powerviz.ai/powerviz/kpi/edit-mode-introduction/kpi-charts/conditional-formatting).

***

#### **Marker Customization**

<figure><img src="https://2952853741-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL502qSSR9Gd1FbZtxvCe%2Fuploads%2F2P9Ev6ZTmFVDy6SjiPm8%2Fimage.png?alt=media&#x26;token=79e3f11c-9dd0-4118-b345-c8a6b03c2132" alt="" width="278"><figcaption></figcaption></figure>

* **Marker Type**: Choose from different marker shapes:
  * Circle
  * Square
  * Diamond
  * Triangle
  * Inverted Triangle
* **Marker Pattern**:
  * **Solid**: A filled shape.
  * **Outline**: A bordered shape.
  * **Hatched**: A textured or patterned shape.
* **Marker Size**: Adjust the size of the marker (default value is 4). This controls how large or small the markers appear at the tip of the lollipop bars.
* **Marker Color Same As Line Color**:
  * **Off**: Allows you to choose a different color for markers.
  * **On**: The marker inherits the same color as the lollipop stem.
* **Marker Color**: Choose a custom color for the marker when “Marker Color Same As Line Color” is **Off**.

***

#### **Highlighting**

* **Enable Highlight**: Toggle this option to highlight specific data points dynamically.
* **Display Type**: Choose the type of highlights to display:
  * **Min/Max**: Automatically highlight the minimum and maximum values in the chart.
  * **Custom Rules**: Apply conditional rules to highlight data points based on specific criteria (if supported).
* **Min Color**: Set a specific color (e.g., Red) for the minimum value marker.
* **Max Color**: Set a specific color (e.g., Green) for the maximum value marker.
* **Show Value for Highlights**: Toggle this option **On** to display the numeric value for the highlighted markers.

## Format Tab&#x20;

<figure><img src="https://2952853741-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL502qSSR9Gd1FbZtxvCe%2Fuploads%2Fj8BU1SkD8FSKTm2mBi2s%2Fimage.png?alt=media&#x26;token=cf9b6ff0-1122-48e3-b9a1-ba77fb2fa6ed" alt="" width="254"><figcaption></figcaption></figure>

Click [here ](https://docs.powerviz.ai/powerviz/kpi/edit-mode-introduction/kpi-charts/format-tab)to explore the Format tab in detail. Explore customization options to modify ranking settings, adjust axis properties, configure gridlines, and fine-tune number formatting to meet your needs. Dive into each section to unlock advanced styling and formatting possibilities.

![Shape](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAANSURBVBhXY2BgYGAAAAAFAAGKM+MAAAAAAElFTkSuQmCC)&#x20;

## **Deviation Tab**

The **Deviation Display** feature allows users to visualize the difference between selected points in the chart.&#x20;

<figure><img src="https://2952853741-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL502qSSR9Gd1FbZtxvCe%2Fuploads%2FNjmnKnDX4sDniLLoJ4sE%2Fimage.png?alt=media&#x26;token=9eb7957f-5be9-471e-8912-89981c8a9099" alt="" width="563"><figcaption><p>Deviation in Lollipop chart</p></figcaption></figure>

Follow these steps to configure deviation in Lollipop chart:

<figure><img src="https://2952853741-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL502qSSR9Gd1FbZtxvCe%2Fuploads%2FPlFjLG7Wr2oxXejyYc6r%2Fimage.png?alt=media&#x26;token=b3a3c637-1277-4cca-8bfe-bf003a21e955" alt="" width="284"><figcaption></figcaption></figure>

1. **Select Deviation Display Mode**:
   * **Last To First**: Displays deviation between the last and the first data points in your dataset.
   * **Max To Min**: Displays deviation between the maximum and minimum values in your dataset.
   * **Last To Previous**: Displays deviation between the last data point and the one immediately before it.
   * **Custom**:
     * Select this option to manually configure the start and end positions for the deviation.
     * Use the dropdowns to choose the **Start Position** and **End Position** for custom deviation.
2. **Enable/Disable Deviation Labels**:
   * Toggle the **Label** option to enable or disable labels for the deviation lines.

***

#### **Label Display**

<figure><img src="https://2952853741-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL502qSSR9Gd1FbZtxvCe%2Fuploads%2FzN4omRjxV2ObvDChwHF7%2Fimage.png?alt=media&#x26;token=4aec6f70-067a-40d3-a3ed-f65e3ee70862" alt="" width="295"><figcaption></figcaption></figure>

Once labels are enabled, users can define the display style for the deviation labels.

1. **Choose Label Display Type**:
   * **Value**: Shows the absolute difference between the selected points.
   * **Percentage**: Shows the deviation as a percentage of the selected points.
   * **Both**: Displays both the value and percentage.
2. **Customize Label Appearance**:
   * **Size**: Adjust the font size of the label for clear visibility.
   * **Color**: Use the color picker to set a custom label color.

***

#### **Deviation Line**

<figure><img src="https://2952853741-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL502qSSR9Gd1FbZtxvCe%2Fuploads%2FtaJbVLk7ncS1smFYFOgi%2Fimage.png?alt=media&#x26;token=3ec75907-1fe4-4de6-9356-ddad03c3c4e7" alt="" width="297"><figcaption></figcaption></figure>

The **Deviation Line** feature configures the visual appearance of the line that connects the selected data points.

1. **Width**:
   * Adjust the thickness of the deviation line to make it more prominent or subtle.
2. **Set Colors**:
   * **Positive Color**: Select the color for positive deviations (e.g., when the second value is larger than the first).
   * **Negative Color**: Select the color for negative deviations (e.g., when the second value is smaller than the first).

***

#### **Connector Line**

<figure><img src="https://2952853741-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL502qSSR9Gd1FbZtxvCe%2Fuploads%2FfkcfgbHUv84luRlIVmQM%2Fimage.png?alt=media&#x26;token=1902b3ef-d5e2-4bb2-8b00-9f0d10f1591b" alt="" width="296"><figcaption></figcaption></figure>

The **Connector Line** visually connects the data points along with the deviation line.

1. **Choose Connector Line Style**:
   * **Solid**: A continuous line.
   * **Dashed**: A line made of short dashes.
   * **Dotted**: A line made of dots.
2. **Configure Line Appearance**:
   * **Thickness**: Set the thickness of the connector line for better visibility.
   * **Color**: Choose a custom color for the connector line using the color picker.

## **Actions Tab**

<figure><img src="https://2952853741-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL502qSSR9Gd1FbZtxvCe%2Fuploads%2FhjFpahI8GT8Urq9JG3kX%2Fimage.png?alt=media&#x26;token=4c23442a-075f-4578-924c-494a8c5ae2a8" alt="" width="333"><figcaption></figcaption></figure>

1. **None**:
   * Select this option if no cross-filtering or interaction is needed for the chart.
   * This makes the chart a static visual, independent of other visuals in the report.
2. **Cross Filtering**:
   * Enable this option to allow the Lollipop Chart to respond to interactions from other charts or visuals in the report.
   * For example, if a user selects a category or data point in another chart, the Lollipop Chart will filter its data accordingly to reflect the selected category.

***

## General tab

<figure><img src="https://2952853741-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL502qSSR9Gd1FbZtxvCe%2Fuploads%2Fs4SexWU5cQUzNp35xif8%2Fimage.png?alt=media&#x26;token=4ff0d2ca-0861-4c0f-bac1-3da473dab152" alt="" width="335"><figcaption></figcaption></figure>

This is common tab for all visuals click [here ](https://docs.powerviz.ai/powerviz/kpi/edit-mode-introduction/kpi-charts/general-tab)to explore settings. You can adjust visual properties, manage formatting options, and fine-tune various features to align with your requirements. Make sure to explore each section for a complete configuration.