Linechart in Angular using Highchart

In this article we discuss how to create a line chart using HighChart. For that first, we need to install 2 modules in our application.

we need to install “highcharts” & “highcharts-angular”

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

After install the module we need to import module in our “app.module.ts”

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



After the import module, you can use these modules in our component where we need to draw the graph. Let’s import a hight chart in our component. In component, we initialize the chart options chart mainly options chart type which chart you need to display. then data in series section in JSON format. title, tooltip,xAxis,yAxis and more options you can use. we discuss options in other articles. below are the options I have set up for the line chart,


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


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  implements OnInit{
 public options: any = {
    chart: {
      type: 'spline',
      height: 700
    },
    title: {
      text: 'Monthly Average Temperature'
    },
    credits: {
      enabled: false
    },

    xAxis: {
      categories:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]

    },
    series: [
         {
            name: 'Ahmedabad',
            data: [3.0, 15.9, 19.5, 16.5, 25.2, 21.5, 25.2,26.5, 23.3, 18.3, 13.9, 9.6]
         },
         {
            name: 'Nadiad',
            data: [5.2, 2.8, 5.7, 11.3, 17.0, 22.0, 24.8,24.1, 20.1, 14.1, 8.6, 2.5]
         },
         {
            name: 'Surat',
            data: [4.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
         },
         {
            name: 'Mumbai',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
         }
      ]
  }


  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
  • 2
  •  
  •