NGX Charts Grouped Vertical Bar Chart


NGX Charts Grouped Vertical Bar Chart

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

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

PropertyTypeDefault ValueDescription
viewnumber[]the dimensions of the chart [width, height]. If left undefined, the chart will fit to the parent container size
resultsobject[]the chart data
schemeobjectthe color scheme of the chart
schemeTypestring‘ordinal’the color scale type. Can be either ‘ordinal’ or ’linear’
customColorsfunction or objectcustom colors for the chart. Used to override a color for a specific value
animationsbooleantrueenable animations
legendbooleanfalseshow or hide the legend
legendTitlestring‘Legend’the legend title
legendPositionstring‘right’the legend position [‘right’, ‘below’]
xAxisbooleanfalseshow or hide the x axis
yAxisbooleanfalseshow or hide the y axis
showGridLinesbooleantrueshow or hide the grid lines
roundDomainsbooleanfalseround domains for aligned gridlines
showXAxisLabelbooleanfalseshow or hide the x axis label
showYAxisLabelbooleanfalseshow or hide the y axis label
xAxisLabelstringthe x axis label text
yAxisLabelstringthe y axis label text
trimXAxisTicksbooleantruetrim or not ticks on the x axis
trimYAxisTicksbooleantruetrim or not ticks on the Y axis
maxXAxisTickLengthnumber16max length of the ticks. If trimXAxisTicks is true, ticks over this length will be trimmed
maxYAxisTickLengthnumber16max length of the ticks. If trimYAxisTicks is true, ticks over this length will be trimmed
xAxisTickFormattingfunctionthe x axis tick formatting
yAxisTickFormattingfunctionthe y axis tick formatting
xAxisTicksany[]predefined list of x axis tick values
yAxisTicksany[]predefined list of y axis tick values
showDataLabelbooleanfalsedisplays the value number next to the bar
noBarWhenZerobooleantruehide bar if value is 0 and setting is true
gradientbooleanfalsefill elements with a gradient instead of a solid color
activeEntriesobject[][]elements to highlight
barPaddingnumber8padding between bars in px
groupPaddingnumber16padding between groups in px
tooltipDisabledbooleanfalseshow or hide the tooltip
tooltipTemplateTemplateRefa custom ng-template to be displayed inside the tooltip
yScaleMaxnumberthe maximum value of the y axis (ignored if chart data contains a higher value)
wrapTicksbooleanfalseaxis tick labels will wrap based on available space

Outputs

PropertyDescription
selectclick event
activateelement activation event (mouse enter)
deactivateelement 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