# Custom CSS Samples

**Note** : "This page indicates what types of customization is possible. To use a specific customization in your environment, please send a request to the VitaraCharts support team. All customization files are managed in a cloud environment by the support team."

These features are supported in the release 5.3.10 (or newer)

**Important Note :**

For versions **older than 5.3.10**, do NOT include the .vitara namespace. The new .vitara prefix should be used **only from version 5.3.10 onward**

**Example Scenario: Styling Chart Elements**

When styling chart elements, add “**.vitara**” followed by a **space** before the element class

**Before 5.3.10 (older versions):**

```
.vitara-chart-background {
    fill: rgb(117, 245, 66);
    background-color: rgb(117, 245, 66);
}
```

**From 5.3.10 onward:**

```
.vitara .vitara-chart-background {
    fill: rgb(117, 245, 66);
    background-color: rgb(117, 245, 66);
}
```

**Styling Using Chart Classes**

Add “**.vitara**” directly before the chart class name. **Note:** There should be no space between “**.vitara**” and the chart class (e.g., VitaraHCAngularGaugeChart).

**Before 5.3.10 (older versions):**

```
.VitaraHCAngularGaugeChart .vitara-chart-background {
    fill: red;
}
```

**From 5.3.10 onward:**

```
.vitara.VitaraHCAngularGaugeChart .vitara-chart-background {
    fill: red;
}
```

## Chart Area Background

Applied chart area background color to be rgb(117, 245, 66)

<pre><code><strong>.vitara .vitara-chart-background{
</strong>  fill: rgb(117, 245, 66);
  background-color: rgb(117, 245, 66)
}
</code></pre>

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2FWQXaSzWbpnxK9MbWgDLT%2Fimage1.png?alt=media&#x26;token=cc254358-c75a-4a8e-8bef-c597f1ee4ce4" alt=""><figcaption></figcaption></figure>

## Plot Area Background

Applied plot area background color to be #f5ad42

```
.vitara .vitara-plot-background{
    fill: #f5ad42;
    background-color: #f5ad42
}
```

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2Fmmq4VZathbhVDXdGRdxv%2Fimage2.png?alt=media&#x26;token=46d7ffc3-9239-478e-9871-be220ab1467a" alt=""><figcaption></figcaption></figure>

## Axes Labels and Data Labels

Applied the ChartArea background color to be rgb(117, 245, 66)

The PlotArea background color to be #f5ad42

Both Category and Value axes labels font-size to be 15px, color fill to be red , font-family to be Impact and font-style to be italic

For datalabels, the font-size to be 25px, color fill to be green and font-family to be Courier New

```
.vitara .vitara-chart-background{
    fill: rgb(117, 245, 66);
    background-color: rgb(117, 245, 66)

}

.vitara .vitara-plot-background{
    fill: #f5ad42;
    background-color: #f5ad42
}

.vitara .vitara-category-axis, .vitara-value-axis {
    font-size: 15px;
    fill: red;
    font-family: Impact;
    font-style: italic;
}

.vitara .vitara-datalabel{
    font-size: 25px;
    color: green;
    font-family: 'Courier New';
}
```

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2FYFT9hXTGSh49LqrEAi4v%2Fimage.png?alt=media&#x26;token=a1ce3259-f33d-46ce-aa05-8c2125f1ffcc" alt=""><figcaption></figcaption></figure>

## Tooltip

Applied the background color to be aqua , font family to be Comic Sans MS, Comic Sans, cursive and font size to be 35px

```
.vitara .vitara-tooltip{
    font-family: "Comic Sans MS, Comic Sans", cursive;
    font-size: 35px;
    background-color: aqua;
}
```

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2FgA9wRcmEtapaGCjvaiPZ%2Fimage.png?alt=media&#x26;token=4c7853b5-eb54-486d-8b51-36ff24178888" alt=""><figcaption></figcaption></figure>

## Category Axis with title style different from the label style

For labels, the color fill was rgb(197, 66, 245), the font family was Impact, the text decoration was underline, and the font size was 18px. The color fill for the title was #f56c42, the font family was Helvetica, the text decoration was underline, the font size was 25px, and the font style was italic.

```
.vitara .vitara-category-axis{
    fill: rgb(197, 66, 245);
    text-decoration: underline;
    font-family: Impact;
    font-size: 18px
}
.vitara .vitara-category-axis .vitara-axis-title{
fill: #f56c42;
text-decoration: underline;
font-style: italic;
font-family: Helvetica;
font-size: 25px
}
```

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2FanaxuVnWEG4SwhjiXv2p%2Fimage.png?alt=media&#x26;token=d61af332-e7cf-4c9c-bdc5-fcd86194177a" alt=""><figcaption></figcaption></figure>

## Border around bars/columns with border styling

Applied border to the column, stroke-width to be 2, stroke to be red and stroke-dasharray to be 5,5

```
.vitara .vitara-point{
    stroke-width: 2;
    stroke: red !important;
    stroke-dasharray: 5,5;
}
```

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2FYDzpMjnGVebk3lYTYZAk%2Fimage.png?alt=media&#x26;token=bed4d27b-84a4-4a24-8767-86e6b2a53ebb" alt=""><figcaption></figcaption></figure>

## Line Chart with different line style set

Applied stroke-width to be 2 and the stroke-dasharray to be 4,5,2

```
.vitara .vitara-line-display{
    stroke-width: 2;
    stroke-dasharray: 4,5,2;
}
```

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2FTqRR8nL5kF8PhoxSF9Tu%2Fimage.png?alt=media&#x26;token=4bc54566-0879-48d2-8164-b701cd53dbcd" alt=""><figcaption></figcaption></figure>

## Legend Styling

Applied font-size to be 20px, the font-family to be Impact and fill to be red

```
.vitara .vitara-legend-text{
    fill: red;
    font-family: Impact;
    font-size: 20px;
}
```

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2FdShqVX1CzZrO4IVjOE0a%2Fimage.png?alt=media&#x26;token=4fc92d48-4b33-43fc-ba3e-9181973492e3" alt=""><figcaption></figcaption></figure>

## Customising Markers

Applied font-size to be 14px, fill to be teal , stroke to be red , stroke-width to be 2

```
.vitara .vitara-marker{
	fill:teal;
	font-size: 14px;
	stroke:red;
	stroke-width: 2;
}
```

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2FUmXzLhrjrwOjiU2bXe4c%2Fimage.png?alt=media&#x26;token=d4be1f40-52e2-4fc2-b036-a868f2c15526" alt=""><figcaption></figcaption></figure>

## Customising Grid lines

Applied stroke to be black , opacity to be 0.2, stroke-dasharray to be 6,6

```
.vitara .vitara-grid-line{
    stroke: black;
    opacity: 0.2;
    stroke-dasharray: 6,6;
}
```

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2FJ39NuPunDRUaJfhHnk85%2Fimage.png?alt=media&#x26;token=9d7a1ad4-e83a-42ef-8fec-931204594c7e" alt=""><figcaption></figcaption></figure>

## Customising a property specific to one or more charts

Applied fill to be palegreen for Pie chart background color

```
.vitara.VitaraHCPieChart .vitara-chart-background{
	fill: palegreen;
}
```

<figure><img src="https://106821559-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuIDde50GEkigLbPmGgLx%2Fuploads%2FL60VeZsigY4sY38c54l7%2Fimage.png?alt=media&#x26;token=9f263989-0c33-47b0-9da5-e782a8967243" alt=""><figcaption></figcaption></figure>