> For the complete documentation index, see [llms.txt](https://docs.bdb.ai/bdb-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bdb.ai/bdb-documentation/data-visualization/governed-dashboards/configuration/legend-mapping.md).

# Legend Mapping

{% hint style="success" %}
*Check out the walk-through given below on how to map a Legend with a charting component in the Designer.*
{% endhint %}

![](/files/1JlcTYPlJORdXDh1Ss5F)

* Click the ***Component Libra*****ry**  icon from the right edge of the window.
* Select and drag a chart component on the canvas.

![](/files/tVbJZZeF2OGleyR4CCBe)

* Create a data connection.

![](/files/1WX3lKQYohH8feCFwKe9)

* Associate data connection with the chart.    &#x20;

![](/files/ZAf2PHC0SdfX9VbkphZX)

* Select and drag the ***Legend*** component from the ***Other*** tab of the component library.&#x20;

![](/files/geBA7Hqcl5nlMKtgdMAJ)

* Navigate to the ***Legend*** component properties.
* Go to the ***General*** properties.
* Click on the ***Associate Chart*** and select the required chart.  &#x20;

![](/files/GYiYBYPbkQkyYqeJwwCd)

* The ***Associated Chart*** wizard opens.
* Select the dragged chart from the ***Search available components*** section.
* Select the fields that you wish to associate by using the checkmarks given next to the fields from the ***Search available field***&#x73; section.
* Click the ***Save*** option.

&#x20;      ![](/files/hdEzEMAOrCcxAaNe0CAg)

* The ***Legend*** gets mapped to the chart.&#x20;

![](/files/d6gcJI4di2ZZZU9RyeVJ)
