- Title
- Title rotation
- Tick lines customization
- Grid lines customization
- Multiple axis
- Inversed axis
- Opposed position
Contact Support
Axis customization in Angular 3D Chart control
27 Apr 202424 minutes to read
Title
The title for the axis can be added by using the title
property. It helps to provide quick information to the user about the data plotted in the axis. Title style can be customized using titleStyle
property of the axis.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Chart3DAllModule} from '@syncfusion/ej2-angular-charts'
import { Component } from '@angular/core';
@Component({
imports: [
Chart3DAllModule
],
standalone: true,
selector: 'app-container',
// specifies the template string for the Chart component
template: `<ejs-chart3d style='display:block;' align='center' [primaryXAxis]='primaryXAxis'
rotation=7 tilt=10 depth=100 [enableRotation]='enableRotation'>
<e-chart3d-series-collection>
<e-chart3d-series [dataSource]='dataSource' type='Column' xName='country' yName='gold'>
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>`
})
export class AppComponent {
public dataSource?: Object[];
public primaryXAxis?: Object;
public enableRotation?: boolean;
ngOnInit(): void {
this.dataSource = [
{ 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 }
];
this.primaryXAxis = {
valueType: "Category",
title: 'Countries',
//Axis title text style
titleStyle: {
size: '16px', color: 'grey',
fontFamily : 'Segoe UI', fontWeight : 'bold'
}
};
this.enableRotation = true;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Title rotation
The title can be rotated from 0 to 360 degree by using the titleRotation
property.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Chart3DAllModule} from '@syncfusion/ej2-angular-charts'
import { Component } from '@angular/core';
@Component({
imports: [
Chart3DAllModule
],
standalone: true,
selector: 'app-container',
// specifies the template string for the Chart component
template: `<ejs-chart3d style='display:block;' align='center' [primaryXAxis]='primaryXAxis'
rotation=7 tilt=10 depth=100 [enableRotation]='enableRotation'>
<e-chart3d-series-collection>
<e-chart3d-series [dataSource]='dataSource' type='Column' xName='country' yName='gold'>
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>`
})
export class AppComponent {
public dataSource?: Object[];
public primaryXAxis?: Object;
public enableRotation?: boolean;
ngOnInit(): void {
this.dataSource = [
{ 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 }
];
this.primaryXAxis = {
valueType: "Category",
title: 'Countries',
titleRotation: 90,
//Axis title text style
titleStyle: {
size: '16px', color: 'grey',
fontFamily : 'Segoe UI', fontWeight : 'bold'
}
};
this.enableRotation = true;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Tick lines customization
The width
, color
and height
of the minor and major tick lines can be customized by using the majorTickLines
and minorTickLines
properties in the axis.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Chart3DAllModule} from '@syncfusion/ej2-angular-charts'
import { Component } from '@angular/core';
@Component({
imports: [
Chart3DAllModule
],
standalone: true,
selector: 'app-container',
// specifies the template string for the Chart component
template: `<ejs-chart3d style='display:block;' align='center' [primaryXAxis]='primaryXAxis'
rotation=7 tilt=10 depth=100 [enableRotation]='enableRotation'>
<e-chart3d-series-collection>
<e-chart3d-series [dataSource]='dataSource' type='Column' xName='country' yName='gold'>
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>`
})
export class AppComponent {
public dataSource?: Object[];
public primaryXAxis?: Object;
public enableRotation?: boolean;
ngOnInit(): void {
this.dataSource = [
{ 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 }
];
this.primaryXAxis = {
valueType: "Category",
majorTickLines : {
color : 'blue',
width : 5
}
};
this.enableRotation = true;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Grid lines customization
The width
and color
of the minor and major grid lines can be customized by using the majorGridLines
and minorGridLines
properties in the axis.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Chart3DAllModule} from '@syncfusion/ej2-angular-charts'
import { Component } from '@angular/core';
@Component({
imports: [
Chart3DAllModule
],
standalone: true,
selector: 'app-container',
// specifies the template string for the Chart component
template: `<ejs-chart3d style='display:block;' align='center' [primaryXAxis]='primaryXAxis'
rotation=7 tilt=10 depth=100 [enableRotation]='enableRotation'>
<e-chart3d-series-collection>
<e-chart3d-series [dataSource]='dataSource' type='Column' xName='country' yName='gold'>
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>`
})
export class AppComponent {
public dataSource?: Object[];
public primaryXAxis?: Object;
public enableRotation?: boolean;
ngOnInit(): void {
this.dataSource = [
{ 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 }
];
this.primaryXAxis = {
valueType: "Category",
majorGridLines : {
color : 'blue',
width : 1
}
};
this.enableRotation = true;
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Multiple axis
In addition to primary X and Y axis, n number of axis can be added to the chart. Series can be associated with this axis, by mapping with axis’s unique name.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Chart3DAllModule} from '@syncfusion/ej2-angular-charts'
import { Component } from '@angular/core';
@Component({
imports: [
Chart3DAllModule
],
standalone: true,
selector: 'app-container',
// specifies the template string for the Chart component
template: `<ejs-chart3d style='display:block;' align='center' [primaryXAxis]='primaryXAxis' [axes]="axes"
rotation=7 tilt=10 depth=100 [enableRotation]='enableRotation'>
<e-chart3d-series-collection>
<e-chart3d-series [dataSource]='dataSource' type='Column' xName='country' yName='gold'>
</e-chart3d-series>
<e-chart3d-series [dataSource]='dataSource' type='Column' xName='country' yName='silver' yAxisName="yAxis">
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>`
})
export class AppComponent {
public dataSource?: Object[];
public primaryXAxis?: Object;
public enableRotation?: boolean;
public axes?: Object[];
ngOnInit(): void {
this.dataSource = [
{ 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 }
];
this.primaryXAxis = {
valueType: "Category"
};
this.enableRotation = true;
this.axes = [
{
rowIndex: 0,
name: 'yAxis'
}
]
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Inversed axis
When an axis is inversed, highest value of the axis comes closer to origin and vice versa. To place an axis in inversed manner, set the isInversed
property to true.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Chart3DAllModule} from '@syncfusion/ej2-angular-charts'
import { Component } from '@angular/core';
@Component({
imports: [
Chart3DAllModule
],
standalone: true,
selector: 'app-container',
// specifies the template string for the Chart component
template: `<ejs-chart3d style='display:block;' align='center' [primaryXAxis]='primaryXAxis' [primaryYAxis]="primaryYAxis"
rotation=7 tilt=10 depth=100 [enableRotation]='enableRotation'>
<e-chart3d-series-collection>
<e-chart3d-series [dataSource]='dataSource' type='Column' xName='country' yName='gold'>
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>`
})
export class AppComponent {
public dataSource?: Object[];
public primaryXAxis?: Object;
public enableRotation?: boolean;
public primaryYAxis?: Object;
ngOnInit(): void {
this.dataSource = [
{ 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 }
];
this.primaryXAxis = {
valueType: "Category",
isInversed: true
};
this.enableRotation = true;
this.primaryYAxis = {
isInversed: true
};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Opposed position
To place an axis opposite from its original position, set the opposedPosition
property to true.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Chart3DAllModule} from '@syncfusion/ej2-angular-charts'
import { Component } from '@angular/core';
@Component({
imports: [
Chart3DAllModule
],
standalone: true,
selector: 'app-container',
// specifies the template string for the Chart component
template: `<ejs-chart3d style='display:block;' align='center' [primaryXAxis]='primaryXAxis' [primaryYAxis]="primaryYAxis"
rotation=7 tilt=10 depth=100 [enableRotation]='enableRotation'>
<e-chart3d-series-collection>
<e-chart3d-series [dataSource]='dataSource' type='Column' xName='country' yName='gold'>
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>`
})
export class AppComponent {
public dataSource?: Object[];
public primaryXAxis?: Object;
public enableRotation?: boolean;
public primaryYAxis?: Object;
ngOnInit(): void {
this.dataSource = [
{ 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 }
];
this.primaryXAxis = {
valueType: "Category"
};
this.enableRotation = true;
this.primaryYAxis = {
//Axis position as opposite
opposedPosition: true
};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));