# Labels

The Kendo UI for Vue Chart enables you to set the appearance and customize the content of the series and axis labels.

## Setting the Appearance

You can control the appearance of the labels through the following properties:

* `background`
* `border`
* `color`
* `font`
* `margin`
* `padding`

The following example demonstrates how to customize the appearance of the axis label by using the [`ChartValueAxisLabels`](https://www.telerik.com/kendo-vue-ui/components/charts/api/chartvalueaxislabelsprops) component.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/charts/elements/labels/style-axis/source.txt)

The following example demonstrates how to customize the appearance of the series label by using the [`ChartSeriesLabels`](https://www.telerik.com/kendo-vue-ui/components/charts/api/chartserieslabelsprops) component.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/charts/elements/labels/style-series/source.txt)

## Customizing the Content

Normally, the series and axis Chart labels display an unformatted numeric value or a category name.

You can override the Chart label content by:

* [Using format strings](https://www.telerik.com/kendo-vue-ui/components/charts/elements/labels#using-format-strings)
* [Setting content callbacks](https://www.telerik.com/kendo-vue-ui/components/charts/elements/labels#setting-content-callbacks)
* [Rendering custom visuals](https://www.telerik.com/kendo-vue-ui/components/charts/elements/labels#rendering-custom-visuals)

### Using Format Strings

The Chart enables you to assign a format string for the label. For the full list of available formats, refer to the [kendo-intl library](https://github.com/telerik/kendo-intl/blob/master/docs/num-formatting/index.md#types-of-number-formats).

#### Formatting Labels as Currency Values

The following example demonstrates how to format the value axis labels as a currency value.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/charts/elements/labels/style-currency-axis/source.txt)

The following example demonstrates how to format the series labels as a currency value.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/charts/elements/labels/style-currency-series/source.txt)

#### Formatting Placeholders

Format strings for series labels can contain multiple value placeholders—for example, an X and Y value for the Scatter series. The following table lists the available placeholders.

| Series Type                                       | Placeholders                                                                                                                               |
| :------------------------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------- |
| Area, Bar, Column, Funnel, Pyramid, Line, and Pie | {0}—value                                                                                                                                  |
| Box Plot                                          | <ul><li>{0}—lower</li> <li>{1}—q1</li> <li>{2}—median</li> <li>{3}—q3</li> <li>{4}—upper</li> <li>{5}—mean</li> <li>{6}—category</li></ul> |
| Bubble                                            | <ul><li>{0}—X value</li> <li>{1}—Y value</li> <li>{2}—size value</li> <li>{3}—category name</li></ul>                                      |
| Bullet                                            | <ul><li>{0}—current</li> <li>{1}—target</li></ul>                                                                                          |
| RangeBar and RangeArea                            | <ul><li>{0}—from</li> <li>{1}—to</li></ul>                                                                                                 |
| Scatter and ScatterLine                           | <ul><li>{0}—X value</li> <li>{1}—Y value</li></ul>                                                                                         |
| Candlestick and OHLC                              | <ul><li>{0}—open value</li> <li>{1}—high value</li> <li>{2}—low value</li> <li>{3}—close value</li> <li>{4}—category name</li></ul>        |

The following example demonstrates how to use value placeholders for the Scatter series labels.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/charts/elements/labels/style-scatter-series/source.txt)

### Setting Content Callbacks

If provided, a `content` function is called to compute the text of each label. The function receives different parameters depending on the context. For more information, refer to the documentation on [`ChartCategoryAxisLabelsProps`](https://www.telerik.com/kendo-vue-ui/components/charts/api/chartcategoryaxislabelsprops#content), [`ChartValueAxisLabelsProps`](https://www.telerik.com/kendo-vue-ui/components/charts/api/chartvalueaxislabelsprops#content), and [`ChartSeriesLabelsProps`](https://www.telerik.com/kendo-vue-ui/components/charts/api/chartserieslabelsprops#content).

The following example demonstrates how to override the content of the axis labels.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/charts/elements/labels/override-axis-labels/source.txt)

The following example demonstrates how to override the content of the series labels.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/charts/elements/labels/override-series-labels/source.txt)

### Rendering Custom Visuals

You can customize the rendering of labels by using a `visual` function. The function receives a single parameter of type [`AxisLabelVisualArgs`](https://www.telerik.com/kendo-vue-ui/components/charts/api/axislabelvisualargs) or [`SeriesLabelsVisualArgs`](https://www.telerik.com/kendo-vue-ui/components/charts/api/serieslabelsvisualargs), and returns a group of [Drawing primitives](https://www.telerik.com/kendo-vue-ui/components/drawing/basic-shapes) to represent the label.

The following example demonstrates how to override the rendering of the axis labels.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/charts/elements/labels/visual-axis/source.txt)

The following example demonstrates how to override the rendering of the series labels.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/charts/elements/labels/visual-series/source.txt)

## Suggested Links

* [Axes](https://www.telerik.com/kendo-vue-ui/components/charts/elements/axes)
* [Chart Area](https://www.telerik.com/kendo-vue-ui/components/charts/elements/chart-area)
* [Crosshairs](https://www.telerik.com/kendo-vue-ui/components/charts/elements/crosshairs)
* [Error Bars](https://www.telerik.com/kendo-vue-ui/components/charts/elements/crosshairs)
* [Legend](https://www.telerik.com/kendo-vue-ui/components/charts/elements/legend)
* [Notes](https://www.telerik.com/kendo-vue-ui/components/charts/elements/notes)
* [Panes](https://www.telerik.com/kendo-vue-ui/components/charts/elements/panes)
* [Plot Area](https://www.telerik.com/kendo-vue-ui/components/charts/elements/plot-area)
* [Plot Bands](https://www.telerik.com/kendo-vue-ui/components/charts/elements/plot-bands)
* [Selection](https://www.telerik.com/kendo-vue-ui/components/charts/elements/selection)
* [Series](https://www.telerik.com/kendo-vue-ui/components/charts/elements/series)
* [Title](https://www.telerik.com/kendo-vue-ui/components/charts/elements/title)
* [Tooltip](https://www.telerik.com/kendo-vue-ui/components/charts/elements/tooltips)
* [API Reference of the Chart](https://www.telerik.com/kendo-vue-ui/components/charts/api)