Internationalization in Angular Treemap component
13 Feb 202320 minutes to read
The TreeMap control supports internationalization for the following elements:
- Data label
- Tooltip
For more information about number and date formatter, refer to internationalization
.
Globalization
Globalization is the process of designing and developing a component that works in different cultures/locales. Internationalization library is used to globalize number, date, and time values in the tree map control using the format
property in the Treemap.
Numeric format
In the following code example, tooltip is globalized to Deutsch culture.
import { Component } from '@angular/core';
@Component({
selector: 'app-container',
template: `<ejs-treemap id='container' style='display: block;' [dataSource]='data' weightValuePath='GDP' format='c' useGroupingSeparator= 'true'
>
</ejs-treemap>`
})
export class AppComponent {
public data: object[] = [
{State:"United States", GDP:17946, percentage:11.08, Rank:1},
{State:"China", GDP:10866, percentage: 28.42, Rank:2},
{State:"Japan", GDP:4123, percentage:-30.78, Rank:3},
{State:"Germany", GDP:3355, percentage:-5.19, Rank:4},
{State:"United Kingdom", GDP:2848, percentage:8.28, Rank:5},
{State:"France", GDP:2421, percentage:-9.69, Rank:6},
{State:"India", GDP:2073, percentage:13.65, Rank:7},
{State:"Italy", GDP:1814, percentage:-12.45, Rank:8},
{State:"Brazil", GDP:1774, percentage:-27.88, Rank:9},
{State:"Canada", GDP:1550, percentage:-15.02, Rank:10}
];
}
Right-to-left rendering
The TreeMap control supports right-to-left rendering for all its elements such as nodes, tooltip, data labels, and legends.
Legend with Rtl support
If set the enableRtl
property to true, then the legend icon will be rendered on the right and the legend text will be rendered on the left of the legend icon.
import { Component } from '@angular/core';
@Component({
selector: 'app-container',
template: `<ejs-treemap id='container' style='display: block;' [dataSource]='data' weightValuePath='count' [legendSettings]='legendSettings' colorValuePath= 'color' enableRtl='true'
[leafItemSettings]='leafItemSettings' >
</ejs-treemap>`
})
export class AppComponent {
public data: object[] = [{ Car:'Mustang', Brand:'Ford', count:232, color: '#71B081' },
{ Car:'EcoSport', Brand:'Ford', count:121, color: '#5A9A77' },
{ Car:'Swift', Brand:'Maruti', count:143, color: '#498770' },
{ Car:'Baleno', Brand:'Maruti', count:454, color: '#39776C' },
{ Car:'Vitara Brezza', Brand:'Maruti', count:545 , color: '#266665' },
{ Car:'A3 Cabriolet', Brand:'Audi',count:123, color: '#124F5E' }
];
public legendSettings: object= {
visible: true,
position:'Top'
};
public leafItemSettings:object= {
labelPath: 'Car'
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TreeMapModule, TreeMapLegendService, TreeMapTooltipService, TreeMapAllModule } from '@syncfusion/ej2-angular-treemap';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, TreeMapModule, TreeMapAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [TreeMapLegendService, TreeMapTooltipService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Tooltip with Rtl support
If the enableRtl
property is set to true, the tooltip data will be rendered in reverse direction.
import { Component } from '@angular/core';
@Component({
selector: 'app-container',
template: `<ejs-treemap id='container' style='display: block;' [palette] ='palette' [dataSource]='data' weightValuePath='count' [tooltipSettings]='tooltipSettings' colorValuePath = 'color' enableRtl ='true'
[leafItemSettings]='leafItemSettings' >
</ejs-treemap>`
})
export class AppComponent {
public data: object[] = [{ fruit:'Apple', count:5000 },
{ fruit:'Mango', count:3000 },
{ fruit:'Orange', count:2300 },
{ fruit:'Banana', count:500 },
{ fruit:'Grape', count:4300 },
{ fruit:'Papaya', count:1200 },
{ fruit:'Melon', count:4500 }
];
public tooltipSettings: object= {
visible: true,
format:'${count} : ${fruit}'
};
public leafItemSettings:object= {
labelPath: 'fruit'
};
public palette:object =['#71B081','#5A9A77', '#498770', '#39776C', '#266665','#124F5E'];
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TreeMapModule, TreeMapLegendService, TreeMapTooltipService, TreeMapAllModule } from '@syncfusion/ej2-angular-treemap';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, TreeMapModule, TreeMapAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [TreeMapLegendService, TreeMapTooltipService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Treemap Item Rendering Direction
The direction of TreeMap item is TopLeftBottomRight
by default and customize the rendering direction of the TreeMap item by setting the renderDirection
property.
The TreeMap can be rendered in the following directions:
- TopLeftBottomRight
- TopRightBottomLeft
- BottomRightTopLeft
- BottomLeftTopRight
The following example demonstrate, how to render the treemap in the RTL direction with TopLeftBottomRight
.
import { Component } from '@angular/core';
@Component({
selector: 'app-container',
template: `<ejs-treemap id='container' style='display: block;' [palette] ='palette' [dataSource]='data' weightValuePath='count'
renderDirection='TopLeftBottomRight' >
</ejs-treemap>`
})
export class AppComponent {
public data: object[] = [{ fruit:'Apple', count:5000 },
{ fruit:'Mango', count:3000 },
{ fruit:'Orange', count:2300 },
{ fruit:'Banana', count:500 },
{ fruit:'Grape', count:4300 },
{ fruit:'Papaya', count:1200 },
{ fruit:'Melon', count:4500 }
];
public leafItemSettings:object= {
labelPath: 'fruit'
};
public palette:object =['#71B081','#5A9A77', '#498770', '#39776C', '#266665','#124F5E'];
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TreeMapModule, TreeMapLegendService, TreeMapTooltipService, TreeMapAllModule } from '@syncfusion/ej2-angular-treemap';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, TreeMapModule, TreeMapAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [TreeMapLegendService, TreeMapTooltipService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The following example demonstrate, how to render the treemap in the RTL direction with TopRightBottomLeft
.
import { Component } from '@angular/core';
@Component({
selector: 'app-container',
template: `<ejs-treemap id='container' style='display: block;' [palette] ='palette' [dataSource]='data' weightValuePath='count'
renderDirection='TopRightBottomLeft' >
</ejs-treemap>`
})
export class AppComponent {
public data: object[] = [{ fruit:'Apple', count:5000 },
{ fruit:'Mango', count:3000 },
{ fruit:'Orange', count:2300 },
{ fruit:'Banana', count:500 },
{ fruit:'Grape', count:4300 },
{ fruit:'Papaya', count:1200 },
{ fruit:'Melon', count:4500 }
];
public leafItemSettings:object= {
labelPath: 'fruit'
};
public palette:object =['#71B081','#5A9A77', '#498770', '#39776C', '#266665','#124F5E'];
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TreeMapModule, TreeMapLegendService, TreeMapTooltipService, TreeMapAllModule } from '@syncfusion/ej2-angular-treemap';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, TreeMapModule, TreeMapAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [TreeMapLegendService, TreeMapTooltipService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The following example demonstrate, how to render the treemap in the RTL direction with BottomRightTopLeft
.
import { Component } from '@angular/core';
@Component({
selector: 'app-container',
template: `<ejs-treemap id='container' style='display: block;' [palette] ='palette' [dataSource]='data' weightValuePath='count'
renderDirection='BottomRightTopLeft' >
</ejs-treemap>`
})
export class AppComponent {
public data: object[] = [{ fruit:'Apple', count:5000 },
{ fruit:'Mango', count:3000 },
{ fruit:'Orange', count:2300 },
{ fruit:'Banana', count:500 },
{ fruit:'Grape', count:4300 },
{ fruit:'Papaya', count:1200 },
{ fruit:'Melon', count:4500 }
];
public leafItemSettings:object= {
labelPath: 'fruit'
};
public palette:object =['#71B081','#5A9A77', '#498770', '#39776C', '#266665','#124F5E'];
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TreeMapModule, TreeMapLegendService, TreeMapTooltipService, TreeMapAllModule } from '@syncfusion/ej2-angular-treemap';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, TreeMapModule, TreeMapAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [TreeMapLegendService, TreeMapTooltipService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The following example demonstrate, how to render the treemap in the RTL direction with BottomLeftTopRight
.
import { Component } from '@angular/core';
@Component({
selector: 'app-container',
template: `<ejs-treemap id='container' style='display: block;' [palette] ='palette' [dataSource]='data' weightValuePath='count'
renderDirection='BottomLeftTopRight' >
</ejs-treemap>`
})
export class AppComponent {
public data: object[] = [{ fruit:'Apple', count:5000 },
{ fruit:'Mango', count:3000 },
{ fruit:'Orange', count:2300 },
{ fruit:'Banana', count:500 },
{ fruit:'Grape', count:4300 },
{ fruit:'Papaya', count:1200 },
{ fruit:'Melon', count:4500 }
];
public leafItemSettings:object= {
labelPath: 'fruit'
};
public palette:object =['#71B081','#5A9A77', '#498770', '#39776C', '#266665','#124F5E'];
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TreeMapModule, TreeMapLegendService, TreeMapTooltipService, TreeMapAllModule } from '@syncfusion/ej2-angular-treemap';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, TreeMapModule, TreeMapAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [TreeMapLegendService, TreeMapTooltipService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);