Highcharts Angular Tutorial

Highcharts Angular Code Example

‍

Step 1: Install Highcharts and Highcharts-Angular

Firstly, you need to install Highcharts and the Highcharts Angular wrapper. Run the following command in your project directory:

npm install highcharts angular-highcharts

Step 2: Import HighchartsModule

In your app module file, usually `app.module.ts`, import `HighchartsChartModule` from `highcharts-angular` and add it to your `@NgModule` imports array:

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

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import HighchartsModule

import { HighchartsChartModule } from 'highcharts-angular';

@NgModule({

 declarations: [

   AppComponent

 ],

 imports: [

   BrowserModule,

   HighchartsChartModule // Add this line

 ],

 providers: [],

 bootstrap: [AppComponent]

})

export class AppModule { }

‍

Step 3: Use the highcharts-chart Component in Your AppComponent

In your `app.component.html`, use the `highcharts-chart` component to create a chart. You will also define the Highcharts options in your `app.component.ts`.

<h2>Highcharts Angular Code Example</h2>

<p>A simple line chart example</p>

<div>

   <highcharts-chart

       [Highcharts]="Highcharts"

       [options]="chartOptions"

       style="width: 100%; height: 400px; display: block;">

   </highcharts-chart>

</div>

`app.component.ts`

import { Component } from '@angular/core';

import * as Highcharts from 'highcharts';

@Component({

 selector: 'app-root',

 templateUrl: './app.component.html',

 styleUrls: ['./app.component.css']

})

export class AppComponent {

 Highcharts: typeof Highcharts = Highcharts; // required

 chartOptions: Highcharts.Options = { // define chart options

   series: [{

     type: 'line',

     data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

   }]

 };

}

‍

Make sure to add any styles or modify the options to fit your needs!

Conclusion

You have successfully integrated Highcharts into your Angular application and created a simple line chart. Highcharts provides vast options for customization and features, so you can explore its API to create more detailed and complex charts.

‍