Ngx-charts-extension NPM

NGXChartsExtension

This library is used to extend the popular @swimlanes/ngx-charts with a variety of custom charts using typed classes for easy interaction. Using this library, you should easily be able to build custom charts using all the pre-built components from @swimlanes.

Install

To add ngx-charts-extension to your project, install through npm:

npm i ngx-charts-extension

Usage

Simply extend the BaseChartComponentExtension class in your component. This will create the basics for your custom chart component. Add all the desired charts and features as you desire. We decided to use strongly (when applicable) typed classes to make interacting with the plots even easier.

Here is the example code of a Area-Bubble-Combo Chart (StackBlitz):

import { Component, Input, OnInit, TemplateRef, ElementRef } from '@angular/core'

import { ColorHelper } from '@swimlane/ngx-charts';
import { area, line, curveLinear } from 'd3-shape';

import { BaseChartComponentExtension } from '../../Classes/BaseChartComponentExtension'
import { LineSeries, BubbleSeries, ColorScheme, LegendOptions } from '../../Classes/Classes'
import { concat } from 'rxjs';


@Component({
    selector: 'area-bubble-combo',
    template: `<ngx-charts-chart 
                  [view]="[width + ChartLegendOptions.spacing, height]" 
                  [showLegend]="ShowLegend" 
                  [legendOptions]="ChartLegendOptions"
                  (legendLabelClick)="TestFunction($event)">
    <svg:g [attr.transform]="transform" class="area-chart chart">
        <svg:g ngx-charts-x-axis
               *ngIf="XAxis.DisplayAxis"
               [xScale]="XAxis.Scale"
               [dims]="Dimensions"
               [showGridLines]="true"
               [showLabel]="XAxis.ShowLabel"
               [labelText]="XAxis.LabelText"
               [tickFormatting]="XAxis.Format"
               (dimensionsChanged)="TestFunction($event)">
        </svg:g>

        <svg:g ngx-charts-y-axis
               *ngIf="YAxis1.DisplayAxis"
               [yScale]="YAxis1.Scale"
               [dims]="Dimensions"
               [showGridLines]="true"
               [showLabel]="YAxis1.ShowLabel"
               [labelText]="YAxis1.LabelText"
               [yOrient]="YAxis1.Orientation"
               [tickFormatting]="YAxis1.Format"
               (dimensionsChanged)="TestFunction($event)">
        </svg:g>
        <svg:g ngx-charts-y-axis
               *ngIf="YAxis2.DisplayAxis"
               [yScale]="YAxis2.Scale"
               [dims]="Dimensions"
               [showGridLines]="true"
               [showLabel]="YAxis2.ShowLabel"
               [labelText]="YAxis2.LabelText"
               [yOrient]="YAxis2.Orientation"
               [tickFormatting]="YAxis2.Format"
               (dimensionsChanged)="TestFunction($event)">
        </svg:g>
        <svg:g class="line-chart chart">
            <svg:g [attr.clip-path]="null">
                <svg:g *ngFor="let series of AreaChartSeries">
                    <svg:g ngx-charts-area-series
                           [xScale]="XAxis.Scale"
                           [yScale]="YAxis2.Scale"
                           [colors]="AreaChartColors"
                           [data]="series"
                           [activeEntries]="activeEntries"
                           [scaleType]="XAxisScaleType"
                           [gradient]="false"
                           [curve]="CurveType"
                           [animations]="animations" 
                           (select)="TestFunction($event)"/>
                </svg:g>
            </svg:g>


            <svg:g>
                <svg:g ngx-charts-tooltip-area
                       [dims]="Dimensions"
                       [xSet]="XSet"
                       [xScale]="XAxis.Scale"
                       [yScale]="YAxis1.Scale"
                       [results]="AreaChartSeries"
                       [colors]="AreaChartColors"
                       [tooltipDisabled]="false"
                       [tooltipTemplate]="AreaChartTooltip" />
            </svg:g>

        </svg:g>
        <svg:g [attr.clip-path]="null">
            <svg:g *ngFor="let series of BubbleChartSeries">
                <svg:g ngx-charts-bubble-series
                       [xScale]="XAxis.Scale"
                       [yScale]="YAxis1.Scale"
                       [rScale]="RScale"
                       [xScaleType]="'time'"
                       [yScaleType]="'linear'"
                       [xAxisLabel]="null"
                       [yAxisLabel]="null"
                       [colors]="BubbleChartColors"
                       [data]="series"
                       [activeEntries]="activeEntries"
                       [tooltipDisabled]="false"
                       [tooltipTemplate]="BubbleChartTooltip"
                       (select)="TestFunction($event)"
                        />

            </svg:g>
        </svg:g>


    </svg:g>
</ngx-charts-chart>
`
})
export class AreaBubbleCombo extends BaseChartComponentExtension implements OnInit
{
    // #region Data
    @Input() AreaChartSeries: LineSeries[];
    @Input() BubbleChartSeries: BubbleSeries[];
    // #endregion

    // #region Color Properties
    // #region Input Properties
    @Input() AreaChartScheme: ColorScheme;
    @Input() BubbleChartScheme: ColorScheme;
    // #endregion
    AreaChartColors: ColorHelper;
    BubbleChartColors: ColorHelper;
    // #endregion

    // #region Area Chart Properties
    // #region Input Properties
    @Input() CurveType: any = curveLinear;
    // #endregion

    // #endregion

    // #region Bubble Chart Properties
    // #region Input Properties
    @Input() BubbleRadiusMin: number = 1;
    @Input() BubbleRadiusMax: number = 1;
    // #endregion
    RDomain: any;
    RScale: any;
    // #endregion

    // #region Tooltip Properties
    @Input() BubbleChartTooltip: TemplateRef<ElementRef>;
    @Input() AreaChartTooltip: TemplateRef<ElementRef>;
    // #endregion

    @Input() activeEntries: any[] = [];	//Not sure what this does.

    transform: any;

    SeriesDomain: any;
    CombinedSeries: any;

    ngOnInit()
    {
        this.view = [this.ChartWidth, this.ChartHeight];
        this.update();
    }

    update(): void
    {
        super.update();
        
        let XDomain = this.GetXDomain([...this.AreaChartSeries, ...this.BubbleChartSeries]);
        this.XAxis.Scale = this.GetXScale(XDomain, this.Dimensions.width);
        let YBubbleDomain = this.GetYDomain(this.BubbleChartSeries, this.YAxis1);
        let YLineDomain = this.GetYDomain(this.AreaChartSeries, this.YAxis2);
        this.RDomain = this.GetRDomain(this.BubbleChartSeries);
        this.YAxis1.Scale = this.GetYScale(YBubbleDomain, this.Dimensions.height);
        this.YAxis2.Scale = this.GetYScale(YLineDomain, this.Dimensions.height);
        this.RScale = this.GetRScale(this.RDomain, [this.BubbleRadiusMin, this.BubbleRadiusMax]);
        this.AreaChartColors = new ColorHelper(this.AreaChartScheme, this.SchemeType, YLineDomain);
        this.BubbleChartColors = new ColorHelper(this.BubbleChartScheme, this.SchemeType, YBubbleDomain);
        this.UpdateLegendOptions([...this.AreaChartSeries, ...this.BubbleChartSeries], [this.AreaChartColors, this.BubbleChartColors]);
        this.transform = `translate(${this.Dimensions.xOffset}, ${this.Margins[0]})`;	//xOffset is the third value of margins.
    }
}