Package Exports

ngx-graph

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-graph) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Angular SVG Charts

This is a set of fully customizable Angular components for visualizing data.

Currently it includes Line/Area Chart, Realtime Line/Area Chart and Pie Chart.

Check live demo.

CodeSandbox Demo - Line Chart

Running Demo Locally

You can run demo app locally, just follow this steps.

git clone https://github.com/jkuri/ngx-graph
cd ngx-graph
npm install // or yarn install
npm start

Installation

Install the npm package.

npm i ngx-graph

Import module that you need.

import { LineChartModule, RealtimeChartModule, PieChartModule } from 'ngx-graph';

@NgModule({
  imports: [LineChartModule, RealtimeChartModule, PieChartModule]
})

Line / Area Chart

Preview

Sample of Line / Area Chart:

Screenshot 2020-06-18 at 19 33 45

Usage

This is sample usage of preview above with full source accessible here.

In template:

<ngx-line-chart [options]="options" [data]="data"></ngx-line-chart>

In your component:

import { LineChartData, LineChartOptions } from 'ngx-graph';

options: LineChartOptions = {
  height: 300,
  margin: { top: 20, right: 40, bottom: 80, left: 60 },
  yScale: { min: 0, max: 3000 },
  xGrid: {
    opacity: .4,
    textColor: '#333'
  },
  yGrid: {
    tickPadding: 13,
    tickFormat: (num: number) => format('~s')(num) + ' €',
    tickTextAnchor: 'end',
    tickNumber: 5,
    opacity: .4,
    textColor: '#333'
  },
  transitions: true,
  transitionDuration: 400,
  legend: true,
  legendPosition: 'bottom',
  legendMargin: { top: 0, right: 0, left: 0, bottom: 0 },
  initialTransition: false,
  interaction: {
    axisLine: true,
    axisLineSize: 4,
    axisLineColor: '#eef0f7',
    tooltip: true,
  }
};

data: LineChartData[] = [
  new LineChartData({
    id: 'progress',
    data: this.data.generateRandomDateValues(10, 2000, 2900),
    area: true,
    areaOpacity: .4,
    curve: 'linear',
    markers: true,
    color: '#FACF55',
    areaColor: '#FACF55',
    markerColor: '#FACF55',
    lineSize: 3
  }),
  new LineChartData({
    id: 'income',
    data: this.data.generateRandomDateValues(10, 1200, 1900),
    area: true,
    areaOpacity: .4,
    curve: 'linear',
    markers: true,
    lineSize: 3
  }),
  new LineChartData({
    id: 'expenses',
    data: this.data.generateRandomDateValues(10, 400, 950),
    area: true,
    areaOpacity: .4,
    curve: 'linear',
    markers: true,
    color: '#34B77C',
    areaColor: '#34B77C',
    markerColor: '#34B77C',
    lineSize: 3
  })
];

For a full list of options please check here.

Real-Time Chart

Preview

ngx-graph-realtime

Usage

For above sample you can check source code here.

In your template:

<ngx-realtime-chart
  [options]="realtimeChartOptions"
  [data]="realtimeChartData"
></ngx-realtime-chart>

In your component:

import { interval } from 'rxjs';
import { timeInterval } from 'rxjs/operators';
import { RealtimeChartOptions } from 'ngx-graph';

realtimeChartOptions: RealtimeChartOptions = {
  height: 300,
  margin: { left: 40 },
  lines: [
    { color: '#34B77C', lineWidth: 3, area: true, areaColor: '#34B77C', areaOpacity: .2 }
  ],
  xGrid: { tickPadding: 15, tickNumber: 5 },
  yGrid: { min: 0, max: 100, tickNumber: 5, tickFormat: (v: number) => `${v}%`, tickPadding: 25 }
};

ngOnInit(): void {
  // push new value to real-time chart every second (example)
  interval(1000)
    .pipe(timeInterval())
    .subscribe(() => {
      this.realtimeChartData[0].push({ date: new Date(), value: this.data.randomInt(0, 100) });
    })
}

For full list of options please check here.

License

MIT