@rm-graph/angular

RM-Graphs Angular - Angular components for RM-Graphs charting library.

Installation

npm install @rm-graph/angular
# or just the core for direct usage
npm install @rm-graph/core

scichart is automatically installed as a dependency!

Usage Options

Option 1: Using Core Library Directly (Recommended)

The most reliable approach is to use the core library directly in your Angular components:

import { Component, ElementRef, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
import {
  LineChart,
  createLineChart,
  type SeriesData,
} from '@rm-graph/core';

@Component({
  selector: 'app-chart',
  standalone: true,
  template: `<div #chartContainer style="width: 100%; height: 400px;"></div>`
})
export class ChartComponent implements AfterViewInit, OnDestroy {
  @ViewChild('chartContainer') chartRef!: ElementRef<HTMLDivElement>;
  private chart: LineChart | null = null;

  chartData: SeriesData[] = [
    { name: 'Sales', data: [100, 150, 120, 180].map((y, x) => ({ x, y })) }
  ];

  async ngAfterViewInit(): Promise<void> {
    this.chart = await createLineChart(this.chartRef.nativeElement, {
      theme: 'dark',
      series: this.chartData,
      xAxis: { title: 'Month' },
      yAxis: { title: 'Revenue' },
    });
  }

  ngOnDestroy(): void {
    this.chart?.destroy();
  }

  // Update data dynamically
  updateData(newData: SeriesData[]): void {
    this.chart?.setData(newData);
  }

  // Change theme
  setTheme(theme: string): void {
    this.chart?.setOptions({ theme });
  }
}

Option 2: Using Angular Components (Standalone)

Import the pre-built Angular components:

import { Component } from '@angular/core';
import { LineChartComponent, BarChartComponent, AreaChartComponent } from '@rm-graph/angular';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [LineChartComponent, BarChartComponent, AreaChartComponent],
  template: `
    <sui-line-chart
      [series]="lineData"
      height="400px"
      theme="dark"
      xAxisTitle="Month"
      yAxisTitle="Revenue"
      [lineWidth]="2"
      [showPoints]="true"
      (ready)="onChartReady($event)"
    />
  `
})
export class DashboardComponent {
  lineData = [
    { name: 'Sales', data: [100, 150, 120, 180].map((y, x) => ({ x, y })) }
  ];

  onChartReady(chart: any) {
    console.log('Chart ready!', chart);
  }
}

Components

<sui-line-chart>

| Input | Type | Default | Description | |-------|------|---------|-------------| | series | SeriesData[] | [] | Chart data | | width | string | '100%' | Chart width | | height | string | '400px' | Chart height | | theme | string \| ThemeConfig | - | Theme | | xAxisTitle | string | - | X-axis title | | yAxisTitle | string | - | Y-axis title | | lineWidth | number | 2 | Line thickness | | showPoints | boolean | false | Show data points | | animation | boolean | true | Enable animations |

| Output | Type | Description | |--------|------|-------------| | ready | EventEmitter<LineChart> | Emitted when chart is ready | | chartError | EventEmitter<Error> | Emitted on error |

<sui-bar-chart>

| Input | Type | Default | Description | |-------|------|---------|-------------| | series | SeriesData[] | [] | Chart data | | stacked | boolean | false | Stack bars | | barWidth | number | 0.7 | Bar width (0-1) | | borderRadius | number | 0 | Border radius |

<sui-area-chart>

| Input | Type | Default | Description | |-------|------|---------|-------------| | series | SeriesData[] | [] | Chart data | | fillOpacity | number | 0.5 | Fill opacity (0-1) | | lineWidth | number | 2 | Line thickness |

Chart Types Available from Core

• createLineChart - Line charts with optional points
• createBarChart - Bar/column charts with grouping and stacking
• createAreaChart - Area charts with gradient fills

Theming

import { getThemeManager } from '@rm-graph/core';

// Built-in themes: 'light', 'dark', 'modern', 'midnight'

// Register custom theme
getThemeManager().registerTheme({
  name: 'custom',
  backgroundColor: '#1a1a2e',
  colorPalette: ['#ff6b6b', '#4ecdc4'],
  // ...
});

See main README for full documentation.