Title and subtitle in Vue 3D Circular Chart component

13 Jun 202419 minutes to read

Title

The 3D Circular Chart can be given a title by using the title property to display information about the plotted data.

<template>
  <div id="app">
    <ejs-circularchart3d id="container" :tilt='tilt' :title='title' :legendSettings='legendSettings'>
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series :dataSource='seriesData' xName='x' yName='y'></e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { CircularChart3DComponent as EjsCircularchart3d, CircularChart3DSeriesCollectionDirective as ECircularchart3dSeriesCollection, CircularChart3DSeriesDirective as ECircularchart3dSeries, PieSeries3D, CircularChartLegend3D } from "@syncfusion/ej2-vue-charts";


const seriesData = [
  { x: 'Saudi Arabia', y: 58 },
  { x: 'Persian Gulf', y: 15 },
  { x: 'Canada', y: 13 },
  { x: 'Venezuela', y: 8 },
  { x: 'Mexico', y: 3 },
  { x: 'Russia', y: 2 },
  { x: 'Miscellaneous', y: 1 }
];
const tilt = -45;
const title = 'Oil and other liquid imports in USA';
const legendSettings = {
  visible: false
};

provide('circularchart3d', [PieSeries3D, CircularChartLegend3D]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-circularchart3d id="container" :tilt='tilt' :title='title' :legendSettings='legendSettings'>
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series :dataSource='seriesData' xName='x' yName='y'></e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  </div>
</template>
<script>
import { CircularChart3DComponent, CircularChart3DSeriesCollectionDirective, CircularChart3DSeriesDirective, PieSeries3D, CircularChartLegend3D } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    'ejs-circularchart3d': CircularChart3DComponent,
    'e-circularchart3d-series-collection': CircularChart3DSeriesCollectionDirective,
    'e-circularchart3d-series': CircularChart3DSeriesDirective
  },
  data() {
    return {
      seriesData: [
        { x: 'Saudi Arabia', y: 58 },
        { x: 'Persian Gulf', y: 15 },
        { x: 'Canada', y: 13 },
        { x: 'Venezuela', y: 8 },
        { x: 'Mexico', y: 3 },
        { x: 'Russia', y: 2 },
        { x: 'Miscellaneous', y: 1 }
      ],
      tilt: -45,
      title: 'Oil and other liquid imports in USA',
      legendSettings: {
        visible: false
      }
    };
  },
  provide: {
    circularchart3d: [PieSeries3D, CircularChartLegend3D]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Title customization

The title of the 3D Circular Chart can be customized using the titleStyle property.

<template>
  <div id="app">
    <ejs-circularchart3d id="container" :tilt='tilt' :titleStyle='titleStyle' :title='title'
      :legendSettings='legendSettings'>
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series :dataSource='seriesData' xName='x' yName='y'></e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { CircularChart3DComponent as EjsCircularchart3d, CircularChart3DSeriesCollectionDirective as ECircularchart3dSeriesCollection, CircularChart3DSeriesDirective as ECircularchart3dSeries, PieSeries3D, CircularChartLegend3D } from "@syncfusion/ej2-vue-charts";

const seriesData = [
  { x: 'Saudi Arabia', y: 58 },
  { x: 'Persian Gulf', y: 15 },
  { x: 'Canada', y: 13 },
  { x: 'Venezuela', y: 8 },
  { x: 'Mexico', y: 3 },
  { x: 'Russia', y: 2 },
  { x: 'Miscellaneous', y: 1 }
];
const tilt = -45;
const title = 'Oil and other liquid imports in USA';
const titleStyle = {
  fontFamily: "Arial",
  fontStyle: 'italic',
  fontWeight: 'regular',
  color: "#E27F2D",
  size: '23px'
};
const legendSettings = {
  visible: false
};

provide('circularchart3d', [PieSeries3D, CircularChartLegend3D]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-circularchart3d id="container" :tilt='tilt' :titleStyle='titleStyle' :title='title'
      :legendSettings='legendSettings'>
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series :dataSource='seriesData' xName='x' yName='y'></e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  </div>
</template>
<script>
import { CircularChart3DComponent, CircularChart3DSeriesCollectionDirective, CircularChart3DSeriesDirective, PieSeries3D, CircularChartLegend3D } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    'ejs-circularchart3d': CircularChart3DComponent,
    'e-circularchart3d-series-collection': CircularChart3DSeriesCollectionDirective,
    'e-circularchart3d-series': CircularChart3DSeriesDirective
  },
  data() {
    return {
      seriesData: [
        { x: 'Saudi Arabia', y: 58 },
        { x: 'Persian Gulf', y: 15 },
        { x: 'Canada', y: 13 },
        { x: 'Venezuela', y: 8 },
        { x: 'Mexico', y: 3 },
        { x: 'Russia', y: 2 },
        { x: 'Miscellaneous', y: 1 }
      ],
      tilt: -45,
      title: 'Oil and other liquid imports in USA',
      titleStyle: {
        fontFamily: "Arial",
        fontStyle: 'italic',
        fontWeight: 'regular',
        color: "#E27F2D",
        size: '23px'
      },
      legendSettings: {
        visible: false
      }
    };
  },
  provide: {
    circularchart3d: [PieSeries3D, CircularChartLegend3D]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Subtitle

The 3D Circular Chart can be given a subtitle by using the subTitle property to display information about the plotted data.

<template>
  <div id="app">
    <ejs-circularchart3d id="container" :tilt='tilt' :title='title' :subTitle='subTitle'
      :legendSettings='legendSettings'>
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series :dataSource='seriesData' xName='x' yName='y'></e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { CircularChart3DComponent as EjsCircularchart3d, CircularChart3DSeriesCollectionDirective as ECircularchart3dSeriesCollection, CircularChart3DSeriesDirective as ECircularchart3dSeries, PieSeries3D, CircularChartLegend3D } from "@syncfusion/ej2-vue-charts";

const seriesData = [
  { x: 'Saudi Arabia', y: 58 },
  { x: 'Persian Gulf', y: 15 },
  { x: 'Canada', y: 13 },
  { x: 'Venezuela', y: 8 },
  { x: 'Mexico', y: 3 },
  { x: 'Russia', y: 2 },
  { x: 'Miscellaneous', y: 1 }
];
const tilt = -45;
const title = 'Oil and other liquid imports in USA';
const subTitle = 'In the year 2014 - 2015';
const legendSettings = {
  visible: false
};

provide('circularchart3d', [PieSeries3D, CircularChartLegend3D]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-circularchart3d id="container" :tilt='tilt' :title='title' :subTitle='subTitle'
      :legendSettings='legendSettings'>
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series :dataSource='seriesData' xName='x' yName='y'></e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  </div>
</template>
<script>
import { CircularChart3DComponent, CircularChart3DSeriesCollectionDirective, CircularChart3DSeriesDirective, PieSeries3D, CircularChartLegend3D } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    'ejs-circularchart3d': CircularChart3DComponent,
    'e-circularchart3d-series-collection': CircularChart3DSeriesCollectionDirective,
    'e-circularchart3d-series': CircularChart3DSeriesDirective
  },
  data() {
    return {
      seriesData: [
        { x: 'Saudi Arabia', y: 58 },
        { x: 'Persian Gulf', y: 15 },
        { x: 'Canada', y: 13 },
        { x: 'Venezuela', y: 8 },
        { x: 'Mexico', y: 3 },
        { x: 'Russia', y: 2 },
        { x: 'Miscellaneous', y: 1 }
      ],
      tilt: -45,
      title: 'Oil and other liquid imports in USA',
      subTitle: 'In the year 2014 - 2015',
      legendSettings: {
        visible: false
      }
    };
  },
  provide: {
    circularchart3d: [PieSeries3D, CircularChartLegend3D]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Subtitle customization

The subtitle of the 3D Circular Chart can be customized using the subTitleStyle property.

<template>
  <div id="app">
    <ejs-circularchart3d id="container" :tilt='tilt' :subTitle='subTitle' :subTitleStyle='subTitleStyle' :title='title'
      :legendSettings='legendSettings'>
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series :dataSource='seriesData' xName='x' yName='y'></e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { CircularChart3DComponent as EjsCircularchart3d, CircularChart3DSeriesCollectionDirective as ECircularchart3dSeriesCollection, CircularChart3DSeriesDirective as ECircularchart3dSeries, PieSeries3D, CircularChartLegend3D } from "@syncfusion/ej2-vue-charts";


const seriesData = [
  { x: 'Saudi Arabia', y: 58 },
  { x: 'Persian Gulf', y: 15 },
  { x: 'Canada', y: 13 },
  { x: 'Venezuela', y: 8 },
  { x: 'Mexico', y: 3 },
  { x: 'Russia', y: 2 },
  { x: 'Miscellaneous', y: 1 }
];
const tilt = -45;
const title = 'Oil and other liquid imports in USA';
const subTitle = 'In the year 2014 - 2015';
const subTitleStyle = {
  fontFamily: "Arial",
  fontStyle: 'italic',
  fontWeight: 'regular',
  color: "#E27F2D",
  size: '13px'
};
const legendSettings = {
  visible: false
};

provide('circularchart3d', [PieSeries3D, CircularChartLegend3D]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-circularchart3d id="container" :tilt='tilt' :subTitle='subTitle' :subTitleStyle='subTitleStyle' :title='title'
      :legendSettings='legendSettings'>
      <e-circularchart3d-series-collection>
        <e-circularchart3d-series :dataSource='seriesData' xName='x' yName='y'></e-circularchart3d-series>
      </e-circularchart3d-series-collection>
    </ejs-circularchart3d>
  </div>
</template>
<script>
import { CircularChart3DComponent, CircularChart3DSeriesCollectionDirective, CircularChart3DSeriesDirective, PieSeries3D, CircularChartLegend3D } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    'ejs-circularchart3d': CircularChart3DComponent,
    'e-circularchart3d-series-collection': CircularChart3DSeriesCollectionDirective,
    'e-circularchart3d-series': CircularChart3DSeriesDirective
  },
  data() {
    return {
      seriesData: [
        { x: 'Saudi Arabia', y: 58 },
        { x: 'Persian Gulf', y: 15 },
        { x: 'Canada', y: 13 },
        { x: 'Venezuela', y: 8 },
        { x: 'Mexico', y: 3 },
        { x: 'Russia', y: 2 },
        { x: 'Miscellaneous', y: 1 }
      ],
      tilt: -45,
      title: 'Oil and other liquid imports in USA',
      subTitle: 'In the year 2014 - 2015',
      subTitleStyle: {
        fontFamily: "Arial",
        fontStyle: 'italic',
        fontWeight: 'regular',
        color: "#E27F2D",
        size: '13px'
      },
      legendSettings: {
        visible: false
      }
    };
  },
  provide: {
    circularchart3d: [PieSeries3D, CircularChartLegend3D]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>