HelpBot Assistant

How can I help you?

Data labels in Vue Chart component

3 Feb 202624 minutes to read

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 option to true in the dataLabel configuration. Labels automatically adjust to avoid overlapping and maintain readability.

<template>
    <div id="app">
         <ejs-chart id= "container" :title='title' :primaryXAxis='primaryXAxis'>
            <e-series-collection>
            <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Warmest' :marker='marker'></e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, ColumnSeries, Category, DataLabel,
  SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries
 } from "@syncfusion/ej2-vue-charts";

const seriesData = [
        { x: 'Jan', y: -7.1 }, { x: 'Feb', y: -3.7 },
        { x: 'Mar', y: 2 }, { x: 'Apr', y: 6.3 },
        { x: 'May', y: 13.3 }, { x: 'Jun', y: 18.0 },
        { x: 'Jul', y: 19.8 }, { x: 'Aug', y: 18.1 },
        { x: 'Sep', y: 13.1 }, { x: 'Oct', y: 4.1 },
        { x: 'Nov', y: -3.8 }, { x: 'Dec', y: -6.8 }
        ];

const primaryXAxis = {
    valueType: 'Category'
  };

const marker = {
                //Data label for chart series
                dataLabel: { visible: true }
            };

const title = "Alaska Weather Statistics - 2016";

provide('chart',  [ColumnSeries, Category, DataLabel]);

</script>
<style>
 #container {
   height: 350px;
 }
</style>
<template>
    <div id="app">
         <ejs-chart id= "container" :title='title' :primaryXAxis='primaryXAxis'>
            <e-series-collection>
            <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Warmest' :marker='marker'></e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, ColumnSeries, Category, DataLabel, SeriesCollectionDirective, SeriesDirective } from "@syncfusion/ej2-vue-charts";

export default {
name: "App",
components: {
"ejs-chart":ChartComponent,
"e-series-collection":SeriesCollectionDirective,
"e-series":SeriesDirective,

},

  data() {
    return {
      seriesData: [
              { x: 'Jan', y: -7.1 }, { x: 'Feb', y: -3.7 },
              { x: 'Mar', y: 2 }, { x: 'Apr', y: 6.3 },
              { x: 'May', y: 13.3 }, { x: 'Jun', y: 18.0 },
              { x: 'Jul', y: 19.8 }, { x: 'Aug', y: 18.1 },
              { x: 'Sep', y: 13.1 }, { x: 'Oct', y: 4.1 },
              { x: 'Nov', y: -3.8 }, { x: 'Dec', y: -6.8 }
              ],
        primaryXAxis: {
           valueType: 'Category'
        },
        marker: {
                    //Data label for chart series
                    dataLabel: { visible: true }
                },
      title: "Alaska Weather Statistics - 2016"
    };
  },
  provide: {
    chart: [ColumnSeries, Category, DataLabel]
  }
};
</script>
<style>
 #container {
   height: 350px;
 }
</style>

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

Position

Use the 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.

<template>
    <div id="app">
         <ejs-chart id= "container" :title='title' :primaryXAxis='primaryXAxis'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Warmest' :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, ColumnSeries, Category, DataLabel,
  SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries
 } from "@syncfusion/ej2-vue-charts";

const seriesData = [
        { x: 'Jan', y: -7.1 }, { x: 'Feb', y: -3.7 },
        { x: 'Mar', y: 2 }, { x: 'Apr', y: 6.3 },
        { x: 'May', y: 13.3 }, { x: 'Jun', y: 18.0 },
        { x: 'Jul', y: 19.8 }, { x: 'Aug', y: 18.1 },
        { x: 'Sep', y: 13.1 }, { x: 'Oct', y: 4.1 },
        { x: 'Nov', y: -3.8 }, { x: 'Dec', y: -6.8 }
        ];

const primaryXAxis = {
    valueType: 'Category'
  };

const marker = {
                dataLabel: { visible: true, position: 'Middle' }
            };
          
const title = "Alaska Weather Statistics - 2016";

provide('chart',  [ColumnSeries, Category, DataLabel]);

</script>
<style>
#container {
   height: 350px;
 }
</style>
<template>
    <div id="app">
         <ejs-chart id= "container" :title='title' :primaryXAxis='primaryXAxis'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Warmest' :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, ColumnSeries, Category, DataLabel, SeriesCollectionDirective, SeriesDirective } from "@syncfusion/ej2-vue-charts";

export default {
name: "App",
components: {
"ejs-chart":ChartComponent,
"e-series-collection":SeriesCollectionDirective,
"e-series":SeriesDirective,

},

  data() {
    return {
      seriesData: [
              { x: 'Jan', y: -7.1 }, { x: 'Feb', y: -3.7 },
              { x: 'Mar', y: 2 }, { x: 'Apr', y: 6.3 },
              { x: 'May', y: 13.3 }, { x: 'Jun', y: 18.0 },
              { x: 'Jul', y: 19.8 }, { x: 'Aug', y: 18.1 },
              { x: 'Sep', y: 13.1 }, { x: 'Oct', y: 4.1 },
              { x: 'Nov', y: -3.8 }, { x: 'Dec', y: -6.8 }
              ],
        primaryXAxis: {
           valueType: 'Category'
        },
        marker: {
                  dataLabel: { visible: true, position: 'Middle' }
                },
      title: "Alaska Weather Statistics - 2016"
    };
  },
  provide: {
    chart: [ColumnSeries, Category, DataLabel]
  }
};
</script>
<style>
#container {
   height: 350px;
 }
</style>

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 property enables fully customizable and visually rich labels.

<template>
    <div id="app">
         <ejs-chart id= "container" :title='title' :primaryXAxis='primaryXAxis'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Warmest' :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, ColumnSeries, Category, DataLabel,
  SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries
 } from "@syncfusion/ej2-vue-charts";
import {createApp} from 'vue';

const app = createApp({});
    let contentVue = app.component("contentTemplate", {
  template: `<div><div></div><div></div></div>`,
  data() {
    return {
      data: {}
    };
  }
});
let contentTemplate = function() {
  return { template: contentVue };
};

const seriesData = [
        { x: 'Jan', y: -7.1 }, { x: 'Feb', y: -3.7 },
        { x: 'Mar', y: 2 }, { x: 'Apr', y: 6.3 },
        { x: 'May', y: 13.3 }, { x: 'Jun', y: 18.0 },
        { x: 'Jul', y: 19.8 }, { x: 'Aug', y: 18.1 },
        { x: 'Sep', y: 13.1 }, { x: 'Oct', y: 4.1 },
        { x: 'Nov', y: -3.8 }, { x: 'Dec', y: -6.8 }
        ];

const primaryXAxis = {
    valueType: 'Category'
  };

const marker = {
                dataLabel: { visible: true, position: 'Middle' }, template: contentTemplate
            };

const title = "Alaska Weather Statistics - 2016";

provide('chart',  [ColumnSeries, Category, DataLabel]);

</script>
<style>
 #container {
   height: 350px;
 }
</style>
<template>
    <div id="app">
         <ejs-chart id= "container" :title='title' :primaryXAxis='primaryXAxis'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Warmest' :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, ColumnSeries, Category, DataLabel, SeriesCollectionDirective, SeriesDirective } from "@syncfusion/ej2-vue-charts";
import {createApp} from 'vue';

const app = createApp({});

    let contentVue = app.component("contentTemplate", {
  template: `<div><div></div><div></div></div>`,
  data() {
    return {
      data: {}
    };
  }
});
let contentTemplate = function() {
  return { template: contentVue };
};



export default {
name: "App",
components: {
"ejs-chart":ChartComponent,
"e-series-collection":SeriesCollectionDirective,
"e-series":SeriesDirective,

},

  data() {
    return {
      seriesData: [
              { x: 'Jan', y: -7.1 }, { x: 'Feb', y: -3.7 },
              { x: 'Mar', y: 2 }, { x: 'Apr', y: 6.3 },
              { x: 'May', y: 13.3 }, { x: 'Jun', y: 18.0 },
              { x: 'Jul', y: 19.8 }, { x: 'Aug', y: 18.1 },
              { x: 'Sep', y: 13.1 }, { x: 'Oct', y: 4.1 },
              { x: 'Nov', y: -3.8 }, { x: 'Dec', y: -6.8 }
              ],
        primaryXAxis: {
           valueType: 'Category'
        },
        marker: { dataLabel: { visible: true, position: 'Middle',
                  template: contentTemplate } },
      title: "Alaska Weather Statistics - 2016"
    };
  },
  provide: {
    chart: [ColumnSeries, Category, DataLabel]
  }
};
</script>
<style>
 #container {
   height: 350px;
 }
</style>

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.

<template>
    <div id="app">
         <ejs-chart id= "container" :title='title' :primaryXAxis='primaryXAxis'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Warmest' :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, ColumnSeries, Category, DataLabel,
  SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries
 } from "@syncfusion/ej2-vue-charts";

const seriesData = [
        { x: 'Jan', y: 12, text: 'January : 12°C' }, { x: 'Feb', y: 8, text: 'February : 8°C' },
        { x: 'Mar', y: 11, text: 'March : 11°C' }, { x: 'Apr', y: 6, text: 'April : 6°C' }
        ];

const primaryXAxis = {
    valueType: 'Category'
  };

const marker = {
                dataLabel: { visible: true, name: 'text' }
            };

const title = "Alaska Weather Statistics - 2016";

provide('chart',  [ColumnSeries, Category, DataLabel]);

</script>
<style>
 #container {
   height: 350px;
 }
</style>
<template>
    <div id="app">
         <ejs-chart id= "container" :title='title' :primaryXAxis='primaryXAxis'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Warmest' :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, ColumnSeries, Category, DataLabel, SeriesCollectionDirective, SeriesDirective } from "@syncfusion/ej2-vue-charts";

export default {
name: "App",
components: {
"ejs-chart":ChartComponent,
"e-series-collection":SeriesCollectionDirective,
"e-series":SeriesDirective,

},

  data() {
    return {
      seriesData:[{ x: 'Jan', y: 12, text: 'January : 12°C' }, { x: 'Feb', y: 8, text: 'February : 8°C' },
                  { x: 'Mar', y: 11, text: 'March : 11°C' }, { x: 'Apr', y: 6, text: 'April : 6°C' }],
        primaryXAxis: {
           valueType: 'Category'
        },
        marker: { dataLabel: { visible: true, name: 'text'} },
      title: "Alaska Weather Statistics - 2016"
    };
  },
  provide: {
    chart: [ColumnSeries, Category, DataLabel]
  }
};
</script>
<style>
 #container {
   height: 350px;
 }
</style>

Format

Apply number or date formatting using the format property. Global formatting symbols include:

  • n – number format
  • p – percentage format
  • c – currency format
<template>
    <div id="app">
         <ejs-chart id= "container" :title='title' :primaryXAxis='primaryXAxis'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Warmest' :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, ColumnSeries, Category, DataLabel,
  SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries
 } from "@syncfusion/ej2-vue-charts";

const seriesData = [
        { x: 'Jan', y: 12, text: 'January : 12°C' }, { x: 'Feb', y: 8, text: 'February : 8°C' },
        { x: 'Mar', y: 11, text: 'March : 11°C' }, { x: 'Apr', y: 6, text: 'April : 6°C' }
        ];

const primaryXAxis = {
    valueType: 'Category'
  };

const marker = {
                dataLabel: { visible: true, name: 'text' }
            };

const title = "Alaska Weather Statistics - 2016";

provide('chart',  [ColumnSeries, Category, DataLabel]);

</script>
<style>
 #container {
   height: 350px;
 }
</style>
<template>
    <div id="app">
         <ejs-chart id= "container" :title='title' :primaryXAxis='primaryXAxis'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Warmest' :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, ColumnSeries, Category, DataLabel, SeriesCollectionDirective, SeriesDirective } from "@syncfusion/ej2-vue-charts";

export default {
name: "App",
components: {
"ejs-chart":ChartComponent,
"e-series-collection":SeriesCollectionDirective,
"e-series":SeriesDirective,

},

  data() {
    return {
      seriesData:[{ x: 'Jan', y: 12, text: 'January : 12°C' }, { x: 'Feb', y: 8, text: 'February : 8°C' },
                  { x: 'Mar', y: 11, text: 'March : 11°C' }, { x: 'Apr', y: 6, text: 'April : 6°C' }],
        primaryXAxis: {
           valueType: 'Category'
        },
        marker: { dataLabel: { visible: true, format: 'n2'} },
      title: "Alaska Weather Statistics - 2016"
    };
  },
  provide: {
    chart: [ColumnSeries, Category, DataLabel]
  }
};
</script>
<style>
 #container {
   height: 350px;
 }
</style>

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

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.

<template>
    <div id="app">
         <ejs-chart id= "container" :title='title' :primaryXAxis='primaryXAxis'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Warmest' :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, ColumnSeries, Category, DataLabel, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries } from "@syncfusion/ej2-vue-charts";

const seriesData = [
        { x: 'Jan', y: -7.1 }, { x: 'Feb', y: -3.7 },
        { x: 'Mar', y: 2 }, { x: 'Apr', y: 6.3 },
        { x: 'May', y: 13.3 }, { x: 'Jun', y: 18.0 },
        { x: 'Jul', y: 19.8 }, { x: 'Aug', y: 18.1 },
        { x: 'Sep', y: 13.1 }, { x: 'Oct', y: 4.1 },
        { x: 'Nov', y: -3.8 }, { x: 'Dec', y: -6.8 }
        ];

const primaryXAxis = {
    valueType: 'Category'
  };

const marker = {
                dataLabel: { visible: true,border:{width: 1, color : 'red'},
                    margin:{
                        left:5,
                        right:5,
                        top:5,
                        bottom:5
                    } }
            };

const title = "Alaska Weather Statistics - 2016";

provide('chart',  [ColumnSeries, Category, DataLabel]);

</script>
<style>
 #container {
   height: 350px;
 }
</style>
<template>
    <div id="app">
         <ejs-chart id= "container" :title='title' :primaryXAxis='primaryXAxis'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Warmest' :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, ColumnSeries, Category, DataLabel, SeriesCollectionDirective, SeriesDirective } from "@syncfusion/ej2-vue-charts";

export default {
name: "App",
components: {
"ejs-chart":ChartComponent,
"e-series-collection":SeriesCollectionDirective,
"e-series":SeriesDirective,

},

  data() {
    return {
      seriesData: [
              { x: 'Jan', y: -7.1 }, { x: 'Feb', y: -3.7 },
              { x: 'Mar', y: 2 }, { x: 'Apr', y: 6.3 },
              { x: 'May', y: 13.3 }, { x: 'Jun', y: 18.0 },
              { x: 'Jul', y: 19.8 }, { x: 'Aug', y: 18.1 },
              { x: 'Sep', y: 13.1 }, { x: 'Oct', y: 4.1 },
              { x: 'Nov', y: -3.8 }, { x: 'Dec', y: -6.8 }
              ],
        primaryXAxis: {
           valueType: 'Category'
        },
        marker: { dataLabel: { visible: true,border:{width: 1, color : 'red'},
                        margin:{
                            left:5,
                            right:5,
                            top:5,
                            bottom:5
                        } }
        },
      title: "Alaska Weather Statistics - 2016"
    };
  },
  provide: {
    chart: [ColumnSeries, Category, DataLabel]
  }
};
</script>
<style>
 #container {
   height: 350px;
 }
</style>

Data label rotation

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

<template>
    <div id="app">
         <ejs-chart id= "container" :title='title' :primaryXAxis='primaryXAxis'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Warmest' :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, ColumnSeries, Category, DataLabel, SeriesCollectionDirective as ESeriesCollection,
  SeriesDirective as ESeries
 } from "@syncfusion/ej2-vue-charts";

const seriesData = [
        { x: 'Jan', y: -7.1 }, { x: 'Feb', y: -3.7 },
        { x: 'Mar', y: 2 }, { x: 'Apr', y: 6.3 },
        { x: 'May', y: 13.3 }, { x: 'Jun', y: 18.0 },
        { x: 'Jul', y: 19.8 }, { x: 'Aug', y: 18.1 },
        { x: 'Sep', y: 13.1 }, { x: 'Oct', y: 4.1 },
        { x: 'Nov', y: -3.8 }, { x: 'Dec', y: -6.8 }
        ];

const primaryXAxis = {
    valueType: 'Category'
  };

const marker = {
                dataLabel: { visible: true,border:{width: 1, color : 'red'},
                    margin:{
                        left:5,
                        right:5,
                        top:5,
                        bottom:5
                    }, angle: 45, enableRotation: true}
            };

const title = "Alaska Weather Statistics - 2016";

provide('chart',  [ColumnSeries, Category, DataLabel]);

</script>
<style>
 #container {
   height: 350px;
 }
</style>
<template>
    <div id="app">
         <ejs-chart id= "container" :title='title' :primaryXAxis='primaryXAxis'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Warmest' :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, ColumnSeries, Category, DataLabel, SeriesCollectionDirective, SeriesDirective } from "@syncfusion/ej2-vue-charts";

export default {
name: "App",
components: {
"ejs-chart":ChartComponent,
"e-series-collection":SeriesCollectionDirective,
"e-series":SeriesDirective,

},

  data() {
    return {
      seriesData: [
              { x: 'Jan', y: -7.1 }, { x: 'Feb', y: -3.7 },
              { x: 'Mar', y: 2 }, { x: 'Apr', y: 6.3 },
              { x: 'May', y: 13.3 }, { x: 'Jun', y: 18.0 },
              { x: 'Jul', y: 19.8 }, { x: 'Aug', y: 18.1 },
              { x: 'Sep', y: 13.1 }, { x: 'Oct', y: 4.1 },
              { x: 'Nov', y: -3.8 }, { x: 'Dec', y: -6.8 }
              ],
        primaryXAxis: {
           valueType: 'Category'
        },
        marker: { dataLabel: { visible: true,border:{width: 1, color : 'red'},
                        margin:{
                            left:5,
                            right:5,
                            top:5,
                            bottom:5
                        }, angle: 45, enableRotation: true }
        },
      title: "Alaska Weather Statistics - 2016"
    };
  },
  provide: {
    chart: [ColumnSeries, Category, DataLabel]
  }
};
</script>
<style>
 #container {
   height: 350px;
 }
</style>

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.

<template>
    <div id="app">
         <ejs-chart id= "container" :title='title' :primaryXAxis='primaryXAxis'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Warmest' :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, ColumnSeries, Category, DataLabel,
  SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries
 } from "@syncfusion/ej2-vue-charts";

const seriesData = [
        { x: 'Jan', y: -7.1 }, { x: 'Feb', y: -3.7 },
        { x: 'Mar', y: 2 }, { x: 'Apr', y: 6.3 },
        { x: 'May', y: 13.3 }, { x: 'Jun', y: 18.0 },
        { x: 'Jul', y: 19.8 }, { x: 'Aug', y: 18.1 },
        { x: 'Sep', y: 13.1 }, { x: 'Oct', y: 4.1 },
        { x: 'Nov', y: -3.8 }, { x: 'Dec', y: -6.8 }
        ];

const primaryXAxis = {
    valueType: 'Category'
  };

const marker = {
                dataLabel: { visible: true,
                    border:{width: 2, color : 'red'},
                    rx:10, ry: 10
                }
            };

const title = "Alaska Weather Statistics - 2016";

provide('chart',  [ColumnSeries, Category, DataLabel]);

</script>
<style>
#container {
   height: 350px;
 }
</style>
<template>
    <div id="app">
         <ejs-chart id= "container" :title='title' :primaryXAxis='primaryXAxis'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Warmest' :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, ColumnSeries, Category, DataLabel, SeriesCollectionDirective, SeriesDirective } from "@syncfusion/ej2-vue-charts";

export default {
name: "App",
components: {
"ejs-chart":ChartComponent,
"e-series-collection":SeriesCollectionDirective,
"e-series":SeriesDirective,

},

  data() {
    return {
      seriesData: [
              { x: 'Jan', y: -7.1 }, { x: 'Feb', y: -3.7 },
              { x: 'Mar', y: 2 }, { x: 'Apr', y: 6.3 },
              { x: 'May', y: 13.3 }, { x: 'Jun', y: 18.0 },
              { x: 'Jul', y: 19.8 }, { x: 'Aug', y: 18.1 },
              { x: 'Sep', y: 13.1 }, { x: 'Oct', y: 4.1 },
              { x: 'Nov', y: -3.8 }, { x: 'Dec', y: -6.8 }
              ],
        primaryXAxis: {
           valueType: 'Category'
        },
        marker:{ dataLabel: { visible: true,
                        border:{width: 2, color : 'red'},
                        rx:10, ry: 10
                    }
        },
      title: "Alaska Weather Statistics - 2016"
    };
  },
  provide: {
    chart: [ColumnSeries, Category, DataLabel]
  }
};
</script>
<style>
#container {
   height: 350px;
 }
</style>

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

Customizing a specific point

Customize individual markers or labels using the pointRenderandtextRender events.

  • pointRender modifies shape, color, or border of a point.
  • textRender customizes the label text for specific points.
<template>
    <div id="app">
         <ejs-chart id= "container" :title='title' :primaryXAxis='primaryXAxis' :pointRender='pointRender' :textRender='textRender'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Warmest' :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, ColumnSeries, Category, DataLabel,
  SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries
 } from "@syncfusion/ej2-vue-charts";

const seriesData = [
        { x: 'Jan', y: -7.1 }, { x: 'Feb', y: -3.7 },
        { x: 'Mar', y: 2 }, { x: 'Apr', y: 6.3 },
        { x: 'May', y: 13.3 }, { x: 'Jun', y: 18.0 },
        { x: 'Jul', y: 19.8 }, { x: 'Aug', y: 18.1 },
        { x: 'Sep', y: 13.1 }, { x: 'Oct', y: 4.1 },
        { x: 'Nov', y: -3.8 }, { x: 'Dec', y: -6.8 }
        ];

const primaryXAxis = {
    valueType: 'Category'
  };

const marker = {
                dataLabel: { visible: true }
            };

const title = "Alaska Weather Statistics - 2016";

provide('chart',  [ColumnSeries, Category, DataLabel]);

const pointRender = function(args) {
    if (args.point.index === 6) {
                args.fill = 'red'
    }
};

const textRender = function(args) {
    if (args.point.index === 6) {
                args.text = 'Maximum Temperature';
                args.color = 'red';
            }
};

</script>
<style>
 #container {
   height: 350px;
 }
</style>
<template>
    <div id="app">
         <ejs-chart id= "container" :title='title' :primaryXAxis='primaryXAxis' :pointRender='pointRender' :textRender='textRender'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Warmest' :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, ColumnSeries, Category, DataLabel, SeriesCollectionDirective, SeriesDirective } from "@syncfusion/ej2-vue-charts";

export default {
name: "App",
components: {
"ejs-chart":ChartComponent,
"e-series-collection":SeriesCollectionDirective,
"e-series":SeriesDirective,

},

  data() {
    return {
      seriesData: [
              { x: 'Jan', y: -7.1 }, { x: 'Feb', y: -3.7 },
              { x: 'Mar', y: 2 }, { x: 'Apr', y: 6.3 },
              { x: 'May', y: 13.3 }, { x: 'Jun', y: 18.0 },
              { x: 'Jul', y: 19.8 }, { x: 'Aug', y: 18.1 },
              { x: 'Sep', y: 13.1 }, { x: 'Oct', y: 4.1 },
              { x: 'Nov', y: -3.8 }, { x: 'Dec', y: -6.8 }
              ],
        primaryXAxis: {
           valueType: 'Category'
        },
        marker:{ dataLabel: { visible: true } },
      title: "Alaska Weather Statistics - 2016"
    };
  },
  provide: {
    chart: [ColumnSeries, Category, DataLabel]
  },
  methods: {
      pointRender: function(args) {
       if (args.point.index === 6) {
                args.fill = 'red'
        }
  },
   textRender: function(args) {
      if (args.point.index === 6) {
                args.text = 'Maximum Temperature';
                args.color = 'red';
            }
  }
  }
};
</script>
<style>
 #container {
   height: 350px;
 }
</style>

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.
<template>
  <div class="control-section">
    <div align="center">
      <ejs-chart
        style="display: block"
        :theme="theme"
        align="center"
        id="chartcontainer"
        :title="title"
        :primaryXAxis="primaryXAxis"
        :primaryYAxis="primaryYAxis"
        :chartArea="chartArea"
        :width="width"
        :tooltip="tooltip"
        :textRender="onTextRender"
        :seriesRender="onSeriesRender"
      >
        <e-series-collection>
          <e-series
            :dataSource="seriesData"
            type="Column"
            xName="x"
            yName="y"
            name="Gold"
            width="2"
            :marker="marker"
          >
          </e-series>
          <e-series
            :dataSource="seriesData1"
            type="Column"
            xName="x"
            yName="y"
            name="Silver"
            width="2"
            :marker="marker"
          >
          </e-series>
          <e-series
            :dataSource="seriesData2"
            type="Column"
            xName="x"
            yName="y"
            name="Bronze"
            width="2"
            :marker="marker"
          >
          </e-series>
        </e-series-collection>
      </ejs-chart>
    </div>
  </div>
</template>
<style scoped>
</style>
<script setup>
import { provide } from "vue";

import { Browser } from "@syncfusion/ej2-base";
import {
  ChartComponent as EjsChart,
  ColumnSeries,
  Category,
  DataLabel,
  Tooltip,
  Legend,
  SeriesCollectionDirective as ESeriesCollection,
  SeriesDirective as ESeries,
} from "@syncfusion/ej2-vue-charts";

let total = [];

const seriesData = [
  { x: "USA", y: 46 },
  { x: "GBR", y: 27 },
  { x: "CHN", y: 26 },
];

const seriesData1 = [
  { x: "USA", y: 37 },
  { x: "GBR", y: 23 },
  { x: "CHN", y: 18 },
];

const seriesData2 = [
  { x: "USA", y: 38 },
  { x: "GBR", y: 17 },
  { x: "CHN", y: 26 },
];

//Initializing Primary X Axis
const primaryXAxis = {
  valueType: "Category",
  interval: 1,
  majorGridLines: { width: 0 },
};

const chartArea = { border: { width: 0 } };

//Initializing Primary Y Axis

const primaryYAxis = {
  majorGridLines: { width: 0 },
  majorTickLines: { width: 0 },
  lineStyle: { width: 0 },
  labelStyle: { color: "transparent" },
};

const width = Browser.isDevice ? "100%" : "60%";

const marker = {
  dataLabel: {
    visible: true,
    position: "Top",
    font: { fontWeight: "600", color: "#ffffff" },
  },
};

const tooltip = {
  enable: true,
};

const title = "Olympic Medal Counts - RIO";

provide("chart", [ColumnSeries, Legend, DataLabel, Category, Tooltip]);

const onSeriesRender = function (args) {
  for (let i = 0; i < args.data.length; i++) {
    if (!total[args.data[i].x]) total[args.data[i].x] = 0;
    total[args.data[i].x] += parseInt(args.data[i].y);
  }
};

const onTextRender = function (args) {
  let percentage = (parseInt(args.text) / total[args.point.x]) * 100;
  percentage = percentage % 1 === 0 ? percentage : percentage.toFixed(2);
  args.text = percentage + "%";
};

</script>
<template>
  <div class="control-section">
    <div align="center">
      <ejs-chart
        style="display: block"
        :theme="theme"
        align="center"
        id="chartcontainer"
        :title="title"
        :primaryXAxis="primaryXAxis"
        :primaryYAxis="primaryYAxis"
        :chartArea="chartArea"
        :width="width"
        :tooltip="tooltip"
        :textRender="onTextRender"
        :seriesRender="onSeriesRender"
      >
        <e-series-collection>
          <e-series
            :dataSource="seriesData"
            type="Column"
            xName="x"
            yName="y"
            name="Gold"
            width="2"
            :marker="marker"
          >
          </e-series>
          <e-series
            :dataSource="seriesData1"
            type="Column"
            xName="x"
            yName="y"
            name="Silver"
            width="2"
            :marker="marker"
          >
          </e-series>
          <e-series
            :dataSource="seriesData2"
            type="Column"
            xName="x"
            yName="y"
            name="Bronze"
            width="2"
            :marker="marker"
          >
          </e-series>
        </e-series-collection>
      </ejs-chart>
    </div>
  </div>
</template>
<style scoped>
</style>
<script>

import { Browser } from "@syncfusion/ej2-base";
import {
  ChartComponent,
  ColumnSeries,
  Category,
  DataLabel,
  Tooltip,
  Legend,
  SeriesCollectionDirective,
  SeriesDirective,
} from "@syncfusion/ej2-vue-charts";

let total = [];

export default {
name: "App",
components: {
"ejs-chart":ChartComponent,
"e-series-collection":SeriesCollectionDirective,
"e-series":SeriesDirective,
},

  data: function () {
    return {
      seriesData: [
        { x: "USA", y: 46 },
        { x: "GBR", y: 27 },
        { x: "CHN", y: 26 },
      ],

      seriesData1: [
        { x: "USA", y: 37 },
        { x: "GBR", y: 23 },
        { x: "CHN", y: 18 },
      ],

      seriesData2: [
        { x: "USA", y: 38 },
        { x: "GBR", y: 17 },
        { x: "CHN", y: 26 },
      ],

      //Initializing Primary X Axis
      primaryXAxis: {
        valueType: "Category",
        interval: 1,
        majorGridLines: { width: 0 },
      },
      chartArea: { border: { width: 0 } },

      //Initializing Primary Y Axis
      primaryYAxis: {
        majorGridLines: { width: 0 },
        majorTickLines: { width: 0 },
        lineStyle: { width: 0 },
        labelStyle: { color: "transparent" },
      },

      width: Browser.isDevice ? "100%" : "60%",
      marker: {
        dataLabel: {
          visible: true,
          position: "Top",
          font: { fontWeight: "600", color: "#ffffff" },
        },
      },

      tooltip: {
        enable: true,
      },

      title: "Olympic Medal Counts - RIO",
    };
  },
  provide: {
    chart: [ColumnSeries, Legend, DataLabel, Category, Tooltip],
  },
  methods: {
    onSeriesRender: function (args) {
      for (let i = 0; i < args.data.length; i++) {
        if (!total[args.data[i].x]) total[args.data[i].x] = 0;
        total[args.data[i].x] += parseInt(args.data[i].y);
      }
    },
    onTextRender: function (args) {
      let percentage = (parseInt(args.text) / total[args.point.x]) * 100;
      percentage = percentage % 1 === 0 ? percentage : percentage.toFixed(2);
      args.text = percentage + "%";
    },
  },
};
</script>

Last value label in Vue Chart 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.

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :width='width'
      :tooltip='tooltip'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='series1' :marker='marker'
          :lastValueLabel='lastValueLabel'></e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script setup>
import { provide } from "vue";

import {
  ChartComponent as EjsChart, ColumnSeries, Category, DataLabel, Legend, LastValueLabel, Tooltip
  SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries
} from "@syncfusion/ej2-vue-charts";

const seriesData = [
  { x: 2005, y: 28 }, { x: 2006, y: 25 }, { x: 2007, y: 26 },
  { x: 2008, y: 27 }, { x: 2009, y: 32 }, { x: 2010, y: 35 },
  { x: 2011, y: 40 }
];

const primaryXAxis = {
  title: 'Year',
  interval: 1
};

const primaryYAxis = {
  title: 'Efficiency',
  labelFormat: '{value}%'
};

const marker = {
  visible: false,
  dataLabel: { visible: true }
};

const lastValueLabel = { enable: true };
const tooltip = { enable: true };
const width = '90%';
const title = "Efficiency of oil-fired power production";

provide('chart', [LineSeries, Category, DataLabel, LastValueLabel]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
    <div id="app">
         <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :width='width'
      :tooltip='tooltip'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='series1' :marker='marker'
          :lastValueLabel='lastValueLabel'></e-series>
      </e-series-collection>
    </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, ColumnSeries, Category, DataLabel, LastValueLabel, Legend, Tooltip, SeriesCollectionDirective, SeriesDirective } from "@syncfusion/ej2-vue-charts";

export default {
name: "App",
components: {
"ejs-chart":ChartComponent,
"e-series-collection":SeriesCollectionDirective,
"e-series":SeriesDirective,

},

  data() {
    return {
      seriesData: [
        { x: 2005, y: 28 }, { x: 2006, y: 25 }, { x: 2007, y: 26 },
        { x: 2008, y: 27 }, { x: 2009, y: 32 }, { x: 2010, y: 35 },
        { x: 2011, y: 40 }
      ],
      primaryXAxis: {
        title: 'Year',
        interval: 1
      },
      primaryYAxis: {
        title: 'Efficiency',
        labelFormat: '{value}%'
      },
      marker: {
        visible: false,
        dataLabel: { visible: true }
      },
      lastValueLabel: { enable: true },
      tooltip: { enable: true },
      width: '90%',
      title: 'Efficiency of oil-fired power production'
    };
  },
  provide: {
    chart: [ColumnSeries, Category, DataLabel, LastValueLabel, Legend, Tooltip]
  }
};
</script>
<style>
 #container {
   height: 350px;
 }
</style>

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.

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :width='width'
      :tooltip='tooltip'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='series1' :marker='marker'
          :lastValueLabel='lastValueLabel'></e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script setup>
import { provide } from "vue";

import {
  ChartComponent as EjsChart, ColumnSeries, Category, DataLabel, Legend, LastValueLabel, Tooltip
  SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries
} from "@syncfusion/ej2-vue-charts";

const seriesData = [
  { x: 2005, y: 28 }, { x: 2006, y: 25 }, { x: 2007, y: 26 },
  { x: 2008, y: 27 }, { x: 2009, y: 32 }, { x: 2010, y: 35 },
  { x: 2011, y: 40 }
];

const primaryXAxis = {
  title: 'Year',
  interval: 1
};

const primaryYAxis = {
  title: 'Efficiency',
  labelFormat: '{value}%'
};

const marker = {
  visible: false,
  dataLabel: { visible: true }
};

const lastValueLabel = { enable: true, background: "blue", lineColor: "red", lineWidth: 2, dashArray: "5,5", rx: 10, ry: 10, border: { width: 2, color: "red" }, font: { color: "white", size: "12px", fontWeight: "bold" } };
const tooltip = { enable: true };
const width = '90%';
const title = "Efficiency of oil-fired power production";

provide('chart', [LineSeries, Category, DataLabel, LastValueLabel]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
    <div id="app">
         <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :width='width'
      :tooltip='tooltip'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='series1' :marker='marker'
          :lastValueLabel='lastValueLabel'></e-series>
      </e-series-collection>
    </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, ColumnSeries, Category, DataLabel, LastValueLabel, Legend, Tooltip, SeriesCollectionDirective, SeriesDirective } from "@syncfusion/ej2-vue-charts";

export default {
name: "App",
components: {
"ejs-chart":ChartComponent,
"e-series-collection":SeriesCollectionDirective,
"e-series":SeriesDirective,

},

  data() {
    return {
      seriesData: [
        { x: 2005, y: 28 }, { x: 2006, y: 25 }, { x: 2007, y: 26 },
        { x: 2008, y: 27 }, { x: 2009, y: 32 }, { x: 2010, y: 35 },
        { x: 2011, y: 40 }
      ],
      primaryXAxis: {
        title: 'Year',
        interval: 1
      },
      primaryYAxis: {
        title: 'Efficiency',
        labelFormat: '{value}%'
      },
      marker: {
        visible: false,
        dataLabel: { visible: true }
      },
      lastValueLabel: { enable: true, background: "blue", lineColor: "red", lineWidth: 2, dashArray: "5,5", rx: 10, ry: 10, border: { width: 2, color: "red" }, font: { color: "white", size: "12px", fontWeight: "bold" } },
      tooltip: { enable: true },
      width: '90%',
      title: 'Efficiency of oil-fired power production'
    };
  },
  provide: {
    chart: [ColumnSeries, Category, DataLabel, LastValueLabel, Legend, Tooltip]
  }
};
</script>
<style>
 #container {
   height: 350px;
 }
</style>