> For the complete documentation index, see [llms.txt](https://docs.xviz.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.xviz.com/performance-management/card-formatting/data-driven-color.md).

# Data-Driven Color

1\.      **Node color and Border color** for a node can be provided in column containing hex codes as shown below:

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2FxoRD0uCqdxFJkDsG7dhs%2Fimage.png?alt=media&amp;token=b7b32d07-672e-4a06-a220-f3b70963881e" alt=""><figcaption></figcaption></figure>

Insert the column in the “Fields” data field and map it in the Appearance section.

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2F3xk6fEu3oiST2laABxE0%2Fimage.png?alt=media&amp;token=ebac1e99-d82b-4527-89ae-008695643aaa" alt=""><figcaption></figcaption></figure>

The colors will now be applied and will be shown in the Legend. The labels for the colors can be edited in the Legend

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2FMJonbVFMBOdZ08pwROY7%2Fimage.png?alt=media&amp;token=461fc295-c6a0-4e3f-92af-25c4d499969a" alt=""><figcaption></figcaption></figure>

&#x20;This feature is to apply conditional formatting via data driven conditions.

&#x20;

2\.      **Node Icons**

Provide publicly accessible https URLs or Base64 URLs for node icons in a column and label for the icons in another column. The labels will be used in the Legend for the icons.

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2FodElH7VJzyzcj6aziZYc%2Fimage.png?alt=media&amp;token=8d72b57d-00c8-4642-901d-3d7774276fec" alt=""><figcaption></figcaption></figure>
