Skip to content

Multi Line Graph

Jump to bottom
Sukanya Dasgupta edited this page Jul 25, 2019 · 7 revisions

Multi Line Graph

TypeScript:

multiLineData = [
    {name: 'first', color: '#ff1111', data: [
      {x: 10, y: 10, info: 'Point 1'},
      {x: 80, y: 40, info: 'Point 2'},
      {x: 30, y: 30, info: 'Point 3'},
      {x: 40, y: 20, info: 'Point 4'},
      {x: 40, y: 30, info: 'Point 5'}
    ]},
    {name: 'second', color: '#33bb33', data: [
      {x: 10, y: 5, info:  ''},
      {x: 80, y: 30, info: ''},
      {x: 30, y: 25, info: ''},
      {x: 40, y: 35, info: ''},
      {x: 45, y: 25, info: ''}
    ]},
    {name: 'third', color: '#3333bb', data: [
      {x: 5, y: 5, info: ''},
      {x: 15, y: 30, info: ''},
      {x: 25, y: 25, info: ''},
      {x: 35, y: 15, info: ''},
      {x: 45, y: 15, info: ''}
    ]}
  ];

HTML:

<ngx-multi-line-graph [width]="1100" [height]="400" 
[minX]="0" [maxX]="100" 
[minY]="0" [maxY]="50" 
[gridPrecisionX]="10" 
[gridPrecisionY]="10"
xAxisTitle="Time"
yAxisTitle="Distance"
[data]="multiLineData"></ngx-multi-line-graph>

Note: Instead of setting color of every line, as in the above example, you could also just set the attribute [colorScheme] to one of the available color schemes. List of available color schemes

Clone this wiki locally