Axis labels in Vue Chart component

13 Jun 202424 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

Composition API (~/src/App.vue)

<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 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: "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 }
];
const primaryXAxis = {
  valueType: 'Category',
  labelIntersectAction: 'Hide'
};

provide('chart', [ColumnSeries, Category]);
</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<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 { 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: "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

Composition API (~/src/App.vue)

<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 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: "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 }
];
const primaryXAxis = {
  valueType: 'Category',
  labelIntersectAction: 'Rotate45'
};

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

</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<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 { 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: "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

Composition API (~/src/App.vue)

<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 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: "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 }
];
const primaryXAxis = {
  valueType: 'Category',
  labelIntersectAction: 'Rotate90'
};

provide('chart', [ColumnSeries, Category]);
</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<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 { 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: "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.

Composition API (~/src/App.vue)

<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 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',
  labelPosition: 'Inside'
};
const title = "Olympic Medals";

provide('chart', [ColumnSeries, Category]);
</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<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 { 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',
        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 MultiLevelLabel into the provide.

Categories

Using the categories property, you can configure the start, end, text, and maximumTextWidth of multilevel labels.

Composition API (~/src/App.vue)

<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 setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category, MultiLevelLabel } 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',
  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' },
    ]
  }]
};
const title = "Olympic Medals";

provide('chart', [ColumnSeries, Category, MultiLevelLabel]);
</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category, MultiLevelLabel } 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',
        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.

Composition API (~/src/App.vue)

<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 setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category, MultiLevelLabel } 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',
  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'
  }]
};
const title = "Olympic Medals";

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

</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category, MultiLevelLabel } 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',
        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.

Composition API (~/src/App.vue)

<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 setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category, MultiLevelLabel } 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',
  multiLevelLabels: [{
    categories: [{ start: -0.5, end: 3.5, text: 'Half Yearly 1' },
    { start: 3.5, end: 7.5, text: 'Half Yearly 2' }],
    alignment: 'Far'
  }]
};
const title = "Olympic Medals";

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

</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category, MultiLevelLabel } 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',
        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.

Composition API (~/src/App.vue)

<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 setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category, MultiLevelLabel } 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',
  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' }
  }]
};
const title = "Olympic Medals";

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

</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category, MultiLevelLabel } 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',
        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.

Composition API (~/src/App.vue)

<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 setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category, MultiLevelLabel } 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',
  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 },
  }]
};
const title = "Olympic Medals";

provide('chart', [ColumnSeries, Category, MultiLevelLabel]);
</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category, MultiLevelLabel } 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',
        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.

Composition API (~/src/App.vue)

<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 setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, LineSeries, DateTime } from "@syncfusion/ej2-vue-charts";

const 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 }
];
const primaryXAxis = {
  valueType: 'DateTime',
  title: 'Sales Across Years',
  labelFormat: 'yMMM',
  minimum: new Date(2000, 6, 1),
  maximum: new Date(2010, 6, 1),
  edgeLabelPlacement: 'Shift'
};
const title = "Average Sales Comparison";

provide('chart', [LineSeries, DateTime]);

</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, LineSeries, DateTime } 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(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.

Composition API (~/src/App.vue)

<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 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',
  titleStyle: {
    size: '16px', color: 'grey',
    fontFamily: 'Segoe UI', fontWeight: 'bold'
  },
  labelStyle: {
    size: '14px', color: 'blue',
    fontFamily: 'Segoe UI', fontWeight: 'bold'
  }
};
const title = "Olympic Medals";

provide('chart', [ColumnSeries, Category]);
</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<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 { 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',
        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.

Composition API (~/src/App.vue)

<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 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 title = "Olympic Medals";

provide('chart', [ColumnSeries, Category]);
</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<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 { 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'
      },
      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.

Composition API (~/src/App.vue)

<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 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',
  enableTrim: true,
  maximumLabelWidth: '22'
};
const title = "Olympic Medals";

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

const axisLabelRender = (args) => {
  if (args.text === 'France') {
    args.labelStyle.color = 'Red';
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<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 { 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',
        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.

Composition API (~/src/App.vue)

<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 setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, BarSeries, DateTime, Category, DataLabel } from "@syncfusion/ej2-vue-charts";

const 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' }
];
const primaryXAxis = {
  title: 'Country',
  valueType: 'Category',
  majorGridLines: { width: 0 },
  enableTrim: false,
};
const primaryYAxis = {
  minimum: 0,
  maximum: 800,
  // labelFormat: Browser.isDevice ? '{value}' : '{value}M',
  labelStyle: {
    color: 'transparent'
  }
};
const marker = {
  dataLabel: {
    visible: true, position: 'Top', font: {
      fontWeight: '600',
      color: '#ffffff'
    }
  }
};

provide('chart', [BarSeries, DateTime, Category, DataLabel]);
</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<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 { ChartComponent, SeriesCollectionDirective, SeriesDirective, BarSeries, DateTime, Category, DataLabel } from "@syncfusion/ej2-vue-charts";

export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective
  },
  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>