NGX Charts Grouped Horizontal Bar Chart

An In-depth Look at NGX Charts Bar Chart Component

Before diving into using NGX bar charts, it’s essential to ensure that NGX Charts are installed and integrated with Angular. I’ve previously covered the detailed process of getting started with NGX Charts in another article. I highly recommend referring to that resource before proceeding with NGX bar charts implementation. It will provide valuable insights into setting up and leveraging NGX Charts within Angular applications, laying a solid foundation for incorporating specific chart types like NGX bar charts.

ngx_horizontol_chart_dc3kfi_17999985667837613757.webp

Grouped Horizontal Bar Chart

Grouped Horizontal NGX Bar Chart

Example

  • app.module.ts
  • app.component.ts
  • app.component.html
  • data.ts
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 = false;
  showLegend: boolean = true;
  legendPosition: string = 'below';
  showXAxisLabel: boolean = true;
  yAxisLabel: string = 'Country';
  showYAxisLabel: boolean = true;
  xAxisLabel = 'Population';

  colorScheme = {
    domain: ['#5AA454', '#C7B42C', '#AAAAAA']
  };
  schemeType: string = 'linear';

  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-horizontal-2d
  [view]="view"
  [scheme]="colorScheme"
  [schemeType]="schemeType"
  [results]="multi"
  [gradient]="gradient"
  [xAxis]="showXAxis"
  [yAxis]="showYAxis"
  [legend]="showLegend"
  [legendPosition]="legendPosition"
  [showXAxisLabel]="showXAxisLabel"
  [showYAxisLabel]="showYAxisLabel"
  [xAxisLabel]="xAxisLabel"
  [yAxisLabel]="yAxisLabel"
  (select)="onSelect($event)"
  (activate)="onActivate($event)"
  (deactivate)="onDeactivate($event)"
  >
</ngx-charts-bar-horizontal-2d>
export var multi = [
  {
    "name": "Germany",
    "series": [
      {
        "name": "2010",
        "value": 7300000
      },
      {
        "name": "2011",
        "value": 8940000
      }
    ]
  },

  {
    "name": "USA",
    "series": [
      {
        "name": "2010",
        "value": 7870000
      },
      {
        "name": "2011",
        "value": 8270000
      }
    ]
  },

  {
    "name": "France",
    "series": [
      {
        "name": "2010",
        "value": 5000002
      },
      {
        "name": "2011",
        "value": 5800000
      }
    ]
  }
];

Input

PropertyTypeDefault ValueDescription
viewnumber[]Specifies the dimensions of the chart [width, height]. If left undefined, the chart will automatically adjust to fit the size of its parent container.
resultsobject[]Defines the data to be visualized in the chart.
schemeobjectSets the color scheme used in the chart.
schemeTypestring‘ordinal’Specifies the type of color scale used. It can be either ‘ordinal’ or ’linear’.
customColorsfunction or objectAllows customization of colors for specific data values in the chart.
animationsbooleantrueEnables or disables animations for chart transitions and updates.
legendbooleanfalseDetermines whether the legend should be displayed alongside the chart.
legendTitlestring‘Legend’Sets the title of the legend.
legendPositionstring‘right’Specifies the position of the legend relative to the chart. It can be ‘right’ or ‘below’.
xAxisbooleanfalseDetermines whether the x-axis should be displayed.
yAxisbooleanfalseDetermines whether the y-axis should be displayed.
showGridLinesbooleantrueControls the visibility of grid lines in the chart.
roundDomainsbooleanfalseSpecifies whether domains should be rounded for aligned gridlines.
showXAxisLabelbooleanfalseDetermines whether the label for the x-axis should be displayed.
showYAxisLabelbooleanfalseDetermines whether the label for the y-axis should be displayed.
xAxisLabelstringSets the text for the x-axis label.
yAxisLabelstringSets the text for the y-axis label.
showDataLabelbooleanfalseDetermines whether the value number should be displayed next to the bar in the chart.
gradientbooleanfalseControls whether elements in the chart should be filled with a gradient instead of a solid color.
noBarWhenZerobooleantrueSpecifies whether bars should be hidden when their value is zero.
trimXAxisTicksbooleantrueDetermines whether ticks on the x-axis should be trimmed to fit within the chart area.
trimYAxisTicksbooleantrueDetermines whether ticks on the y-axis should be trimmed to fit within the chart area.
maxXAxisTickLengthnumber16Sets the maximum length of ticks on the x-axis. Ticks exceeding this length will be trimmed if trimXAxisTicks is true.
maxYAxisTickLengthnumber16Sets the maximum length of ticks on the y-axis. Ticks exceeding this length will be trimmed if trimYAxisTicks is true.
xAxisTickFormattingfunctionSpecifies a custom formatting function for ticks on the x-axis.
yAxisTickFormattingfunctionSpecifies a custom formatting function for ticks on the y-axis.
xAxisTicksany[]Defines a predefined list of values for ticks on the x-axis.
yAxisTicksany[]Defines a predefined list of values for ticks on the y-axis.
activeEntriesobject[][]Specifies elements in the chart to be highlighted.
barPaddingnumber8Sets the padding between bars in pixels.
groupPaddingnumber16Sets the padding between groups of bars in pixels.
tooltipDisabledbooleanfalseDetermines whether tooltips should be displayed when hovering over chart elements.
tooltipTemplateTemplateRefSpecifies a custom template to be displayed inside tooltips.
xScaleMaxnumberSets the maximum value of the x-axis. This value is ignored if the chart data contains a higher value.
wrapTicksbooleanfalseDetermines whether axis tick labels should wrap based on available space.

Output

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