Axis labels in Vue Chart component
3 Mar 202324 minutes to read
Smart Axis Labels
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>When setting 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>When setting 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>Axis Labels Positioning
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>Multilevel Labels
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
MultiLevelLabelinto theprovide.
Categories
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>Overflow
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>Alignment
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>Text customization
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>Border customization
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>Edge Label Placement
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>Labels Customization
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>Customizing Specific Point
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>Trim using maximum label width
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 support
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>