When the axis labels overlap with each other, you can use labelIntersectAction
property in the axis, to place them smartly.
When setting labelIntersectAction as Hide
<template>
<div id="app">
<ejs-chart id="container" :primaryXAxis='primaryXAxis' width='350px'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Internet'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData: [
{ x: "South Korea", y: 39.4 }, { x: "India", y: 61.3 }, { x: "Pakistan", y: 20.4 },
{ x: "Germany", y: 65.1 }, { x: "Australia", y: 15.8 }, { x: "Italy", y: 29.2 },
{ x: "France", y: 44.6 }, { x: "Saudi Arabia", y: 9.7 }, { x: "Russia", y: 40.8 },
{ x: "Mexico", y: 31 }, { x: "Brazil", y: 75.9 }, { x: "China", y: 51.4 }
],
primaryXAxis: {
valueType: 'Category',
labelIntersectAction: 'Hide'
}
};
},
provide: {
chart: [ColumnSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>labelIntersectAction as Rotate45<template>
<div id="app">
<ejs-chart id="container" :primaryXAxis='primaryXAxis' width='350px'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Internet'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData: [
{ x: "South Korea", y: 39.4 }, { x: "India", y: 61.3 }, { x: "Pakistan", y: 20.4 },
{ x: "Germany", y: 65.1 }, { x: "Australia", y: 15.8 }, { x: "Italy", y: 29.2 },
{ x: "France", y: 44.6 }, { x: "Saudi Arabia", y: 9.7 }, { x: "Russia", y: 40.8 },
{ x: "Mexico", y: 31 }, { x: "Brazil", y: 75.9 }, { x: "China", y: 51.4 }
],
primaryXAxis: {
valueType: 'Category',
labelIntersectAction: 'Rotate45'
}
};
},
provide: {
chart: [ColumnSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>labelIntersectAction as Rotate90<template>
<div id="app">
<ejs-chart id="container" :primaryXAxis='primaryXAxis' width='350px'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='x' yName='y' name='Internet'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData: [
{ x: "South Korea", y: 39.4 }, { x: "India", y: 61.3 }, { x: "Pakistan", y: 20.4 },
{ x: "Germany", y: 65.1 }, { x: "Australia", y: 15.8 }, { x: "Italy", y: 29.2 },
{ x: "France", y: 44.6 }, { x: "Saudi Arabia", y: 9.7 }, { x: "Russia", y: 40.8 },
{ x: "Mexico", y: 31 }, { x: "Brazil", y: 75.9 }, { x: "China", y: 51.4 }
],
primaryXAxis: {
valueType: 'Category',
labelIntersectAction: 'Rotate90'
}
};
},
provide: {
chart: [ColumnSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>By default, the axis labels can be placed at outside the axis line and this also can be placed at inside
the axis line using the labelPosition property.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' width='350px'>
<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 Vue from "vue";
import { ChartPlugin, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
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',
labelPosition: 'Inside'
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, Category]
},
};
</script>
<style>
#container {
height: 350px;
}
</style>Any number of levels of labels can be added to an axis using the multiLevelLabels property. This property can be
configured using the following properties:
• Categories • Overflow • Alignment • Text style • Border
Note: To use multilevel label feature, we need to inject MultiLevelLabel into the provide.
Using the categories property, you can configure the start, end, text, and maximumTextWidth of multilevel labels.
<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 Vue from "vue";
import { ChartPlugin, ColumnSeries, Category, MultiLevelLabel } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
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',
multiLevelLabels:[{ categories: [
{
//Start and end values of the multi-level labels accepts number, date and sring values
start: -0.5,
end: 3.5,
//Multi-level label's text.
text: 'Half Yearly 1',
},
{ start: 3.5, end: 7.5, text: 'Half Yearly 2' },
]}]
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, Category, MultiLevelLabel]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Using the overflow property, you can trim or wrap the multilevel labels.
<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 Vue from "vue";
import { ChartPlugin, ColumnSeries, Category, MultiLevelLabel } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
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',
multiLevelLabels:[{
categories: [{start: -0.5, end: 3.5, text: 'Half Yearly 1', maximumTextWidth:50 },
{ start: 3.5, end: 7.5, text: 'Half Yearly 2',maximumTextWidth:50 }],
overflow:'Trim'
}]
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, Category, MultiLevelLabel]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>The alignment property provides option to position the multilevel labels at far, center, or near.
<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 Vue from "vue";
import { ChartPlugin, ColumnSeries, Category, MultiLevelLabel } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
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',
multiLevelLabels:[{
categories: [{start: -0.5, end: 3.5, text: 'Half Yearly 1' },
{ start: 3.5, end: 7.5, text: 'Half Yearly 2' }],
alignment :'Far'
}]
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, Category, MultiLevelLabel]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>The textStyle property of multilevel labels provides options to customize the size, color, fontFamily,
fontWeight, fontStyle, opacity, textAlignment and textOverflow.
<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 Vue from "vue";
import { ChartPlugin, ColumnSeries, Category, MultiLevelLabel } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
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',
multiLevelLabels:[{
categories: [{start: -0.5, end: 3.5, text: 'Half Yearly 1' },
{ start: 3.5, end: 7.5, text: 'Half Yearly 2' }],
textStyle:{size:'18px', color:'Red'}
}]
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, Category, MultiLevelLabel]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Using the border property, you can customize the width, color, and type. The type of border
are Rectangle, Brace, WithoutBorder, WithoutTopBorder, WithoutTopandBottomBorder and CurlyBrace.
<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 Vue from "vue";
import { ChartPlugin, ColumnSeries, Category, MultiLevelLabel } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
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',
multiLevelLabels:[{
categories: [{start: -0.5, end: 3.5, text: 'Half Yearly 1' },
{ start: 3.5, end: 7.5, text: 'Half Yearly 2' }],
border:{type:'Brace', color:'Blue', width: 2},
}]
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, Category, MultiLevelLabel]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Labels with long text at the edges of an axis may appear partially in the chart. To avoid this,
use edgeLabelPlacement property in axis, which moves
the label inside the chart area for better appearance or hides it.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Line' xName='x' yName='y' name='Sales'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, LineSeries, DateTime } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData:[
{ x: new Date(2000, 6, 11), y: 10 }, { x: new Date(2002, 3, 7), y: 30 },
{ x: new Date(2004, 3, 6), y: 15 }, { x: new Date(2006, 3, 30), y: 65 },
{ x: new Date(2008, 3, 8), y: 90 }, { x: new Date(2010, 3, 8), y: 85 }
],
primaryXAxis: {
valueType: 'DateTime',
title: 'Sales Across Years',
labelFormat: 'yMMM',
minimum: new Date(2000, 6, 1),
maximum: new Date(2010, 6, 1),
edgeLabelPlacement: 'Shift'
},
title: "Average Sales Comparison"
};
},
provide: {
chart: [LineSeries, DateTime]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>The labelStyle property of an axis provides options to customize the
color, font-family, font-size and font-weight of the axis labels.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<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 Vue from "vue";
import { ChartPlugin, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
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',
titleStyle: {
size: '16px', color: 'grey',
fontFamily : 'Segoe UI', fontWeight : 'bold'
},
labelStyle: {
size: '14px', color: 'blue',
fontFamily : 'Segoe UI', fontWeight : 'bold'
}
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>You can customize the specific text in the axis labels using axisLabelRender event.
<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 Vue from "vue";
import { ChartPlugin, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
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>You can trim the label using enableTrim property and width of the labels can also be customized using maximumLabelWidth property in the axis, the value maximum label width is 34 by default.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :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 Vue from "vue";
import { ChartPlugin, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
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',
enableTrim: true,
maximumLabelWidth: '22'
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, Category]
},
methods: {
axisLabelRender: function(args) {
if(args.text === 'France') {
args.labelStyle.color = 'Red';
}
}
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Line break feature used to customize the long axis label text into multiple lines by using tag. Refer the below example in that dataSource x value contains long text, it breaks into two lines by using <br> tag.
<template>
<div id="app">
<ejs-chart id="container" :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Bar' xName='x' yName='y' name='Users' :marker='marker' tooltipMappingName='country'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, BarSeries, DateTime, Category, DataLabel} from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData:[
{ x: 'Germany', y: 72, country: 'GER: 72'},
{ x: 'Russia', y: 103.1, country: 'RUS: 103.1'},
{ x: 'Brazil', y: 139.1, country: 'BRZ: 139.1'},
{ x: 'India', y: 462.1, country: 'IND: 462.1'},
{ x: 'China', y: 721.4, country: 'CHN: 721.4'},
{ x: 'United States<br>Of America', y: 286.9, country: 'USA: 286.9'},
{ x: 'Great Britain', y: 115.1, country: 'GBR: 115.1'},
{ x: 'Nigeria', y: 97.2, country: 'NGR: 97.2'}
],
primaryXAxis: {
title: 'Country',
valueType: 'Category',
majorGridLines: { width: 0 },
enableTrim: false,
},
primaryYAxis: {
minimum: 0,
maximum: 800,
// labelFormat: Browser.isDevice ? '{value}' : '{value}M',
labelStyle: {
color: 'transparent'
}
},
marker: {
dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600',
color: '#ffffff'} }
}
};
},
provide: {
chart: [BarSeries, DateTime, Category, DataLabel]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>