# How do I build a leaderboard like the interactive example?

## Answer

The quickest way is **Editor > Import Example > Interactive Leaderboard**, then change it. To build the same design yourself, or to understand the example, it is made of four parts. Every option below is on the [line editor](../../main-features/pages-and-lines/edit-line.md): the row options are under **Appearance > Button and Row**, see [Line Appearance](../../main-features/pages-and-lines/line-style.md).

### The hologram

In the hologram's **Appearance**, set **Billboard** to Fixed and give it a **Panel Width**, such as 220 with a padding of 6. Lines can only be pinned to the left or right of the panel when it has a width. Set what is ranked in the hologram's [Leaderboard](../../features/leaderboards.md) settings.

### A rank row

Each rank is two text lines on one row: the player on the left and their value on the right.

| Line | Option | Value |
| ---- | ------ | ----- |
| Player (first line of the row) | Leaderboard Rank | 1 for the first row, 2 for the next, and so on |
| | Row Format | `{rank}. {head} {name} {me}{fill}` |
| | Box Width | 188 |
| | Side of the Panel | Left |
| | Background | a dark color such as `#D0141418` |
| | Own Row Background | an accent color such as `#A0C0307A` |
| | Rotation and Offset | X offset 0.4, so the row starts inside the panel |
| Value (next line) | Same Row | on |
| | Leaderboard Rank | the same number as the player line |
| | Row Format | `{value}` |
| | Side of the Panel | Right |
| | Background | transparent |
| | Rotation and Offset | X offset -0.4 |

Leave the text of both lines empty: a rank line shows its Row Format. `{fill}` pads the player line to its Box Width, so every row has the same width and the values line up.

### Page arrows

Put the arrows on the row of a rank line in the middle of the list, such as rank 4.

| Line | Options |
| ---- | ------- |
| ◀ (before the rank 4 player line) | Text `◀`, Scale 2.2, Side of the Panel Left, X offset -0.12, a Hover Background, and the click action `[LEADERBOARD] previous-page` |
| ▶ (after the rank 4 value line) | Text `▶`, Same Row on, Scale 2.2, Side of the Panel Right, X offset 0.12, a Hover Background, and the click action `[LEADERBOARD] next-page` |

The rank 4 player line then needs Same Row on, so it joins the ◀ arrow's row.

### Buttons under the list

Each button is a text line with Same Row on (except the first), a Hover Background and one click action. The three text buttons have a Box Width of 56:

| Button text | Click action |
| ----------- | ------------ |
| `{fill}%leaderboard_stat%{fill}` | `[LEADERBOARD] next-stat` |
| `{fill}%leaderboard_period%{fill}` | `[LEADERBOARD] next-period` |
| `{fill}To Me{fill}` | `[LEADERBOARD] me` |
| `⟲` | `[LEADERBOARD] reset` |

`{fill}` on both sides centres the label in its box. The stat button only changes something when the leaderboard has more than one stat.

Source: https://www.phoenixplugins.com/docs/phoenix-holograms/plugin-information/questions-and-answers/how-do-i-build-a-leaderboard-like-the-interactive-example