ngx-charts: Custom Bar/Line Combo Chart Tutorial

I've been using ngx-charts when building my Angular apps and its definitely one of the best free charting frameworks available for Angular (that I've tried at least). However, one thing I noticed is the lack of documentation or guides when it comes to creating or even using custom charts. Therefore I decided to create a simple walkthrough on how to use the bar/line combo-chart avaiable as one of their demos.

Walkthrough

Source Code

StackBlitz Link: You can refer to this link to see the final product/overview of how to use the custom chart in your project.

Ensure that you have swimlane/ngx-charts installed as a dependency
npm i @swimlane/ngx-charts --save

Creating and copying components

Create a folder named combo-charts that will store the components of the custom chart (which we will create next)
- This folder can be created in a shared folder for your project or within other folders that you are going to use the component in
- In the example, I just created it in the main app folder
From https://github.com/swimlane/ngx-charts/tree/master/demo/combo-chart, create and copy the exact components into the combo-charts folder which we have just created above. Your folder directory will look like this:\

combo-chart\
 └─ combo-chart.component.scss
 └─ combo-chart.component.ts
 └─ combo-series-vertical.component.ts
 └─ index.ts

Copy all the code in the individual files from https://github.com/swimlane/ngx-charts/tree/master/demo/combo-chart into the respective files

Editing components

You'll notice that some of the imports in the code you've just copied are relative and do not exist. Its time to fix that

combo-chart.component.ts

In combo-chart.component.ts you'll see the following import:

import {
  NgxChartsModule, BaseChartComponent, LineComponent, LineSeriesComponent,
  calculateViewDimensions, ViewDimensions, ColorHelper
 } from '../../src';

Change the '../../src' to '@swimlane/ngx-charts'

combo-series-vertical.component.ts

In combo-series-vertical.component.ts you'll see the following import:

import { formatLabel } from '../../src/common/label.helper';

Similarly, change the '../../src/common/label.helper' to '@swimlane/ngx-charts'

These are the only changes we'll make to the custom components. You can leave the index.ts and combo-chart.component.scss as it is

Declaring Components and Imports

Next, We'll update our app.module.ts or feature modules and declare the components we have just created

First, ensure that you imported the NgxChartsModule and BrowserAnimationsModule

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxChartsModule } from '@swimlane/ngx-charts';
.
.
imports: [
.
BrowserAnimationsModule
NgxChartsModule
.

Import the custom components using the relative file path to the combo-charts folder that we have just created in the earlier step and add the components to your declarations

.
import { ComboChartComponent, ComboSeriesVerticalComponent } from './combo-chart';
.
.
declarations: [
.
.
ComboChartComponent, ComboSeriesVerticalComponent],
.

Including the Custom Component

In the component that you intend to add the combo chart to, add the following code to the template or .html file

<combo-chart-component
[view]="view"
[scheme]="comboBarScheme"
[colorSchemeLine]="lineChartScheme"
[results]="barChart"
[animations]="animations"
[lineChart]="lineChartSeries"
[yAxisTickFormatting]="yLeftTickFormat"
[yLeftAxisScaleFactor]="yLeftAxisScale"
[yRightAxisScaleFactor]="yRightAxisScale"
[yRightAxisTickFormatting]="yRightTickFormat"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[legendTitle]="legendTitle"
[legendPosition]="legendPosition"
[showGridLines]="showGridLines"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[showRightYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
[yAxisLabelRight]="yAxisLabelRight">
</combo-chart-component>

In the .ts file of the component, you can define the variables for the properties and data, for example:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  showXAxis = true;
  showYAxis = true;
  gradient = false;
  showLegend = true;
  legendTitle = 'Legend';
  legendPosition = 'right';
  showXAxisLabel = true;
  xAxisLabel = 'Country';
  showYAxisLabel = true;
  yAxisLabel = 'GDP Per Capita';
  showGridLines = true;
  innerPadding = '10%';
  animations: boolean = true;
  barChart: any[] = barChart;
  lineChartSeries: any[] = lineChartSeries;
  lineChartScheme = {
    name: 'coolthree',
    selectable: true,
    group: 'Ordinal',
    domain: ['#01579b', '#7aa3e5', '#a8385d', '#00bfa5']
  };

  comboBarScheme = {
    name: 'singleLightBlue',
    selectable: true,
    group: 'Ordinal',
    domain: ['#01579b']
  };

  showRightYAxisLabel: boolean = true;
  yAxisLabelRight: string = 'Utilization';
}
export let lineChartSeries = [
  {
    name: 'Tablets',
    series: [
          {
      name: 'USA',
      value: 50
    },
    .
    .
    .]
 export let barChart: any = [
  {
    name: 'USA',
    value: 50000
  },
  .
  .
  .]

Note: Not all the directives used in the example above have to be used in your code. You can refer to combo-chart.component.ts for the available inputs

Conclusion

After following the above steps, you should be able to see the combo-chart appear in the view. You can further customise the chart by adding to combo-chart.component.ts or combo-series-vertical.component.ts, which I will not cover here. I hope that this short and simple guide was helpful and clear in explaining how to start using custom charts from ngx-charts!

gabrielloye/ngx-charts-combo-chart-tutorial.md