Last value label in Vue Chart component

27 Jun 202512 minutes to read

The lastValueLabel in a chart allows you to easily display the value of the last data point in a series. This feature provides an intuitive way to highlight the most recent or last data value in a series on your chart.

Enable last value label

To show the last value label, make sure the enable property inside the lastValueLabel settings is set to true within the series 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 LastValueLabel module into the provide.

Customization

The appearance of the last value label can be customized using style properties such as font, background, border, dashArray, lineWidth, lineColor, rx, and ry in the lastValueLabel property of the chart series. These settings allow you to tailor the label’s look to align with your desired visual presentation.

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