NGX Charts Grouped Vertical Bar Chart
- With Code Example
- March 4, 2024
![NGX Charts Grouped Vertical Bar Chart NGX Charts Grouped Vertical Bar Chart](/Grouped%20Vertical%20Bar%20Chart_e9R8nfkK_1311873076259132835.png)
Series - NGX Charts
Prior to delving into the utilization of NGX bar charts, it’s imperative to confirm the installation and integration of NGX Charts with Angular. In a previous article, I thoroughly outlined the process of initiating NGX Charts, providing comprehensive guidance for newcomers. I strongly advise consulting that resource before embarking on the implementation of NGX bar charts. Doing so will furnish you with essential knowledge on establishing and maximizing NGX Charts within Angular projects, establishing a robust groundwork for seamlessly integrating specific chart types such as NGX bar charts.
Grouped Vertical Bar Chart
Grouped Vertical Bar Chart Example
- app.module.ts
- app.component.ts
- app.component.html
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
FormsModule,
NgxChartsModule,
BrowserAnimationsModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { multi } from './data';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
multi: any[];
view: any[] = [700, 400];
// options
showXAxis: boolean = true;
showYAxis: boolean = true;
gradient: boolean = true;
showLegend: boolean = true;
showXAxisLabel: boolean = true;
xAxisLabel: string = 'Country';
showYAxisLabel: boolean = true;
yAxisLabel: string = 'Population';
legendTitle: string = 'Years';
colorScheme = {
domain: ['#5AA454', '#C7B42C', '#AAAAAA']
};
constructor() {
Object.assign(this, { multi })
}
onSelect(data): void {
console.log('Item clicked', JSON.parse(JSON.stringify(data)));
}
onActivate(data): void {
console.log('Activate', JSON.parse(JSON.stringify(data)));
}
onDeactivate(data): void {
console.log('Deactivate', JSON.parse(JSON.stringify(data)));
}
}
<ngx-charts-bar-vertical-2d
[view]="view"
[scheme]="colorScheme"
[results]="multi"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
[legendTitle]="legendTitle"
(select)="onSelect($event)"
(activate)="onActivate($event)"
(deactivate)="onDeactivate($event)">
</ngx-charts-bar-vertical-2d>
Input
Property | Type | Default Value | Description |
---|---|---|---|
view | number[] | | the dimensions of the chart [width, height]. If left undefined, the chart will fit to the parent container size |
results | object[] | | the chart data |
scheme | object | | the color scheme of the chart |
schemeType | string | ‘ordinal’ | the color scale type. Can be either ‘ordinal’ or ’linear’ |
customColors | function or object | | custom colors for the chart. Used to override a color for a specific value |
animations | boolean | true | enable animations |
legend | boolean | false | show or hide the legend |
legendTitle | string | ‘Legend’ | the legend title |
legendPosition | string | ‘right’ | the legend position [‘right’, ‘below’] |
xAxis | boolean | false | show or hide the x axis |
yAxis | boolean | false | show or hide the y axis |
showGridLines | boolean | true | show or hide the grid lines |
roundDomains | boolean | false | round domains for aligned gridlines |
showXAxisLabel | boolean | false | show or hide the x axis label |
showYAxisLabel | boolean | false | show or hide the y axis label |
xAxisLabel | string | | the x axis label text |
yAxisLabel | string | | the y axis label text |
trimXAxisTicks | boolean | true | trim or not ticks on the x axis |
trimYAxisTicks | boolean | true | trim or not ticks on the Y axis |
maxXAxisTickLength | number | 16 | max length of the ticks. If trimXAxisTicks is true, ticks over this length will be trimmed |
maxYAxisTickLength | number | 16 | max length of the ticks. If trimYAxisTicks is true, ticks over this length will be trimmed |
xAxisTickFormatting | function | | the x axis tick formatting |
yAxisTickFormatting | function | | the y axis tick formatting |
xAxisTicks | any[] | | predefined list of x axis tick values |
yAxisTicks | any[] | | predefined list of y axis tick values |
showDataLabel | boolean | false | displays the value number next to the bar |
noBarWhenZero | boolean | true | hide bar if value is 0 and setting is true |
gradient | boolean | false | fill elements with a gradient instead of a solid color |
activeEntries | object[] | [] | elements to highlight |
barPadding | number | 8 | padding between bars in px |
groupPadding | number | 16 | padding between groups in px |
tooltipDisabled | boolean | false | show or hide the tooltip |
tooltipTemplate | TemplateRef | | a custom ng-template to be displayed inside the tooltip |
yScaleMax | number | | the maximum value of the y axis (ignored if chart data contains a higher value) |
wrapTicks | boolean | false | axis tick labels will wrap based on available space |
Outputs
Property | Description |
---|---|
select | click event |
activate | element activation event (mouse enter) |
deactivate | element deactivation event (mouse leave) |
Data Format
[
{
"name": "Germany",
"series": [
{
"name": "2010",
"value": 7300000
},
{
"name": "2011",
"value": 8940000
}
]
},
{
"name": "USA",
"series": [
{
"name": "2010",
"value": 7870000
},
{
"name": "2011",
"value": 8270000
}
]
}
]
Related Posts
![Understanding React.js Components: Functional, Class, State, Props, and Hooks Understanding React.js Components: Functional, Class, State, Props, and Hooks](https://res.cloudinary.com/harendra21/image/upload/w_400/awesome-blog/awesome-javascript/Understanding_React.js_Components__Functional_Class_State_Props_and_Hooks_x12rck.png)
Understanding React.js Components: Functional, Class, State, Props, and Hooks
React.js is a popular JavaScript library for building user interfaces, and it revolves around the concept of components. Components are the building blocks of a React application, allowing you to create modular, reusable, and encapsulated pieces of user interface.
![Redux State Management Simplified Redux State Management Simplified](https://res.cloudinary.com/harendra21/image/upload/w_400/javascriptwithexample/Redux_State_Management_ef9zc1.png)
Redux State Management Simplified
Redux is a state management library for JavaScript applications, particularly useful in managing the state of large and complex applications. It provides a predictable and centralized way to manage the application’s state and makes it easier to understand, debug, and maintain the state transitions.