- Range
- Logarithmic base
- Logarithmic interval
Contact Support
Logarithmic axis in Angular 3D Chart control
27 Apr 202416 minutes to read
Logarithmic axis uses logarithmic scale and it is very useful in visualizing data, when it has numerical values in both lower order of magnitude (eg: 10-6) and higher order of magnitude (eg: 106).
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 #chart 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='x' yName='y'>
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>`
})
export class AppComponent {
public dataSource?: Object[];
public primaryXAxis?: Object;
public primaryYAxis?: Object;
public enableRotation?: boolean;
ngOnInit(): void {
this.dataSource = [
{ x: new Date(1995, 0, 1), y: 80 }, { x: new Date(1996, 0, 1), y: 200 },
{ x: new Date(1997, 0, 1), y: 400 }, { x: new Date(1998, 0, 1), y: 600 },
{ x: new Date(1999, 0, 1), y: 700 }, { x: new Date(2000, 0, 1), y: 1400 },
{ x: new Date(2001, 0, 1), y: 2000 }, { x: new Date(2002, 0, 1), y: 4000 },
{ x: new Date(2003, 0, 1), y: 6000 }, { x: new Date(2004, 0, 1), y: 8000 },
{ x: new Date(2005, 0, 1), y: 11000 }
];
this.enableRotation = true;
this.primaryXAxis = {
valueType: 'DateTime'
};
this.primaryYAxis = {
valueType: 'Logarithmic'
};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Note: To use logarithmic axis, we need to inject
Logarithmic3DService
module into the@NgModule.providers
and set thevalueType
of the axis to Logarithmic.
Range
The range of an axis will be calculated automatically based on the provided data and it can also be customized by using the minimum
, maximum
and interval
properties 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 #chart 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='x' yName='y'>
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>`
})
export class AppComponent {
public dataSource?: Object[];
public primaryXAxis?: Object;
public primaryYAxis?: Object;
public enableRotation?: boolean;
ngOnInit(): void {
this.dataSource = [
{ x: new Date(1995, 0, 1), y: 80 }, { x: new Date(1996, 0, 1), y: 200 },
{ x: new Date(1997, 0, 1), y: 400 }, { x: new Date(1998, 0, 1), y: 600 },
{ x: new Date(1999, 0, 1), y: 700 }, { x: new Date(2000, 0, 1), y: 1400 },
{ x: new Date(2001, 0, 1), y: 2000 }, { x: new Date(2002, 0, 1), y: 4000 },
{ x: new Date(2003, 0, 1), y: 6000 }, { x: new Date(2004, 0, 1), y: 8000 },
{ x: new Date(2005, 0, 1), y: 11000 }
];
this.enableRotation = true;
this.primaryXAxis = {
valueType: 'DateTime'
};
this.primaryYAxis = {
valueType: 'Logarithmic',
minimum: 100,
maximum: 10000,
interval: 1000
};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Logarithmic base
Logarithmic base can be customized by using the logBase
property of the axis. For example when the logBase
is 5, the axis values follows 5-2, 5-1, 50, 51, 52 etc.
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 #chart 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='x' yName='y'>
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>`
})
export class AppComponent {
public dataSource?: Object[];
public primaryXAxis?: Object;
public primaryYAxis?: Object;
public enableRotation?: boolean;
ngOnInit(): void {
this.dataSource = [
{ x: new Date(1995, 0, 1), y: 80 }, { x: new Date(1996, 0, 1), y: 200 },
{ x: new Date(1997, 0, 1), y: 400 }, { x: new Date(1998, 0, 1), y: 600 },
{ x: new Date(1999, 0, 1), y: 700 }, { x: new Date(2000, 0, 1), y: 1400 },
{ x: new Date(2001, 0, 1), y: 2000 }, { x: new Date(2002, 0, 1), y: 4000 },
{ x: new Date(2003, 0, 1), y: 6000 }, { x: new Date(2004, 0, 1), y: 8000 },
{ x: new Date(2005, 0, 1), y: 11000 }
];
this.enableRotation = true;
this.primaryXAxis = {
valueType: 'DateTime'
};
this.primaryYAxis = {
valueType: 'Logarithmic',
logBase: 2
};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Logarithmic interval
The interval of the logarithmic axis can be customized by using the interval
property in the axis. When the logarithmic base is 10 and logarithmic interval is 2, then the axis labels are placed at an interval of 102. The default value of the interval
is 1.
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 #chart 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='x' yName='y'>
</e-chart3d-series>
</e-chart3d-series-collection>
</ejs-chart3d>`
})
export class AppComponent {
public dataSource?: Object[];
public primaryXAxis?: Object;
public primaryYAxis?: Object;
public enableRotation?: boolean;
ngOnInit(): void {
this.dataSource = [
{ x: new Date(1995, 0, 1), y: 80 }, { x: new Date(1996, 0, 1), y: 200 },
{ x: new Date(1997, 0, 1), y: 400 }, { x: new Date(1998, 0, 1), y: 600 },
{ x: new Date(1999, 0, 1), y: 700 }, { x: new Date(2000, 0, 1), y: 1400 },
{ x: new Date(2001, 0, 1), y: 2000 }, { x: new Date(2002, 0, 1), y: 4000 },
{ x: new Date(2003, 0, 1), y: 6000 }, { x: new Date(2004, 0, 1), y: 8000 },
{ x: new Date(2005, 0, 1), y: 11000 }
];
this.enableRotation = true;
this.primaryXAxis = {
valueType: 'DateTime'
};
this.primaryYAxis = {
valueType: 'Logarithmic',
interval: 2
};
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));