> ## Documentation Index
> Fetch the complete documentation index at: https://docs.omni.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Pie or donut with custom legend

> The code for this example can be used in the Markdown visualization to create a pie or donut chart with a customized legend.

<img src="https://mintcdn.com/omni-e7402367/NPCbSR0hOlCzzT5f/images/docs/visualization-and-dashboards/visualization-types/markdown/examples/assets/images/pie-with-custom-legend-0889e25443db77c08595a15ba20a0faf.png?fit=max&auto=format&n=NPCbSR0hOlCzzT5f&q=85&s=eaa34eb275a84b004848185e1a9a4164" alt="" width="1300" height="452" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/examples/assets/images/pie-with-custom-legend-0889e25443db77c08595a15ba20a0faf.png" />

## Setup

Use this sample dataset and code to recreate this example in your own instance.

1. [Download the sample CSV](https://github.com/exploreomni/doc-sample-data/blob/main/visualizations/pie.csv).
2. Upload the sample CSV to your instance. Refer to the [Data input tables guide](/analyze-explore/data-input-csvs#adding-a-data-input-table-to-a-workbook) for instructions.
3. In a new query tab, select all the dimensions. Every field except `Pie Count` should be selected when you're finished.
4. On the **Results** tab, open the **Options** panel and enable [column totals](/analyze-explore/point-click-queries#column-totals).
5. In the `Session Count` totals cell, click the **...** menu and select **Total Calculation > Sum**.
6. Format the `Percent Of Total` column to **percentage** and adjust the decimal places to your liking.

Your query should look like this:

<img src="https://mintcdn.com/omni-e7402367/NPCbSR0hOlCzzT5f/images/docs/visualization-and-dashboards/visualization-types/markdown/examples/assets/images/pie-csv-query-865182a4ab050f9c8edd6d392fe3b679.png?fit=max&auto=format&n=NPCbSR0hOlCzzT5f&q=85&s=7829feb34ce581b5ec4592ae702d54dd" alt="" width="2532" height="726" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/examples/assets/images/pie-csv-query-865182a4ab050f9c8edd6d392fe3b679.png" />

**Note:** To recreate this with your own data set, you'll need to create calculations for `Percent of Total`, `Slice Size`, and `Start Rotation`. These formulas reference the columns as they are in the above screenshot:

* `Percent of Total` - `=B1 / SUM(B:B)`
* `Slice Size` - `=B1 / SUM(B:B) * 360 // or Percent of Total * 360`
* `Start Rotation` - `=SUM(D$1:D1)` // The sum of all the previous values of `Slice Size` - if you are copying this formula, enter it on the second row to get it to apply correctly

Click **Chart** and select the **Markdown** chart type. Copy and paste the sample code below into the Markdown editor.

## Example code

```html expandable theme={null}
<style>
  .pie-card {
    /* ----- variables to customize ----- */
    --chart-size: 200px; /* diameter of the pie */
    --hole-color: var(--color-background); /* color of the donut hole, if used */
    --hole-width-ratio: .5; /* 0 to 1 for size of donut hole: 0=pie, 0.9 is a very skinny donut */ 

    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: var(--chart-size) 1fr;
    gap: var(--size8);
  }
  .pie {
    --hole-size: calc(var(--chart-size) * var(--hole-width-ratio));
    width: var(--chart-size);
    height: var(--chart-size);
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;

    & .center {
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    & .fill {
      width: var(--chart-size);
      height: var(--chart-size); 
    }
    & .mask {
      background-color: var(--hole-color);
      width: var(--hole-size);
      height: var(--hole-size);
    }
    & .title {
      font-size: var(--font-lg);
    }
  }
  .pie-legend {
    display: flex;
    flex-direction: column;
    gap: var(--size6);

    & ul, & li {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    & ul {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: var(--size4);
    }
    & h2, & h3 {
      margin: 0;
      padding: 0;
      display: flex;
      gap: 0;
      flex-direction: column;
      font-weight: normal;
    }
    & h2 {
      font-size: var(--font-lg);
      & .pie-label {
        font-size: var(--font-sm);
        line-height: var(--line-height-sm);
        color: var(--color-text2);
      }
    }
    & h3 {
      font-size: var(--font-md);
      border-left-width: 4px;
      border-left-style: solid;
      padding-left: var(--size3);
      
      & .pie-label {
        font-size: var(--font-xs);
        line-height: var(--line-height-xs);
        color: var(--color-text2);

        & .pie-percent {
          opacity: 0.5;
        }
      }
    }
  }
</style>
<article class="pie-card">
  <ul class="pie">
    {{#result}}
    <li class="center fill" style="background-image: conic-gradient(from {{pie.start_rotation.value_static}}deg, {{pie.slice_color.value_static}} {{pie.slice_size.value_static}}deg, transparent 0)"></li>
    {{/result}}
    <li class="center mask"></li>
  </ul>
  <div class="pie-legend">
    <h2><span class="pie-value">{{result._totals._first.pie.session_count.value}}</span><span class="pie-label">Total sessions</span></h2>
    <ul>
      {{#result}}
      <li><h3 style="border-left-color: {{pie.slice_color.value_static}}"><span class="pie-value">{{pie.session_count.value}}</span><span class="pie-label">{{pie.browser.value}}&nbsp;<span class="pie-percent">• {{pie.percent_of_total.value}}</span></span></h3></li>
      {{/result}}
    </ul>
  </div>
</article>
```
