23.11 NGX-CHARTS

When you need to use a graph in angular. Your options are quite limited. NGX-CHARTS is the only one I was able to find that was free and had the things I needed.

here is a DEMO. and here is the documentation.

styling

To change the styling you have to put the following styles in your scss:

::ng-deep .ng-star-inserted {
    fill: #ffffff !important;
}
 
::ng-deep .ngx-charts .gridline-path {
    stroke: #888888 !important;
}

colorSchema

It took my a while to find out how to set the color schema of the graph lines:

colorScheme = {
        name: 'test',
        selectable: false,
        group: ScaleType.Time,
        domain: ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf']
    };

<ngx-charts-line-chart [results]="graphData" [legend]="legend" [showXAxisLabel]="false" [showYAxisLabel]="true"
    [xAxis]="xAxis" [yAxis]="yAxis" [yAxisLabel]="yAxisLabel" [timeline]="timeline" (select)="onSelect($event)"
    [scheme]="colorScheme" (activate)="onActivate($event)" (deactivate)="onDeactivate($event)"
    [showGridLines]="showGridLines" [ngClass]="currentTheme">
</ngx-charts-line-chart>

full Component code

Haven’t really needed to change anything in this component. Since I handle everything in another component. Hence the @Input() fields.

import { Component, Input } from '@angular/core';
import { ThemeService } from '../../themeToggle/theme.service';
import { LoginService } from '../../backend/login.service';
import { ScaleType } from '@swimlane/ngx-charts';
 
@Component({
    selector: 'app-data-table',
    templateUrl: './data-table.component.html',
    styleUrl: './data-table.component.scss'
})
export class DataTableComponent {
    @Input() currentTheme: string = 'light-theme';
 
    // options
    legend: boolean = true;
    showLabels: boolean = true;
    animations: boolean = true;
    xAxis: boolean = true;
    yAxis: boolean = true;
    yAxisLabel: string = 'LogMessages';
    timeline: boolean = true;
 
    colorScheme = {
        name: 'test',
        selectable: false,
        group: ScaleType.Time,
        domain: ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf']
    };
 
    @Input() graphData: any[] = [];
    @Input() showGridLines: boolean = true;
 
    constructor(
 
    ) {
    }
 
    onSelect(data: object): void {
        console.log('Item clicked', JSON.parse(JSON.stringify(data)));
    }
 
    onActivate(data: object): void {
        console.log('Activate', JSON.parse(JSON.stringify(data)));
    }
 
    onDeactivate(data: object): void {
        console.log('Deactivate', JSON.parse(JSON.stringify(data)));
    }
 
    ngOnInit(): void {
 
    }
}