Time series charts in Angular using Highchart

In the last article, we discuss how to create a line chart in angular using Highchart in this article we discuss how to create time series chart in angular using highchart. Install highchart angular module in our project


pm install highcharts --save
npm install highcharts-angular --save

Import module in app.module.ts file.

....
import { HighchartsChartModule } from 'highcharts-angular';
...
@NgModule({
imports:      [ ..., HighchartsChartModule],
....
})

After the import module in our app.module.ts file, we can use highchart module in our component. For the Time series, data get I have created a data.ts file for the input data. in that, I have defined the export variable so we can use it in our component. Below is the sample code for variable export and how to use it in the component.



export var TimeChartData: Array = [
	[
		1167609600000,
		0.7537
	],
        [
		1167609600000,
		0.7537
	]
]


........
import * as cdata from './data';
.......
export class AppComponent  implements OnInit{

 public data= cdata.TimeChartData;
-------------------


In our component, we can use data from the data.ts file for the time series. In high chart option we adding functionality to export chart for that we need to add below code in our component.


const Exporting = require('highcharts/modules/exporting');
Exporting(Highcharts);

const ExportData = require('highcharts/modules/export-data');
ExportData(Highcharts);

In the below code, we can set now options for the time series chart. In the chart we have set title, subtitle, xAxis, yAxis, series(pass data), plotOptions which can how to fill the color for time series


import { Component, VERSION ,OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';

import * as cdata from './data';
declare var require: any;
const More = require('highcharts/highcharts-more');
More(Highcharts);

const Exporting = require('highcharts/modules/exporting');
Exporting(Highcharts);

const ExportData = require('highcharts/modules/export-data');
ExportData(Highcharts);

const Accessibility = require('highcharts/modules/accessibility');
Accessibility(Highcharts);

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit{

public data= cdata.TimeChartData;
public options: any = {
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: this.data
}]
}

constructor() { }

ngOnInit(){
Highcharts.chart('container', this.options);
}
}


<h1 style="text-align:center">High Charts LineChart</h1>
<div id="container"></div>



Below is the full code for the line chart using Highchart

Spread the love
  •  
  •  
  •  
  •  
  •  
  • 1
  •  
  •