Axis labels in Vue 3D Chart component

13 Jun 202424 minutes to read

Axis labels are the labels that are positioned adjacent to the y-axis and beneath the x-axis. It provides descriptive information about the axis.

Smart axis labels

When the axis labels overlap with each other, labelIntersectAction property in the axis can be used to place them smartly.

Case 1: When setting labelIntersectAction as Hide.

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis">
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource="seriesData" type="Column" xName="x" yName="y" name="Sales">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>
<script setup>
import { provide } from "vue";
import {
  Chart3DComponent as EjsChart3d,
  Chart3DSeriesCollectionDirective as EChart3dSeriesCollection,
  Chart3DSeriesDirective as EChart3dSeries,
  ColumnSeries3D,
  Category3D
} 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: 'United Kingdom', 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',
  title: 'Countries',
  labelIntersectAction: 'Hide'
};
const primaryYAxis = {
  interval: 10
};

provide('chart3d', [ColumnSeries3D, Category3D]);
</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis">
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource="seriesData" type="Column" xName="x" yName="y" name="Sales">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>
<script>
import {
  Chart3DComponent,
  Chart3DSeriesCollectionDirective,
  Chart3DSeriesDirective,
  ColumnSeries3D,
  Category3D
} from '@syncfusion/ej2-vue-charts';

export default {
  name: "App",
  components: {
    'ejs-chart3d': Chart3DComponent,
    'e-chart3d-series-collection': Chart3DSeriesCollectionDirective,
    'e-chart3d-series': Chart3DSeriesDirective
  },
  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: 'United Kingdom', 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',
        title: 'Countries',
        labelIntersectAction: 'Hide'
      },
      primaryYAxis: {
        interval: 10,
      },
    };
  },
  provide: {
    chart3d: [ColumnSeries3D, Category3D]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Case 2: When setting labelIntersectAction as Rotate45.

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis">
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource="seriesData" type="Column" xName="x" yName="y" name="Sales">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>
<script setup>
import { provide } from "vue";
import {
  Chart3DComponent as EjsChart3d,
  Chart3DSeriesCollectionDirective as EChart3dSeriesCollection,
  Chart3DSeriesDirective as EChart3dSeries,
  ColumnSeries3D,
  Category3D,
} 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: 'United Kingdom', 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',
  title: 'Countries',
  labelIntersectAction: 'Rotate45'
};
const primaryYAxis = {
  interval: 10
};

provide('chart3d', [ColumnSeries3D, Category3D]);
</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis">
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource="seriesData" type="Column" xName="x" yName="y" name="Sales">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>
<script>
import {
  Chart3DComponent,
  Chart3DSeriesCollectionDirective,
  Chart3DSeriesDirective,
  ColumnSeries3D,
  Category3D
} from '@syncfusion/ej2-vue-charts';

export default {
  name: "App",
  components: {
    'ejs-chart3d': Chart3DComponent,
    'e-chart3d-series-collection': Chart3DSeriesCollectionDirective,
    'e-chart3d-series': Chart3DSeriesDirective
  },
  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: 'United Kingdom', 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',
        title: 'Countries',
        labelIntersectAction: 'Rotate45'
      },
      primaryYAxis: {
        interval: 10,
      },
    };
  },
  provide: {
    chart3d: [ColumnSeries3D, Category3D]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Case 3: When setting labelIntersectAction as Rotate90.

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis">
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource="seriesData" type="Column" xName="x" yName="y" name="Sales">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>
<script setup>
import { provide } from "vue";
import {
  Chart3DComponent as EjsChart3d,
  Chart3DSeriesCollectionDirective as EChart3dSeriesCollection,
  Chart3DSeriesDirective as EChart3dSeries,
  ColumnSeries3D,
  Category3D,
} 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: 'United Kingdom', 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',
  title: 'Countries',
  labelIntersectAction: 'Rotate90'
};
const primaryYAxis = {
  interval: 10
};

provide('chart3d', [ColumnSeries3D, Category3D]);
</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis">
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource="seriesData" type="Column" xName="x" yName="y" name="Sales">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>
<script>
import {
  Chart3DComponent,
  Chart3DSeriesCollectionDirective,
  Chart3DSeriesDirective,
  ColumnSeries3D,
  Category3D
} from '@syncfusion/ej2-vue-charts';

export default {
  name: "App",
  components: {
    'ejs-chart3d': Chart3DComponent,
    'e-chart3d-series-collection': Chart3DSeriesCollectionDirective,
    'e-chart3d-series': Chart3DSeriesDirective
  },
  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: 'United Kingdom', 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',
        title: 'Countries',
        labelIntersectAction: 'Rotate90'
      },
      primaryYAxis: {
        interval: 10,
      },
    };
  },
  provide: {
    chart3d: [ColumnSeries3D, Category3D]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Edge label placement

Labels with long text at the edges of an axis may appear partially in the 3D chart. To avoid this,
use the 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-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis">
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource="seriesData" type="Column" xName="x" yName="y" name="Sales">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>
<script setup>
import { provide } from "vue";
import {
  Chart3DComponent as EjsChart3d,
  Chart3DSeriesCollectionDirective as EChart3dSeriesCollection,
  Chart3DSeriesDirective as EChart3dSeries,
  ColumnSeries3D,
  Category3D,
} 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: 'United Kingdom', 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',
  title: 'Countries',
  edgeLabelPlacement: 'Shift'
};
const primaryYAxis = {
  interval: 10
};

provide('chart3d', [ColumnSeries3D, Category3D]);

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

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis">
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource="seriesData" type="Column" xName="x" yName="y" name="Sales">
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>
<script>
import {
  Chart3DComponent,
  Chart3DSeriesCollectionDirective,
  Chart3DSeriesDirective,
  ColumnSeries3D,
  Category3D
} from '@syncfusion/ej2-vue-charts';

export default {
  name: "App",
  components: {
    'ejs-chart3d': Chart3DComponent,
    'e-chart3d-series-collection': Chart3DSeriesCollectionDirective,
    'e-chart3d-series': Chart3DSeriesDirective
  },
  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: 'United Kingdom', 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',
        title: 'Countries',
        edgeLabelPlacement: 'Shift',
      },
      primaryYAxis: {
        interval: 10,
      },
    };
  },
  provide: {
    chart3d: [ColumnSeries3D, Category3D]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Maximum labels

The labels will be rendered based on the count in the maximumLabels property per 100 pixel. If the range (minimum, maximum, interval) and maximumLabels are set, then the priority goes to range. If the range is not set, then the priority goes to maximumLabels property.

Composition API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis" :title='title'
      :wallColor='wallColor' :enableRotation='enableRotation' :rotation='rotation' :tilt='tilt' :depth='depth'>
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource="seriesData" type="Column" xName="x" yName="y" name="Product X">
          <e-chart3d-series-animation enable="false"></e-chart3d-series-animation>
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>
<script setup>
import { provide } from "vue";
import {
  Chart3DComponent as EjsChart3d,
  Chart3DSeriesCollectionDirective as EChart3dSeriesCollection,
  Chart3DSeriesDirective as EChart3dSeries,
  ColumnSeries3D,
  Category3D,
} from '@syncfusion/ej2-vue-charts';

let series1 = [];
let point1;
let value = 80;
let i;
for (i = 1; i < 50; i++) {
  if (Math.random() > 0.5) {
    value += Math.random();
  } else {
    value -= Math.random();
  }
  point1 = { x: i, y: value.toFixed(1) };
  series1.push(point1);
}

const seriesData = series1;
const primaryXAxis = {
  title: 'Years',
  edgeLabelPlacement: 'Shift',
  majorGridLines: { width: 0 },
  maximumLabels: 1
};
const primaryYAxis = {
  title: 'Profit ($)',
  rangePadding: 'None',
  majorTickLines: { width: 0 }
};
const title = 'Sales History of Product X';
const wallColor = 'transparent';
const enableRotation = true;
const rotation = 7;
const tilt = 10;
const depth = 100;

provide('chart3d', [ColumnSeries3D, Category3D]);
</script>
<style>
#container {
  height: 350px;
}
</style>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <ejs-chart3d id="container" :primaryXAxis="primaryXAxis" :primaryYAxis="primaryYAxis" :title='title'
      :wallColor='wallColor' :enableRotation='enableRotation' :rotation='rotation' :tilt='tilt' :depth='depth'>
      <e-chart3d-series-collection>
        <e-chart3d-series :dataSource="seriesData" type="Column" xName="x" yName="y" name="Product X">
          <e-chart3d-series-animation enable="false"></e-chart3d-series-animation>
        </e-chart3d-series>
      </e-chart3d-series-collection>
    </ejs-chart3d>
  </div>
</template>
<script>
import {
  Chart3DComponent,
  Chart3DSeriesCollectionDirective,
  Chart3DSeriesDirective,
  ColumnSeries3D,
  Category3D,
} from '@syncfusion/ej2-vue-charts';

let series1 = [];
let point1;
let value = 80;
let i;
for (i = 1; i < 50; i++) {
  if (Math.random() > 0.5) {
    value += Math.random();
  } else {
    value -= Math.random();
  }
  point1 = { x: i, y: value.toFixed(1) };
  series1.push(point1);
}

export default {
  name: "App",
  components: {
    'ejs-chart3d': Chart3DComponent,
    'e-chart3d-series-collection': Chart3DSeriesCollectionDirective,
    'e-chart3d-series': Chart3DSeriesDirective
  },
  data() {
    return {
      seriesData: series1,
      primaryXAxis: {
        title: 'Years',
        edgeLabelPlacement: 'Shift',
        majorGridLines: { width: 0 },
        maximumLabels: 1
      },
      primaryYAxis: {
        title: 'Profit ($)',
        rangePadding: 'None',
        majorTickLines: { width: 0 }
      },
      title: 'Sales History of Product X',
      wallColor: 'transparent',
      enableRotation: true,
      rotation: 7,
      tilt: 10,
      depth: 100
    };
  },
  provide: {
    chart3d: [ColumnSeries3D, Category3D]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>