# Custom CSS

**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**

**After making any changes, you must clear your browser’s cache to ensure the updates are reflected in Vitara Charts.**

## Custom CSS in Vitara Charts <a href="#custom-css-in-vitara-charts" id="custom-css-in-vitara-charts"></a>

If you use custom CSS styles in Vitara Charts, no presentational characteristics (such as fill, stroke, font styles, and so on) are applied to the chart SVG. Instead, CSS is used to apply the design.

To customize your styles, edit the customStyles.css file and add your own CSS rules.

The customStyles.css file is located at,

**\plugins\VitaraCharts\custom**

The following is an overview of the CSS rules which are internally set on the VitaraCharts.

## CSS Rules <a href="#css-rules" id="css-rules"></a>

```
.vitara .vitara-chart-background
```

The chart area background. Use this to set the chart area background fills.

```
.vitara .vitara-plot-background
```

The plot area background. Use this to set the plot area background fills.

```
.vitara .vitara-category-axis
```

Class for the category axis. Use this to set the category axis labels text style.

```
.vitara .vitara-value-axis
```

Class for the value axis. Use this to set the value axis labels' text style.

```
.vitara .vitara-axis-title
```

The title of the axis. Set the axis title text style with this. To set the title of a given axis, use this class in conjunction with the category or value axis. Text characteristics such as font-family, font-style, color, text-decoration, text-transform, and letter-spacing can be changed.

```
.vitara .vitara-axis-line
```

The axis line is a straight line. Set the width and color of the axis line with this. To set the axis line attributes of a certain axis, use this class in conjunction with the category or value axis.

```
.vitara .vitara-line-display
```

The line series. Use this to set the default line style in any line series. Use this class in conjunction with the chart's class name to specifically set the line properties of that particular chart. Line properties like stroke-dasharray, stroke and stroke-width can be set.

```
.vitara .vitara-grid-line
```

The grid line. Use this to set the grid line properties. Line properties like stroke-dasharray, stroke and stroke-width can be set.

```
.vitara .vitara-legend-text
```

The legend item text. Use this to set the legend item text style. Can change text properties like font-family, font-style, color, text-decoration, text-transform, letter-spacing.

```
.vitara .vitara-marker
```

Can change the fills and strokes and sizes of markers on VitaraCharts selected from the Marker tab in the property editor.

```
.vitara .vitara-datalabel
```

The datalabel. Use this to change the text style of datalabels. Can change text properties like font-family, font-style, color, text-decoration, text-transform, letter-spacing.

```
.vitara .vitara-point
```

* The default class for any data element on the chart.
* For example, in bar chart a bar is a data element and in a bubble chart a bubble is a data element.
* Use this to change the text style of datalabels. Can change text properties like font-family, font-style, color, text-decoration, text-transform, letter-spacing.

### ### CSS Class Names of charts

<table><thead><tr><th width="374">Chart Name</th><th>Class Name </th></tr></thead><tbody><tr><td>Vitara Bar Chart</td><td>.vitara.VitaraHCBarChart</td></tr><tr><td>Vitara Stacked Bar Chart</td><td>.vitara.VitaraHCStackedBarChart</td></tr><tr><td>Vitara Column Chart</td><td>.vitara.VitaraHCColumnChart</td></tr><tr><td>Vitara Stacked Column Chart</td><td>.vitara.VitaraHCStackedColumnChart</td></tr><tr><td>Vitara Pie Chart</td><td>.vitara.VitaraHCPieChart</td></tr><tr><td>Vitara KPI Ring Chart</td><td>.vitara.VitaraHCKPIRingChart</td></tr><tr><td>Vitara Line Chart</td><td>.vitara.VitaraHCLineChart</td></tr><tr><td>Vitara Area Chart</td><td>.vitara.VitaraHCAreaChart</td></tr><tr><td>Vitara Bubble Chart </td><td>.vitara.VitaraHCBubbleChart</td></tr><tr><td>Vitara Tornado Chart</td><td>.vitara.VitaraHCTornadoChart </td></tr><tr><td>Vitara Sparkline Chart</td><td>.vitara.VitaraHCSparklineChart </td></tr><tr><td>Vitara Heatmap Chart</td><td>.vitara.VitaraHCHeatmapChart</td></tr><tr><td>Vitara Funnel Chart </td><td>.vitara.VitaraHCFunnelChart</td></tr><tr><td>Vitara Column Range Chart </td><td>.vitara.VitaraHCColumnRangeChart</td></tr><tr><td>Vitara Bullet Chart</td><td>.vitara.VitaraHCBulletChart</td></tr><tr><td>Vitara Waterfall Chart</td><td>.vitara.VitaraHCWaterfallChart </td></tr><tr><td>Vitara KPI Animation Chart</td><td>.vitara.VitaraD3KPIAnimationChart</td></tr><tr><td>Vitara Calendar Heatmap</td><td>.vitara.VitaraD3CalHeatMapChart</td></tr><tr><td>Vitara Simple KPI Chart</td><td>.vitara.VitaraSimpleKPIChart</td></tr><tr><td>Vitara Waffle Chart</td><td>.vitara.VitaraD3WaffleChart</td></tr><tr><td>Vitara Dumbbell Chart</td><td>.vitara.VitaraHCDumbbellChart</td></tr><tr><td>Vitara Slope Chart</td><td>.vitara.VitaraHCSlopeChart </td></tr><tr><td>Vitara Circle Packing Chart </td><td>.vitara.VitaraD3CirclePackingChart</td></tr><tr><td>Vitara Angular Gauge Chart</td><td>.vitara.VitaraHCAngularGaugeChart</td></tr><tr><td>Vitara Sankey Chart</td><td>.vitara.VitaraHCSankeyChart</td></tr></tbody></table>

[ View sample implementations](https://tsdocs.vitaracharts.com/customization-guide/custom-css-samples)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tsdocs.vitaracharts.com/customization-guide/custom-css.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.