Title and sub title in Vue Accumulation chart component

7 Apr 202524 minutes to read

Title

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

<template>
    <div id="app">
         <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis'>
            <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";

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

</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='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"
    };
  },
  provide: {
    chart: [ColumnSeries, Category]
  },
};
</script>
<style>
 #container {
   height: 350px;
 }
</style>

Title customization

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

<template>
    <div id="app">
         <ejs-chart id="container" :title='title' :titleStyle='titleStyle' :primaryXAxis='primaryXAxis'>
            <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 titleStyle = {
    fontFamily: "Arial",
    fontStyle: 'italic',
    fontWeight: 'regular',
    color: "#E27F2D",
    size: '23px'
};

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

</script>
<style>
 #container {
   height: 350px;
 }
</style>
<template>
    <div id="app">
         <ejs-chart id="container" :title='title' :titleStyle='titleStyle' :primaryXAxis='primaryXAxis'>
            <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",
      titleStyle:{
            fontFamily: "Arial",
            fontStyle: 'italic',
            fontWeight: 'regular',
            color: "#E27F2D",
            size: '23px'
        }
    };
  },
  provide: {
    chart: [ColumnSeries, Category]
  },
};
</script>
<style>
 #container {
   height: 350px;
 }
</style>

Position

The position property customizes the placement of the accumulation chart title. It supports the following options: Right, Left, Bottom, Top, and Custom. The custom option allows you to position the title anywhere on the chart using x and y coordinates, providing flexible title alignment based on layout requirements.

<template>
    <div id="app">
         <ejs-chart id="container" :title='title' :titleStyle='titleStyle' :subTitle = 'subTitle' :primaryXAxis='primaryXAxis'>
            <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 - 2015";
const titleStyle = {
    fontFamily: "Arial",
    fontStyle: 'italic',
    fontWeight: 'regular',
    color: "#E27F2D",
    size: '23px',
    position: 'Bottom'
};

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

</script>
<style>
 #container {
   height: 350px;
 }
</style>
<template>
    <div id="app">
         <ejs-chart id="container" :title='title' :titleStyle='titleStyle' :subTitle = 'subTitle' :primaryXAxis='primaryXAxis'>
            <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 - 2015',
      titleStyle: {
        fontFamily: "Arial",
        fontStyle: 'italic',
        fontWeight: 'regular',
        color: "#E27F2D",
        size: '23px',
        position: 'Bottom'
      }
    };
  },
  provide: {
    chart: [ColumnSeries, Category]
  },
};
</script>
<style>
 #container {
   height: 350px;
 }
</style>

SubTitle

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

<template>
    <div id="app">
         <ejs-chart id="container" :title='title' :subTitle='subTitle' :primaryXAxis='primaryXAxis'>
            <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 of 2014';

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

</script>
<style>
 #container {
   height: 350px;
 }
</style>
<template>
    <div id="app">
         <ejs-chart id="container" :title='title' :subTitle='subTitle' :primaryXAxis='primaryXAxis'>
            <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 of 2014'
    };
  },
  provide: {
    chart: [ColumnSeries, Category]
  },
};
</script>
<style>
 #container {
   height: 350px;
 }
</style>

SubTitle Customization

Accumulation Chart can be customizing a subtitle using subTitleStyle property.

<template>
    <div id="app">
         <ejs-chart id="container" :title='title' :subTitle='subTitle' :subTitleStyle='subTitleStyle' :primaryXAxis='primaryXAxis'>
            <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 of 2014';

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

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

</script>
<style>
 #container {
   height: 350px;
 }
</style>
<template>
    <div id="app">
         <ejs-chart id="container" :title='title' :subTitle='subTitle' :subTitleStyle='subTitleStyle' :primaryXAxis='primaryXAxis'>
            <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 of 2014',
      subTitleStyle:{
            fontFamily: "Arial",
            fontStyle: 'italic',
            fontWeight: 'regular',
            color: "#E27F2D"
        }
    };
  },
  provide: {
    chart: [ColumnSeries, Category]
  },
};
</script>
<style>
 #container {
   height: 350px;
 }
</style>

Position

The position property customizes the placement of the accumulation chart subtitle. It supports the following options: Right, Left, Bottom, Top, and Custom. The custom option allows you to position the subtitle anywhere on the chart using x and y coordinates, providing flexible subtitle alignment based on layout requirements.

<template>
    <div id="app">
         <ejs-chart id="container" :title='title' :titleStyle='titleStyle' :subTitle = 'subTitle' :primaryXAxis='primaryXAxis'>
            <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 - 2015";
const titleStyle = {
    fontFamily: "Arial",
    fontStyle: 'italic',
    fontWeight: 'regular',
    color: "#E27F2D",
    size: '23px',
    position: 'Bottom'
};

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

</script>
<style>
 #container {
   height: 350px;
 }
</style>
<template>
    <div id="app">
         <ejs-chart id="container" :title='title' :titleStyle='titleStyle' :subTitle = 'subTitle' :primaryXAxis='primaryXAxis'>
            <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 - 2015',
      titleStyle: {
        fontFamily: "Arial",
        fontStyle: 'italic',
        fontWeight: 'regular',
        color: "#E27F2D",
        size: '23px',
        position: 'Bottom'
      }
    };
  },
  provide: {
    chart: [ColumnSeries, Category]
  },
};
</script>
<style>
 #container {
   height: 350px;
 }
</style>