Chart appearance in Vue Chart component

21 Dec 202424 minutes to read

Custom color palette

You can customize the default color of series or points by providing a custom color palette of your choice by
using the palettes property.

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
      :palettes='palettes'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
        <e-series :dataSource='seriesData' type='Column' xName='country' yName='silver' name='Silver'> </e-series>
        <e-series :dataSource='seriesData' type='Column' xName='country' yName='bronze' name='Bronze'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";

const seriesData = [
  { country: "USA", gold: 50, silver: 70, bronze: 45 },
  { country: "China", gold: 40, silver: 60, bronze: 55 },
  { country: "Japan", gold: 70, silver: 60, bronze: 50 },
  { country: "Australia", gold: 60, silver: 56, bronze: 40 },
  { country: "France", gold: 50, silver: 45, bronze: 35 },
  { country: "Germany", gold: 40, silver: 30, bronze: 22 },
  { country: "Italy", gold: 40, silver: 35, bronze: 37 },
  { country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];
const primaryXAxis = {
  valueType: 'Category',
  title: 'Countries'
};
const primaryYAxis =
{
  minimum: 0, maximum: 80,
  interval: 20, title: 'Medals',
  labelFormat: '${value}K'
};
const palettes = ["#E94649", "#F6B53F", "#6FAAB0", "#C4C24A"];
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' :primaryYAxis='primaryYAxis'
      :palettes='palettes'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
        <e-series :dataSource='seriesData' type='Column' xName='country' yName='silver' name='Silver'> </e-series>
        <e-series :dataSource='seriesData' type='Column' xName='country' yName='bronze' name='Bronze'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category } 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, silver: 70, bronze: 45 },
        { country: "China", gold: 40, silver: 60, bronze: 55 },
        { country: "Japan", gold: 70, silver: 60, bronze: 50 },
        { country: "Australia", gold: 60, silver: 56, bronze: 40 },
        { country: "France", gold: 50, silver: 45, bronze: 35 },
        { country: "Germany", gold: 40, silver: 30, bronze: 22 },
        { country: "Italy", gold: 40, silver: 35, bronze: 37 },
        { country: "Sweden", gold: 30, silver: 25, bronze: 27 }
      ],
      primaryXAxis: {
        valueType: 'Category',
        title: 'Countries'
      },
      primaryYAxis:
      {
        minimum: 0, maximum: 80,
        interval: 20, title: 'Medals',
        labelFormat: '${value}K'
      },
      palettes: ["#E94649", "#F6B53F", "#6FAAB0", "#C4C24A"],
      title: "Olympic Medals"
    };
  },
  provide: {
    chart: [ColumnSeries, Category]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Data point customization

The color of individual data point or data points within a range can be customized using the options below.

Point color mapping

You can bind the color for the points from dataSource for the series using pointColorMapping property.

<template>
  <div id="app">
    <ejs-chart id='chartcontainer' :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
      :chartArea='chartArea'>
      <e-series-collection>
        <e-series :pointColorMapping='pointColorMapping' :dataSource='seriesData' type='Column' xName='x' yName='y'
          :cornerRadius='cornerRadius'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";

const seriesData = [
  { x: 'Jan', y: 6.96, color: "red" },
  { x: 'Feb', y: 8.9, color: "blue" },
  { x: 'Mar', y: 12, color: "orange" },
  { x: 'Apr', y: 17.5, color: "aqua" },
  { x: 'May', y: 22.1, color: "grey" }
];
const primaryXAxis = {
  valueType: 'Category', majorGridLines: { width: 0 }
};
const pointColorMapping = "color";
const primaryYAxis = {
  lineStyle: { width: 0 },
  majorTickLines: { width: 0 },
  minorTickLines: { width: 0 },
  labelFormat: '{value}°C',
};
const chartArea = {
  border: {
    width: 0
  }
};
const title = "USA CLIMATE - WEATHER BY MONTH";
const cornerRadius = {
  topLeft: 10, topRight: 10
};

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

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id='chartcontainer' :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
      :chartArea='chartArea'>
      <e-series-collection>
        <e-series :pointColorMapping='pointColorMapping' :dataSource='seriesData' type='Column' xName='x' yName='y'
          :cornerRadius='cornerRadius'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category } 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: 6.96, color: "red" },
        { x: 'Feb', y: 8.9, color: "blue" },
        { x: 'Mar', y: 12, color: "orange" },
        { x: 'Apr', y: 17.5, color: "aqua" },
        { x: 'May', y: 22.1, color: "grey" }
      ],
      primaryXAxis: {
        valueType: 'Category', majorGridLines: { width: 0 }
      },
      pointColorMapping: "color",
      primaryYAxis: {
        lineStyle: { width: 0 },
        majorTickLines: { width: 0 },
        minorTickLines: { width: 0 },
        labelFormat: '{value}°C',
      },
      chartArea: {
        border: {
          width: 0
        }
      },
      title: "USA CLIMATE - WEATHER BY MONTH",
      cornerRadius: {
        topLeft: 10, topRight: 10
      }
    };
  },
  provide: {
    chart: [ColumnSeries, Category]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Range color mapping

You can differentiate data points based on their y values using rangeColorSettings in the chart.

<template>
  <div id="app">
    <ejs-chart id='chartcontainer' :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
      :chartArea='chartArea' :legendSettings='legendSettings' :selectionMode="selectionMode">
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='USA' :animation='animation'
          :cornerRadius='cornerRadius'> </e-series>
      </e-series-collection>
      <e-rangecolorsettings>
        <e-rangecolorsetting label="1°C to 10°C" start="1" end="10" :colors="colors1"></e-rangecolorsetting>
        <e-rangecolorsetting label="11°C to 20°C" start="11" end="20" :colors="colors2"></e-rangecolorsetting>
        <e-rangecolorsetting label="21°C to 30°C" start="21" end="30" :colors="colors3"></e-rangecolorsetting>
      </e-rangecolorsettings>
    </ejs-chart>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, RangecolorsettingsDirective as ERangecolorsettings, RangecolorsettingDirective as ERangecolorsetting, ColumnSeries, Category, Legend, Selection } from "@syncfusion/ej2-vue-charts";

const seriesData = [
  { x: "Jan", y: 6.96 },
  { x: "Feb", y: 8.9 },
  { x: "Mar", y: 12 },
  { x: "Apr", y: 17.5 },
  { x: "May", y: 22.1 },
  { x: "June", y: 25 },
  { x: "July", y: 29.4 },
  { x: "Aug", y: 29.6 },
  { x: "Sep", y: 25.8 },
  { x: "Oct", y: 21.1 },
  { x: "Nov", y: 15.5 },
  { x: "Dec", y: 9.9 }
];
const primaryXAxis = {
  valueType: 'Category', majorGridLines: { width: 0 }
};
const primaryYAxis = {
  lineStyle: { width: 0 },
  majorTickLines: { width: 0 },
  minorTickLines: { width: 0 },
  labelFormat: '{value}°C',
};
const chartArea = {
  border: {
    width: 0
  }
};
const title = "USA CLIMATE - WEATHER BY MONTH";
const legendSettings = {
  mode: 'Range',
  visible: true,
  toggleVisibility: false,
};
const selectionMode = 'Point';
const animation = {
  enable: false
};
const cornerRadius = {
  topLeft: 10, topRight: 10
};
const colors1 = ["#F9D422"];
const colors2 = ["#F28F3F"];
const colors3 = ["#E94F53"];

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

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id='chartcontainer' :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
      :chartArea='chartArea' :legendSettings='legendSettings' :selectionMode="selectionMode">
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='USA' :animation='animation'
          :cornerRadius='cornerRadius'> </e-series>
      </e-series-collection>
      <e-rangecolorsettings>
        <e-rangecolorsetting label="1°C to 10°C" start="1" end="10" :colors="colors1"></e-rangecolorsetting>
        <e-rangecolorsetting label="11°C to 20°C" start="11" end="20" :colors="colors2"></e-rangecolorsetting>
        <e-rangecolorsetting label="21°C to 30°C" start="21" end="30" :colors="colors3"></e-rangecolorsetting>
      </e-rangecolorsettings>
    </ejs-chart>
  </div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, RangecolorsettingsDirective, RangecolorsettingDirective, ColumnSeries, Category, Legend, Selection } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective,
    "e-rangecolorsettings": RangecolorsettingsDirective,
    "e-rangecolorsetting": RangecolorsettingDirective,
  },
  data() {
    return {
      seriesData: [
        { x: "Jan", y: 6.96 },
        { x: "Feb", y: 8.9 },
        { x: "Mar", y: 12 },
        { x: "Apr", y: 17.5 },
        { x: "May", y: 22.1 },
        { x: "June", y: 25 },
        { x: "July", y: 29.4 },
        { x: "Aug", y: 29.6 },
        { x: "Sep", y: 25.8 },
        { x: "Oct", y: 21.1 },
        { x: "Nov", y: 15.5 },
        { x: "Dec", y: 9.9 }
      ],
      primaryXAxis: {
        valueType: 'Category', majorGridLines: { width: 0 }
      },
      primaryYAxis: {
        lineStyle: { width: 0 },
        majorTickLines: { width: 0 },
        minorTickLines: { width: 0 },
        labelFormat: '{value}°C',
      },
      chartArea: {
        border: {
          width: 0
        }
      },
      title: "USA CLIMATE - WEATHER BY MONTH",
      legendSettings: {
        mode: 'Range',
        visible: true,
        toggleVisibility: false,
      },
      selectionMode: 'Point',
      animation: {
        enable: false
      },
      cornerRadius: {
        topLeft: 10, topRight: 10
      },
      colors1: ["#F9D422"],
      colors2: ["#F28F3F"],
      colors3: ["#E94F53"]
    };
  },
  provide: {
    chart: [ColumnSeries, Category, Legend, Selection]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Point level customization

Marker, datalabel and fill color of each data point can be customized with
pointRender and
textRender event.

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
      :pointRender='pointRender'>
      <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, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category } 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 primaryYAxis =
{
  minimum: 0, maximum: 80,
  interval: 20, title: 'Medals'
};
const title = "Olympic Medals";

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

const pointRender = (args) => {
  var seriesColor = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883',
    '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb', '#ea7a57'];
  args.fill = seriesColor[args.point.index];
};


</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
      :pointRender='pointRender'>
      <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, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category } 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'
      },
      primaryYAxis:
      {
        minimum: 0, maximum: 80,
        interval: 20, title: 'Medals'
      },
      title: "Olympic Medals"
    };
  },
  provide: {
    chart: [ColumnSeries, Category]
  },
  methods: {
    pointRender: function (args) {
      var seriesColor = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883',
        '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb', '#ea7a57'];
      args.fill = seriesColor[args.point.index];
    },
  },
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Chart area customization

Customize the chart background

Using background and border properties, you can change the background color and border of the chart.

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
      background='skyblue' :border='border'>
      <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, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category } 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 primaryYAxis = {
  minimum: 0, maximum: 80,
  interval: 20, title: 'Medals'
};
const border = { color: "#FF0000", width: 2 };
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' :primaryYAxis='primaryYAxis'
      background='skyblue' :border='border'>
      <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, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category } 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'
      },
      primaryYAxis: {
        minimum: 0, maximum: 80,
        interval: 20, title: 'Medals'
      },
      border: { color: "#FF0000", width: 2 },
      title: "Olympic Medals"
    };
  },
  provide: {
    chart: [ColumnSeries, Category]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Chart margin

You can set margin for chart from its container through margin property.

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
      background='skyblue' :border='border' :margin='margin'>
      <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, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category } 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 primaryYAxis =
{
  minimum: 0, maximum: 80,
  interval: 20, title: 'Medals'
};
const border = { color: "#FF0000", width: 2 };
const margin = { left: 40, right: 40, top: 40, bottom: 40 };
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' :primaryYAxis='primaryYAxis'
      background='skyblue' :border='border' :margin='margin'>
      <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, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category } 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'
      },
      primaryYAxis:
      {
        minimum: 0, maximum: 80,
        interval: 20, title: 'Medals'
      },
      border: { color: "#FF0000", width: 2 },
      margin: { left: 40, right: 40, top: 40, bottom: 40 },
      title: "Olympic Medals"
    };
  },
  provide: {
    chart: [ColumnSeries, Category]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Chart area customization

Using background and border properties, you can change the background color and border of the chart area. Width for the chart area can be customized using width property.

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
      background='skyblue' :chartArea='chartArea'>
      <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, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category } 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 primaryYAxis = {
  minimum: 0, maximum: 80,
  interval: 20, title: 'Medals'
};
const chartArea = {
  //background for Chart area
  background: "skyblue",
  width: '90%'
};
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' :primaryYAxis='primaryYAxis' background='skyblue' :chartArea='chartArea'>
            <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, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category } 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'
        },
          primaryYAxis: {
            minimum: 0, maximum: 80,
            interval: 20, title: 'Medals'
        },
      chartArea: {
        //background for Chart area
        background: "skyblue",
        width: '90%'
    },
      title: "Olympic Medals"
    };
  },
  provide: {
    chart: [ColumnSeries, Category]
  }
};
</script>
<style>
 #container {
   height: 350px;
 }

</style>

Chart area margin

You can customize the space between the chart area from its chart container through margin property.

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

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category } 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 primaryYAxis = {
  minimum: 0, maximum: 80,
  interval: 20, title: 'Medals'
};
const border = {
  width: 2, color: 'grey'
};
const chartArea = {
  border: { width: 2, color: 'blue' },
  margin: {
          left: 50,
          right: 50,
          top: 50,
          bottom: 50
        }
};
const title = "Olympic Medals";
const chartBorder = { width: 2, color: 'green' };
provide('chart', [ColumnSeries, Category]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
    <div id="app">
         <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :border='chartBorder' :chartArea='chartArea'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' :border='border'> </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category } 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 }
              ],
      border: {
        width: 2, color: 'grey'
      },
        primaryXAxis: {
           valueType: 'Category',
           title: 'Countries'
        },
          primaryYAxis: {
            minimum: 0, maximum: 80,
            interval: 20, title: 'Medals'
        },
      chartBorder: { width: 2, color: 'green' },
      chartArea: {
        border: { width: 2, color: 'blue' },
        margin: {
          left: 50,
          right: 50,
          top: 50,
          bottom: 50
        }
    },
      title: "Olympic Medals"
    };
  },
  provide: {
    chart: [ColumnSeries, Category]
  }
};
</script>
<style>
 #container {
   height: 350px;
 }

</style>

Animation

You can customize animation for a particular series using animation property. You can enable or disable animation of the series using enable property, duration specifies the duration of an animation and delay allows us to start the animation at desire time.

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

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category } 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 primaryYAxis = {
  minimum: 0, maximum: 80,
  interval: 20, title: 'Medals'
};
const border = { width: 2, color: 'grey' };
//Animation for chart series
const animation = {
  enable: true,
  duration: 2000,
  delay: 200
};
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' :primaryYAxis='primaryYAxis'
      background='skyblue'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold' :border='border'
          :animation='animation'> </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>

import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category } 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'
      },
      primaryYAxis: {
        minimum: 0, maximum: 80,
        interval: 20, title: 'Medals'
      },
      border: { width: 2, color: 'grey' },
      //Animation for chart series
      animation: {
        enable: true,
        duration: 2000,
        delay: 200
      },
      title: "Olympic Medals"
    };
  },
  provide: {
    chart: [ColumnSeries, Category]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Fluid animation

Fluid animation used to animate series with updated dataSource continues animation rather than animation whole series. You can customize animation for a particular series using animate method.

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

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

const chart=ref(null);
let count = 0;
let datasource1 = [
{ x: 'Egg', y: 206 },
{ x: 'Fish', y: 123 },
{ x: 'Misc', y: 48 },
{ x: 'Tea', y: 240 },
{ x: 'Fruit', y: 170 }
];
let datasource2 = [
{ x: 'Egg', y: 86 },
{ x: 'Fish', y: 173 },
{ x: 'Misc', y: 188 },
{ x: 'Tea', y: 109 },
{ x: 'Fruit', y: 100 }

];
let datasource3 = [
{ x: 'Egg', y: 156 },
{ x: 'Fish', y: 33 },
{ x: 'Misc', y: 260 },
{ x: 'Tea', y: 200 },
{ x: 'Fruit', y: 30 }

];

   const seriesData= [
                  { x: 'Egg', y: 106 },
                  { x: "Fish", y: 103 },
                  { x: "Misc", y: 198 },
                  { x: "Tea", y: 189 },
                  { x: "Fruit", y: 250 }
            ];
            const  primaryXAxis= {
            valueType: "Category",
            interval: 1,
            majorGridLines: { width: 0 },
            tickPosition: "Inside",
            labelPosition: "Inside",
            labelStyle: { color: "#ffffff" }
      };
      const  primaryYAxis= {
          minimum: 0,
          maximum: 300,
          interval: 50,
          majorGridLines: { width: 0 },
          majorTickLines: { width: 0 },
          lineStyle: { width: 0 },
          labelStyle: { color: "transparent" }
      };
      const legendSettings={ visible: false },
        tooltip= {
          enable: false
      };
      const cornerRadius= {
        bottomLeft: 10,
        bottomRight: 10,
        topLeft: 10,
        topRight: 10
      };
      const marker= {
      dataLabel: {
        visible: true,
        position: "Top",
      }
      };
      const chartArea= { border: { width: 0 } };
      const title= "Trade in Food Groups";

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

  const loaded=()=> {
    chart.value.ej2Instances.loaded = null;
    let columninterval = setInterval(() => {
      if (document.getElementById('container')) {
      if (count === 0) {
        chart.value.ej2Instances.series[0].dataSource = datasource1;
        chart.value.ej2Instances.animate();
        count++;
      } else if (count === 1) {
        chart.value.ej2Instances.series[0].dataSource = datasource2;
        chart.value.ej2Instances.animate();
        count++;
      } else if (count === 2) {
        chart.value.ej2Instances.series[0].dataSource = datasource3;
        chart.value.ej2Instances.animate();
        count = 0;
      }
      } else {
        clearInterval(columninterval)
      }
    }, 2000);
  }


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

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


let count = 0;
let datasource1 = [
  { x: 'Egg', y: 206 },
  { x: 'Fish', y: 123 },
  { x: 'Misc', y: 48 },
  { x: 'Tea', y: 240 },
  { x: 'Fruit', y: 170 }
];
let datasource2 = [
 { x: 'Egg', y: 86 },
 { x: 'Fish', y: 173 },
 { x: 'Misc', y: 188 },
 { x: 'Tea', y: 109 },
 { x: 'Fruit', y: 100 }

];
let datasource3 = [
  { x: 'Egg', y: 156 },
  { x: 'Fish', y: 33 },
  { x: 'Misc', y: 260 },
  { x: 'Tea', y: 200 },
 { x: 'Fruit', y: 30 }

];
export default {
name: "App",
components: {
    'ejs-chart': ChartComponent,
    'e-series-collection': SeriesCollectionDirective,
    'e-series': SeriesDirective
  },
  data() {
    return {
      seriesData: [
                    { x: 'Egg', y: 106 },
                    { x: "Fish", y: 103 },
                    { x: "Misc", y: 198 },
                    { x: "Tea", y: 189 },
                    { x: "Fruit", y: 250 }
              ],
        primaryXAxis: {
              valueType: "Category",
              interval: 1,
              majorGridLines: { width: 0 },
              tickPosition: "Inside",
              labelPosition: "Inside",
              labelStyle: { color: "#ffffff" }
        },
          primaryYAxis: {
            minimum: 0,
            maximum: 300,
            interval: 50,
            majorGridLines: { width: 0 },
            majorTickLines: { width: 0 },
            lineStyle: { width: 0 },
            labelStyle: { color: "transparent" }
        },
          legendSettings: { visible: false },
          tooltip: {
            enable: false
        },
        cornerRadius: {
          bottomLeft: 10,
          bottomRight: 10,
          topLeft: 10,
          topRight: 10
        },
        marker: {
        dataLabel: {
          visible: true,
          position: "Top",
        }
        },
         chartArea: { border: { width: 0 } },
        title: "Trade in Food Groups"
    };
  },
  provide: {
    chart: [ColumnSeries, Legend, DataLabel, Category, Tooltip]
  },
  methods: {
     loaded: function(args) {
      this.$refs.chart.ej2Instances.loaded = null;
      let columninterval = setInterval(() => {
        if (document.getElementById('container')) {
        if (count === 0) {
          this.$refs.chart.ej2Instances.series[0].dataSource = datasource1;
          this.$refs.chart.ej2Instances.animate();
          count++;
        } else if (count === 1) {
          this.$refs.chart.ej2Instances.series[0].dataSource = datasource2;
          this.$refs.chart.ej2Instances.animate();
          count++;
        } else if (count === 2) {
          this.$refs.chart.ej2Instances.series[0].dataSource = datasource3;
          this.$refs.chart.ej2Instances.animate();
          count = 0;
        }
        } else {
          clearInterval(columninterval)
        }
      }, 2000);
    }
  }
};
</script>
<style>
 #container {
   height: 350px;
 }
</style>

Chart title

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

By using the position property in titleStyle, you can position the title at left, right, top or bottom of the chart. The title is positioned at the top of the chart, by default.

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

  • The custom option helps you to position the title anywhere in the chart using x and y coordinates.
<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>
<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

You can align the title to the near, far, or center of the chart using the textAlignment property.

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

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

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