Title and Subtitle in Vue Chart Component

3 Feb 202624 minutes to read

Chart titles and subtitles help provide context for the visualized data. The title typically indicates the main subject or metric represented in the chart, while the subtitle adds supporting details such as data sources, time ranges, or explanatory notes. Both elements can be customized in terms of position, alignment, and style to align with application design requirements.

Chart title

Add a chart title using the title property. The title appears at the top of the chart by default and is used to describe the purpose or subject of the visualization.

Composition API (~/src/App.vue)

<template>
    <div id="app">
         <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :titleStyle='titleStyle'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='StepLine' xName='x' yName='y' width=2 name='China' :marker='marker'> </e-series>
                <e-series :dataSource='seriesData'  type='StepLine' xName='x' yName='y1' width=2 name='Australia' :marker='marker'> </e-series>
                <e-series :dataSource='seriesData'  type='StepLine' xName='x' yName='y2' width=2 name='Japan' :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

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

const seriesData = [
        { x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
        { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
        { x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
        { x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
        { x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
        { x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
        { x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
        { x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
      ];

const primaryXAxis = {
    title: 'Years',
    lineStyle: { width: 0 },
    labelFormat: 'y',
    intervalType: 'Years',
    valueType: 'DateTime',
    edgeLabelPlacement: 'Shift'
};

const primaryYAxis = {
    title: 'Percentage (%)',
    minimum: 0, maximum: 20, interval: 2,
    labelFormat: '{value}%'
};

const marker = {
                visible: true, width: 10, height: 10
            };

const title = "Unemployment Rates 1975-2010";

const titleStyle = {
        fontFamily: "Arial",
        fontStyle: 'italic',
        fontWeight: 'regular',
        color: "#E27F2D",
        size: '23px'
    };

provide('chart',  [StepLineSeries, DateTime]);

</script>
<style>
 #container {
   height: 350px;
 }
</style>

Options API (~/src/App.vue)

<template>
    <div id="app">
         <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :titleStyle='titleStyle'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='StepLine' xName='x' yName='y' width=2 name='China' :marker='marker'> </e-series>
                <e-series :dataSource='seriesData'  type='StepLine' xName='x' yName='y1' width=2 name='Australia' :marker='marker'> </e-series>
                <e-series :dataSource='seriesData'  type='StepLine' xName='x' yName='y2' width=2 name='Japan' :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, StepLineSeries, DateTime, 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: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
                { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
                { x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
                { x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
                { x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
                { x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
                { x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
                { x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
              ],
        primaryXAxis: {
            title: 'Years',
            lineStyle: { width: 0 },
            labelFormat: 'y',
            intervalType: 'Years',
            valueType: 'DateTime',
            edgeLabelPlacement: 'Shift'
        },
          primaryYAxis: {
            title: 'Percentage (%)',
            minimum: 0, maximum: 20, interval: 2,
            labelFormat: '{value}%'
        },
       marker: {
                    visible: true, width: 10, height: 10
                },
      title: "Unemployment Rates 1975-2010",
      titleStyle:{
            fontFamily: "Arial",
            fontStyle: 'italic',
            fontWeight: 'regular',
            color: "#E27F2D",
            size: '23px'
        }
    };
  },
  provide: {
    chart: [StepLineSeries, DateTime]
  }
};
</script>
<style>
 #container {
   height: 350px;
 }
</style>

Title position

Use the position property within titleStyle to place the title at the left, right, top, or bottom of the chart. The default position is at the top.

Composition API (~/src/App.vue)

<template>
    <div id="app">
         <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :titleStyle='titleStyle'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='StepLine' xName='x' yName='y' width=2 name='China' :marker='marker'> </e-series>
                <e-series :dataSource='seriesData'  type='StepLine' xName='x' yName='y1' width=2 name='Australia' :marker='marker'> </e-series>
                <e-series :dataSource='seriesData'  type='StepLine' xName='x' yName='y2' width=2 name='Japan' :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

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

const seriesData = [
        { x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
        { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
        { x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
        { x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
        { x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
        { x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
        { x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
        { x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
      ];

const primaryXAxis = {
    title: 'Years',
    lineStyle: { width: 0 },
    labelFormat: 'y',
    intervalType: 'Years',
    valueType: 'DateTime',
    edgeLabelPlacement: 'Shift'
};

const primaryYAxis = {
    title: 'Percentage (%)',
    minimum: 0, maximum: 20, interval: 2,
    labelFormat: '{value}%'
};

const marker = {
                visible: true, width: 10, height: 10
            };

const title = "Unemployment Rates 1975-2010";

const titleStyle = {
  position: 'Bottom'
    };

provide('chart',  [StepLineSeries, DateTime]);

</script>
<style>
 #container {
   height: 350px;
 }
</style>

Options API (~/src/App.vue)

<template>
    <div id="app">
         <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :titleStyle='titleStyle'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='StepLine' xName='x' yName='y' width=2 name='China' :marker='marker'> </e-series>
                <e-series :dataSource='seriesData'  type='StepLine' xName='x' yName='y1' width=2 name='Australia' :marker='marker'> </e-series>
                <e-series :dataSource='seriesData'  type='StepLine' xName='x' yName='y2' width=2 name='Japan' :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, StepLineSeries, DateTime, 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: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
                { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
                { x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
                { x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
                { x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
                { x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
                { x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
                { x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
              ],
        primaryXAxis: {
            lineStyle: { width: 0 },
            labelFormat: 'y',
            intervalType: 'Years',
            valueType: 'DateTime',
            edgeLabelPlacement: 'Shift'
        },
          primaryYAxis: {
            title: 'Percentage (%)',
            minimum: 0, maximum: 20, interval: 2,
            labelFormat: '{value}%'
        },
       marker: {
                    visible: true, width: 10, height: 10
                },
      title: "Unemployment Rates 1975-2010",
      titleStyle:{
        position: 'Bottom'
      }
    };
  },
  provide: {
    chart: [StepLineSeries, DateTime]
  }
};
</script>
<style>
 #container {
   height: 350px;
 }
</style>

To manually position the title anywhere within the chart, use the x and y coordinates.

Composition API (~/src/App.vue)

<template>
    <div id="app">
         <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :titleStyle='titleStyle'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='StepLine' xName='x' yName='y' width=2 name='China' :marker='marker'> </e-series>
                <e-series :dataSource='seriesData'  type='StepLine' xName='x' yName='y1' width=2 name='Australia' :marker='marker'> </e-series>
                <e-series :dataSource='seriesData'  type='StepLine' xName='x' yName='y2' width=2 name='Japan' :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

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

const seriesData = [
        { x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
        { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
        { x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
        { x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
        { x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
        { x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
        { x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
        { x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
      ];

const primaryXAxis = {
    title: 'Years',
    lineStyle: { width: 0 },
    labelFormat: 'y',
    intervalType: 'Years',
    valueType: 'DateTime',
    edgeLabelPlacement: 'Shift'
};

const primaryYAxis = {
    title: 'Percentage (%)',
    minimum: 0, maximum: 20, interval: 2,
    labelFormat: '{value}%'
};

const marker = {
                visible: true, width: 10, height: 10
            };

const title = "Unemployment Rates 1975-2010";

const titleStyle = {
  position: 'Custom',
  x: 300,
  y: 60
};

provide('chart',  [StepLineSeries, DateTime]);

</script>
<style>
 #container {
   height: 350px;
 }
</style>

Options API (~/src/App.vue)

<template>
    <div id="app">
         <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :titleStyle='titleStyle'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='StepLine' xName='x' yName='y' width=2 name='China' :marker='marker'> </e-series>
                <e-series :dataSource='seriesData'  type='StepLine' xName='x' yName='y1' width=2 name='Australia' :marker='marker'> </e-series>
                <e-series :dataSource='seriesData'  type='StepLine' xName='x' yName='y2' width=2 name='Japan' :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, StepLineSeries, DateTime, 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: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
                { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
                { x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
                { x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
                { x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
                { x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
                { x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
                { x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
              ],
        primaryXAxis: {
            title: 'Years',
            lineStyle: { width: 0 },
            labelFormat: 'y',
            intervalType: 'Years',
            valueType: 'DateTime',
            edgeLabelPlacement: 'Shift'
        },
          primaryYAxis: {
            title: 'Percentage (%)',
            minimum: 0, maximum: 20, interval: 2,
            labelFormat: '{value}%'
        },
       marker: {
                    visible: true, width: 10, height: 10
                },
      title: "Unemployment Rates 1975-2010",
      titleStyle:{
        position: 'Custom',
        x: 300, 
        y: 60
      }
    };
  },
  provide: {
    chart: [StepLineSeries, DateTime]
  }
};
</script>
<style>
 #container {
   height: 350px;
 }
</style>

Title alignment

Align the chart title to the near, center, or far side of the chart using the textAlignment property.

Composition API (~/src/App.vue)

<template>
    <div id="app">
         <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :titleStyle='titleStyle'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='StepLine' xName='x' yName='y' width=2 name='China' :marker='marker'> </e-series>
                <e-series :dataSource='seriesData'  type='StepLine' xName='x' yName='y1' width=2 name='Australia' :marker='marker'> </e-series>
                <e-series :dataSource='seriesData'  type='StepLine' xName='x' yName='y2' width=2 name='Japan' :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

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

const seriesData = [
        { x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
        { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
        { x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
        { x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
        { x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
        { x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
        { x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
        { x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
      ];

const primaryXAxis = {
    title: 'Years',
    lineStyle: { width: 0 },
    labelFormat: 'y',
    intervalType: 'Years',
    valueType: 'DateTime',
    edgeLabelPlacement: 'Shift'
};

const primaryYAxis = {
    title: 'Percentage (%)',
    minimum: 0, maximum: 20, interval: 2,
    labelFormat: '{value}%'
};

const marker = {
                visible: true, width: 10, height: 10
            };

const title = "Unemployment Rates 1975-2010";

const titleStyle = {
  position: 'Bottom',
  textAlignment: 'Far'
};

provide('chart',  [StepLineSeries, DateTime]);

</script>
<style>
 #container {
   height: 350px;
 }
</style>

Options API (~/src/App.vue)

<template>
    <div id="app">
         <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :titleStyle='titleStyle'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='StepLine' xName='x' yName='y' width=2 name='China' :marker='marker'> </e-series>
                <e-series :dataSource='seriesData'  type='StepLine' xName='x' yName='y1' width=2 name='Australia' :marker='marker'> </e-series>
                <e-series :dataSource='seriesData'  type='StepLine' xName='x' yName='y2' width=2 name='Japan' :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, StepLineSeries, DateTime, 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: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
                { x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
                { x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
                { x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
                { x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
                { x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
                { x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
                { x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
              ],
        primaryXAxis: {
            lineStyle: { width: 0 },
            labelFormat: 'y',
            intervalType: 'Years',
            valueType: 'DateTime',
            edgeLabelPlacement: 'Shift'
        },
          primaryYAxis: {
            title: 'Percentage (%)',
            minimum: 0, maximum: 20, interval: 2,
            labelFormat: '{value}%'
        },
       marker: {
                    visible: true, width: 10, height: 10
                },
      title: "Unemployment Rates 1975-2010",
      titleStyle:{
        position: 'Bottom', 
        textAlignment: 'Far'
      }
    };
  },
  provide: {
    chart: [StepLineSeries, DateTime]
  }
};
</script>
<style>
 #container {
   height: 350px;
 }
</style>

Chart subTitle

Chart can be given a subtitle using subTitle property, to show the information about the data plotted.

Composition API (~/src/App.vue)

<template>
    <div id="app">
         <ejs-chart id="container" :title='title' :subTitle='subTitle' :subTitleStyle='subTitleStyle' :primaryXAxis='primaryXAxis' :axisLabelRender='axisLabelRender'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

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

const seriesData = [
         { country: "USA", gold: 50 },
         { country: "China", gold: 40 },
         { country: "Japan", gold: 70 },
         { country: "Australia", gold: 60 },
         { country: "France", gold: 50 },
         { country: "Germany", gold: 40 },
         { country: "Italy", gold: 40 },
         { country: "Sweden", gold: 30 }
          ];

const primaryXAxis = {
    valueType: 'Category',
    title: 'Countries'
};

const title = "Olympic Medals";

const subTitle = 'In the year 2014';

const subTitleStyle = {
    fontFamily: "Arial",
    fontStyle: 'italic',
    fontWeight: 'regular',
    color: "#E27F2D"
};

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

const axisLabelRender = (args) => {
    if(args.text === 'France') {
        args.labelStyle.color = 'Red';
    }
};

</script>
<style>
 #container {
   height: 350px;
 }
</style>

Options API (~/src/App.vue)

<template>
    <div id="app">
         <ejs-chart id="container" :title='title' :subTitle='subTitle' :subTitleStyle='subTitleStyle' :primaryXAxis='primaryXAxis' :axisLabelRender='axisLabelRender'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, ColumnSeries, Category, 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: [
             { country: "USA", gold: 50 },
             { country: "China", gold: 40 },
             { country: "Japan", gold: 70 },
             { country: "Australia", gold: 60 },
             { country: "France", gold: 50 },
             { country: "Germany", gold: 40 },
             { country: "Italy", gold: 40 },
             { country: "Sweden", gold: 30 }
              ],
        primaryXAxis: {
           valueType: 'Category',
           title: 'Countries'
        },
      title: "Olympic Medals",
      subTitle:'In the year 2014',
      subTitleStyle:{
            fontFamily: "Arial",
            fontStyle: 'italic',
            fontWeight: 'regular',
            color: "#E27F2D"
        }
    };
  },
  provide: {
    chart: [ColumnSeries, Category]
  },
   methods: {
      axisLabelRender: function(args) {
           if(args.text === 'France') {
            args.labelStyle.color = 'Red';
        }
   }
   }
};
</script>
<style>
 #container {
   height: 350px;
 }
</style>

Title wrap

Chart can be given a title using title property, to show the information about the data plotted.

Composition API (~/src/App.vue)

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

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

const seriesData = [
      { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
      { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
      { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
      { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
      { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
      { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
           ];

const primaryXAxis = {
    valueType: 'Category',
};

const title = "Unemployment Rates 1975-2010";

const marker = {
    visible: true, width: 10, height: 10
};

const titleStyle = {
    size:'18px', color:'Red', textAlignment: 'Far', textOverflow: 'Wrap'
};

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

</script>
<style>
 #container {
   height: 350px;
 }
</style>

Options API (~/src/App.vue)

<template>
    <div id="app">
         <ejs-chart  id="container" :title='title' :primaryXAxis='primaryXAxis' :titleStyle='titleStyle'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Line' xName='month' yName='sales' name='Gold'
                :marker='marker'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, LineSeries, Category, 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: [
      { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
      { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
      { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
      { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
      { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
      { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
              ],
        primaryXAxis: {
           valueType: 'Category',
        },
      title: "Unemployment Rates 1975-2010",
      marker: {
        visible: true, width: 10, height: 10
     },
     titleStyle:{
             size:'18px', color:'Red', textAlignment: 'Far', textOverflow: 'Wrap'
        }
    };
  },
  provide: {
    chart: [LineSeries, Category]
  }
};
</script>
<style>
 #container {
   height: 350px;
 }
</style>