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:

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

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