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>