# Labels, Colours, and Shapes

<mark style="color:purple;">**`TIP`**</mark>: While colours and shapes can be defined in the imported metadata table file, the `__colour` and `__shape` columns are not displayed in the metadata table panel, since they are configuration columns and not metadata columns. To view the information in those columns, you can download the CSV file from the project.&#x20;

## Labels

![](https://92463871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCM3b1nzgmsPUEa2xap%2Fuploads%2FdvtRhjxLLTUOfPKjkcpF%2Fimage.png?alt=media\&token=4d87a171-470b-47da-986d-9ceb53d884d9)

**Labels** affect which field is displayed on tree tips and network nodes

## Colours

The **colour column** is the field used to colour map markers, tree nodes, chart features and timeline blocks

* Any column can be used to colour the panels.&#x20;

The **colour palette** used can be changed by toggling and clicking on the colour palette box.&#x20;

* If a colour has been specified in the metadata sheet with a name `<FIELD NAME>_colour` corresponding to the colour column, these will be used as categorical values. (e.g. if you want to define the colours for the '`country`' column, add a column to your data called '`country__colour`' (or '`country__color`') before importing to Microreact)
* Auto-colour will be used as a default when no `__colour` column is defined
  * By default, if a `__colour` field has **not** been specified for a column in the metadata sheet, a categorical colour palette with 24 qualitative colours will be used.
* Even if the colour palette is set via a `__colour` column, you can override those colours by manually setting them in the colour palette box.
* A selection of pre-defined **palettes** are available and these colours can be edited by the user from within Microreact.
* **Numeric columns** can be coloured continuously using a gradient-continuous palette

<figure><img src="https://92463871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCM3b1nzgmsPUEa2xap%2Fuploads%2FasRLZi316O17OLQOEPtq%2F2024-05-23_13-02-22.gif?alt=media&#x26;token=6d05ac04-0d0d-44d7-89e4-f8c9394122ab" alt=""><figcaption></figcaption></figure>

* Colour palettes can be **re-used** for other columns which contain the same values.

<figure><img src="https://92463871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCM3b1nzgmsPUEa2xap%2Fuploads%2FjJofaJyoeNnJVlwPcnJ9%2F2024-05-23_10-48-33.gif?alt=media&#x26;token=646c2b15-0e1e-40f9-895d-5f122ffeb59e" alt=""><figcaption></figcaption></figure>

* Colours can be defined for any and all columns, regardless of whether they are used as the main colour column for the panels. **Charts and tree Metadata Blocks** colour by columns other than the main Colour Column.

<img src="https://92463871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCM3b1nzgmsPUEa2xap%2Fuploads%2Fgit-blob-bd612d83bb00818d03ebb00861c565679cc235a2%2Fimage%20(6).png?alt=media" alt="" data-size="original">

These can customised using the custom palette toggle button and clicking on each colour in turn.

![](https://92463871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCM3b1nzgmsPUEa2xap%2Fuploads%2FrQewdNusHYBFF5Yz3ZLv%2Fimage.png?alt=media\&token=29e5f30d-6a29-4976-9b9a-494421c271ba)

If a column has shared values with other columns that already has a colour these can be re-used using the re-use feature.

<img src="https://92463871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCM3b1nzgmsPUEa2xap%2Fuploads%2Fgit-blob-8739fef48c38e5d00cfea749db78dc54409b2ffd%2Fimage.png?alt=media" alt="" data-size="original">

For a column that has numerical values only there is the option to select a gradient palette that can either be continuous or from 3-24 steps. The palette for the individual steps or the continuous start and stop boundaries can be customised.

![](https://92463871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCM3b1nzgmsPUEa2xap%2Fuploads%2FhEsQpH9VFOnBHL19emiN%2Fimage.png?alt=media\&token=2c16fa07-3643-40bc-82ef-4d5cb8eac4f7)

<mark style="color:purple;">**`TIP:`**</mark>When a column is used in many of your team's Microreact projects, you can define the colours in a reference spreadsheet . The image below shows  and It's possible to standardise colours for a frequently-used column across all your team's Microreact projects, create a spreadsheet containing the colour codes. One column should contain the data values to colour, with another column (named with \_\_colour) containing the hex codes for the colour values (or colour names). Pull those values into your metadata table using [Data-flo](https://data-flo.io) using the [extend-datatable](https://docs.microreact.org/instructions/broken-reference) adaptor.&#x20;

![](https://92463871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCM3b1nzgmsPUEa2xap%2Fuploads%2F4MUZvFizmMKNcaXFDiq4%2Fimage.png?alt=media\&token=cd350911-ec21-4f79-827b-b231625efb57)

<mark style="color:purple;">**`TIP`**</mark>: Use the palettes available at [colorbrewer2.org](https://colorbrewer2.org/#type=qualitative\&scheme=Accent\&n=7)&#x20;

## Shapes

Tree nodes and single-row marks on maps can be configured with shapes in addition to colour. The only way to set shapes is within the data, by creating a `__shape` column. If there is no "Shape Column" shown in the Labels, Colours, and Shapes menu, then no columns have a corresponding `__shape` column. All columns with a corresponding `__shape` column will be available for selection in the Shape Column dropdown.

![](https://92463871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCM3b1nzgmsPUEa2xap%2Fuploads%2FRxnXx9QuFUrtNLe8oWko%2Fimage.png?alt=media\&token=49692a44-0897-4850-bebd-9f5066dc51de)

<mark style="color:purple;">**`TIP`**</mark>: To easily associate shapes with the data in `__shape` columns, map the shapes for each data value by using Data-flo's [Extend-datatable](https://docs.microreact.org/instructions/broken-reference) adaptor.

The available shapes are listed here in Phylocanvas: <https://www.phylocanvas.gl/docs/constants.html#shapes>

Example of a tree displaying shapes and the corresponding metadata table containing the `__shape` field:

![](https://92463871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCM3b1nzgmsPUEa2xap%2Fuploads%2FnY31a53MQ65u3V4e3qyl%2Fimage.png?alt=media\&token=9f57e2a0-db4b-4404-a958-f8d4af9188d3)

<figure><img src="https://92463871-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCM3b1nzgmsPUEa2xap%2Fuploads%2FW2iE2grtTSE03Y9nQn3X%2Fimage.png?alt=media&#x26;token=a6fde7c0-3cae-4e1b-ba55-d20b0f646e79" alt=""><figcaption><p>Example of data containing shape field</p></figcaption></figure>
