# Milestone Formatting

The xViz Gantt Chart allows you to customize the milestones in the Gantt timeline, making it easier to visually identify and understand specific milestones.

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2Fh3fN99qJyO6WCBPzxWbe%2Fimage.png?alt=media&#x26;token=03ce02c8-56e3-4fbc-b9cb-a7879ed3ec18" alt=""><figcaption><p>Image 1: Milestone configuration in xViz Gantt Chart</p></figcaption></figure>

In the xViz Gantt Chart, the Milestones feature provides the following formatting options for customizing milestones:

* Milestone Shape
* Milestone Image

### Option 1: Steps to Configure Shape and color of Milestones:

1. Go to the Advanced Editor

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2FRGkTuqiBlOyIRELDGRr4%2Fimage.png?alt=media&#x26;token=71bdb1d3-ae31-400c-b135-8ef0e5f5510a" alt="" width="73"><figcaption><p>Image 2: Advance Editor icon</p></figcaption></figure>

2. In Advance Editor, navigate to the Milestones Tab.

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2FNX4HZ5uO7WnZEzVxD7hL%2Fimage.png?alt=media&#x26;token=173de4c8-2650-4279-91dd-1e0b476f03ee" alt="" width="349"><figcaption><p>Image 3: Milestones Tab in Advance Editor</p></figcaption></figure>

3. Configure the shape and color of the milestones based on Milestone columns or the Milestone names, as shown below:

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2F6guyMX2qjGaaB89Yvyw7%2Fimage.png?alt=media&#x26;token=b02587f5-a302-47e8-9a71-0eb66c70149f" alt="" width="265"><figcaption><p>Image 4: Milestone Configuration in Advance Editor</p></figcaption></figure>

The final result, visual showcasing various milestone shapes, is displayed in the image below:

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2FA44yoNfUBe50mFtz5XRe%2Fimage.png?alt=media&#x26;token=1ba32942-4e6e-4350-8653-8d46d1bcc7a6" alt=""><figcaption><p>Image 5: Milestone Shape and color configuration in xViz Gantt Chart</p></figcaption></figure>

### Option 2: Steps to Configure Custom Images of Milestones:

1. Go to the Advanced Editor

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2FRGkTuqiBlOyIRELDGRr4%2Fimage.png?alt=media&#x26;token=71bdb1d3-ae31-400c-b135-8ef0e5f5510a" alt="" width="73"><figcaption><p>Image 6: Advance Editor icon</p></figcaption></figure>

2. In Advance Editor, navigate to the Milestones Tab

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2FNX4HZ5uO7WnZEzVxD7hL%2Fimage.png?alt=media&#x26;token=173de4c8-2650-4279-91dd-1e0b476f03ee" alt="" width="349"><figcaption><p>Image 6: Milestones Tab in Advance Editor</p></figcaption></figure>

3. Next, click on "custom image for milestone" and upload the milestone images from your device.

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2F3lQjDMZuSXPvMNG51m1G%2Fimage.png?alt=media&#x26;token=96ebf227-b7f4-4162-a1c0-66493e0ffa75" alt="" width="360"><figcaption><p>Image 7: Upload Custom Images for Milestone</p></figcaption></figure>

{% hint style="success" %}
Milestone images support JPG, PNG and SVG formats.
{% endhint %}

The final result, the visual shows the Custom Images for Milestones, is displayed in the image below:

<figure><img src="https://382510089-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIuuIZWiXEx25eV75hmmJ%2Fuploads%2Fh3fN99qJyO6WCBPzxWbe%2Fimage.png?alt=media&#x26;token=03ce02c8-56e3-4fbc-b9cb-a7879ed3ec18" alt=""><figcaption><p>Image 8: Milestone Image configuration in xViz Gantt Chart</p></figcaption></figure>
