# Data labels in Vue Charts
Source: https://help.syncfusion.com/chart-sdk/vue/charts/data-labels

Data labels display the values of data points directly on the chart, reducing the need to reference axes for exact values. Enable data labels by setting the [`visible`](https://ej2.syncfusion.com/vue/documentation/api/chart/dataLabelSettings#visible) option to `true` in the `dataLabel` configuration. Labels automatically adjust to avoid overlapping and maintain readability.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}

{% endhighlight %}
{% highlight html tabtitle="Options API (~/src/App.vue)" %}

{% endhighlight %}
{% endtabs %}
        


> Note: To use the data label feature, the `DataLabel` module must be injected into the `provide`.

## Position

Use the [`position`](https://ej2.syncfusion.com/vue/documentation/api/chart/dataLabelSettings#position) property to place data labels at `Top`, `Middle`, `Bottom`, or `Outer` (applicable to column and bar series). Appropriate label positioning enhances clarity and preserves chart readability.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}

{% endhighlight %}
{% highlight html tabtitle="Options API (~/src/App.vue)" %}

{% endhighlight %}
{% endtabs %}
        


> Note: The `Outer` position applies only to column and bar series types.

## Data label template

Customize label content using templates. Use placeholders such as `${point.x}` and `${point.y}` to display data point values. The [`template`](https://ej2.syncfusion.com/vue/documentation/api/chart/dataLabelSettings#template) property enables fully customizable and visually rich labels.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}

{% endhighlight %}
{% highlight html tabtitle="Options API (~/src/App.vue)" %}

{% endhighlight %}
{% endtabs %}
        


## Text mapping

Display custom text using the `name` property, which maps label text from a specific field in the data source. This feature is useful for descriptive or category‑based labels.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}

{% endhighlight %}
{% highlight html tabtitle="Options API (~/src/App.vue)" %}

{% endhighlight %}
{% endtabs %}
        


## Format

Apply number or date formatting using the  [`format`](https://ej2.syncfusion.com/vue/documentation/api/chart/dataLabelSettings#format)  property. Global formatting symbols include:
- `n` – number format  
- `p` – percentage format  
- `c` – currency format  

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}

{% endhighlight %}
{% highlight html tabtitle="Options API (~/src/App.vue)" %}

{% endhighlight %}
{% endtabs %}
        

<table>
  <tr>
    <th>Value</th>
    <th>Format</th>
    <th>Resultant Value</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>1000</td>
    <td>n1</td>
    <td>1000.0</td>
    <td>Rounded to 1 decimal place.</td>
  </tr>
  <tr>
    <td>1000</td>
    <td>n2</td>
    <td>1000.00</td>
    <td>Rounded to 2 decimal places.</td>
  </tr>
   <tr>
    <td>1000</td>
    <td>n3</td>
    <td>1000.000</td>
    <td>Rounded to 3 decimal places.</td>
  </tr>
  <tr>
    <td>0.01</td>
    <td>p1</td>
    <td>1.0%</td>
    <td>Converted to percentage with 1 decimal place.</td>
  </tr>
  <tr>
    <td>0.01</td>
    <td>p2</td>
    <td>1.00%</td>
    <td>Converted to percentage with 2 decimal places.</td>
  </tr>
   <tr>
    <td>0.01</td>
    <td>p3</td>
    <td>1.000%</td>
    <td>Converted to percentage with 3 decimal places.</td>
  </tr>
  <tr>
    <td>1000</td>
    <td>c1</td>
    <td>$1000.0</td>
    <td>Currency with 1 decimal place.</td>
  </tr>
   <tr>
    <td>1000</td>
    <td>c2</td>
    <td>$1000.00</td>
    <td>Currency with 2 decimal places.</td>
  </tr>
</table>

## Margin

Adjust spacing around labels using the `margin` property, which includes `left`, `right`, `bottom`, and `top` values. Margins help prevent labels from overlapping chart elements.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}

{% endhighlight %}
{% highlight html tabtitle="Options API (~/src/App.vue)" %}

{% endhighlight %}
{% endtabs %}
        


## Data label rotation

Rotate data labels using the `angle` property. Rotation improves readability when labels are long or when space is limited.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}

{% endhighlight %}
{% highlight html tabtitle="Options API (~/src/App.vue)" %}

{% endhighlight %}
{% endtabs %}
        


## Customization

Enhance label appearance using properties such as `fill` (background), `border`, and corner radius (`rx`, `ry`). Refine text appearance using the `font` settings, which support `color`, `fontFamily`, `fontWeight`, and `size`.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}

{% endhighlight %}
{% highlight html tabtitle="Options API (~/src/App.vue)" %}

{% endhighlight %}
{% endtabs %}
        


> Note: The `rx` and `ry` properties require non‑null `border` values.

## Customizing a specific point

Customize individual markers or labels using the [`pointRender`](https://ej2.syncfusion.com/vue/documentation/api/chart/iPointRenderEventArgs)and[`textRender`](https://ej2.syncfusion.com/vue/documentation/api/chart/iTextRenderEventArgs) events.  
- `pointRender` modifies shape, color, or border of a point.  
- `textRender` customizes the label text for specific points.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}

{% endhighlight %}
{% highlight html tabtitle="Options API (~/src/App.vue)" %}

{% endhighlight %}
{% endtabs %}
        


## Show percentage based on each series points

Calculate and display percentage values based on each series’ total using the `seriesRender` and `textRender` events.  
- In `seriesRender`, compute the total of `y` values.  
- In `textRender`, calculate the percentage for each point and update the label text.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}

{% endhighlight %}
{% highlight html tabtitle="Options API (~/src/App.vue)" %}

{% endhighlight %}
{% endtabs %}
        


## Last value label in Vue Charts component

The `lastValueLabel` feature highlights the final data point in a series, making the latest trend or value easy to identify.

### Enable last value label

Enable the label by setting the `enable` property inside the `lastValueLabel` configuration.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}

{% endhighlight %}
{% highlight html tabtitle="Options API (~/src/App.vue)" %}

{% endhighlight %}
{% endtabs %}



> Note: To use the last value label feature, inject the `LastValueLabel` module into the `provide`.

### Customization

Customize the appearance using properties such as `font`, `background`, `border`, `dashArray`, `lineWidth`, `lineColor`, `rx`, and `ry`.

{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}

{% endhighlight %}
{% highlight html tabtitle="Options API (~/src/App.vue)" %}

{% endhighlight %}
{% endtabs %}


--------------------------------------------------------------------------------------------------