Morphatic Charts

This is a library of Angular components that can create data visualizations using the powerful d3 framework, and the d3Kit library, which is designed to make it easier to create reusable d3 code. These charts should also work within Ionic projects, as well.

Installation

To install, from the root directory of your project type:

npm i -S d3 d3kit @morphatic/charts

The d3 and d3Kit libraries are listed as peerDependencies so you have to explicitly install them separately.

Then in the app.module.ts file in your project, import the MorphaticChartsModule and add it to the imports array of your @NgModule decorator as follows:

import { BrowserModule         } from '@angular/platform-browser';
import { NgModule              } from '@angular/core';
import { AppComponent          } from './app.component';
import { MorphaticChartsModule } from '@morphatic/charts';

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    BrowserModule,
    MorphaticChartsModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

At this point, the various different chart components will be available to your templates.

Using the Chart Components

To use the chart components, all you need to do is add the right tag to the appropriate template, and provide it with data in the correct format. The format of the expected data will differ for each type of chart and will be explained below.

Bar Charts

Bar charts consist of vertical bars representing the numeric values of a collection of categories or dates.

In your template you should add a tag as follows:

<bar-chart [data]="barData"></bar-chart>

The variable barData is an array of BarDatum objects which have a pre-defined signature. In your component's .ts file, you should have something like:

import { Component } from '@angular/core';
import { BarDatum  } from '@morphatic/charts';

@Component({
  selector: 'home-page',
  templateUrl: './home.html'
})
export class HomePage {

  barData: BarDatum[];

  constructor() {
    this.barData = [
      {
        category: "apples",
        value: 12
      },
      {
        category: "oranges",
        value: 7
      },
      {
        category: "pears",
        value: 15
      }
    ];
  }
}

This code would generate a bar chart with three bars with the labels shown in the categories. Of course, data can be generated any way you like, e.g. retrieved from a database, pulled from a REST API, etc. It's also possible to change the chart, just by changing the data. The charts are fully styleable with CSS.