@jb7/timeline v1.0.0

Timeline

Show your yearly data in a more expressive way

Installation

To install this library, run:

    npm install --save @jb7/timeline

Consuming the library

Once you have installed this library, you need to import it in module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { TimelineModule } from '@jb7/timeline';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    TimelineModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

in your template

<timeline [options]="options" [rows]="data" [templateId]="hoverDetail"></timeline>

and in your component.ts file

data = [
    {name:'Babur v/s Ibrahim Lodi',year:1526,description:"First battle of Panipat againt Ibrahim Lodi"},
    {name:'Babur v/s Ranga Sanga',year:1527,description:"Battle of Khanwa with Ranga Sanga of Malwa"},
    {name:'Babur v/s Medini Rai',year:1528, description:"Battle of Chanderi against Medini Rai"},
    {name:'Babur v/s Mahmmud Lodi',year:1529,description:"Battle of Ghagra with Mahmmud Lodi"}
  ];

  options = { 
    isVertical: true,
    templateWidth: 250,
    templateHeight: 125,
    lineLength: 50,
    circleBorderColor:'coral',
    lineColor:'green'
  }

Demo

Demo for this library is available at: ngxtimeline