> 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/charts-gallery/other-charts/graphics.md).

# Graphics

The Graphics component is used to show different icons/shapes.

#### Default Chart Image:

![](/files/6uZJUKn05iltcUSOi9Dk)

### **Properties of the Graphics Component:**

#### Background: 

The user can enable the shadow, change the shadow color, and transparency of the shadow.

#### General:

* The user can change the height, width, top, and left values.
* Put a checkmark in given box to select **Initial Visibility** option. 
* If this option is enabled, then the chart appears in the first preview of the dashboard. 
* The user can select the Category and the corresponding symbol, to give a symbol to the graphics icon. 

      ![](/files/QjRjkWMOBJi1AmR0AKq4)

* If the user has kept the **Category** as **None**, then we need to specify the icon inside the ***SVG Path String***. Also, we can choose the Cursor Style.
  * By clicking the SVG Path String icon, the SVG Path String window opens. 

    * The user can provide an icon name from the library to use it. 
    * The Glymph icons from bootstrap can be also used.

          ![](/files/0wq8JTMlrBbuefHjdcxp)

{% hint style="info" %} <mark style="color:green;">Please Note:</mark> The chart will not be visible at the first preview if the initial visibility is unchecked
{% endhint %}

#### Modified Graphics after changing its Properties:

![](/files/ZBBxv01CI3iHBejRjoaQ)