Highcharts Angular Common Component

A reusable Angular component that simplifies the integration of Highcharts into your Angular applications. Built on top of highcharts-angular, this component lets you render charts by simply passing data and configuration options as inputs.

Prerequisites

Before using this component, ensure that your project has the following packages installed:

npm install highcharts highcharts-angular

These dependencies are required for the charting functionality provided by Highcharts and its Angular wrapper. Installation Install the common component via npm:

npm install common-highchats-angular

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CommonHighchartsModule } from 'common-highcharts';

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

<common-highcharts  chartType="line" 
                    [height]="height" 
                    [seriesOptions]="series" 
                    [showLegends]="showLegends" 
                    [title]="title"
                    [isExporting]="isExporting"
                    [isMultipleYsxis]="false"
                    >
</common-highcharts>

Below is the sample data which I'm passing, you can play with data.

Note - if you need multipleYaxis than pass yAxis: 'y'+ index as yAxis in each series to get series in different y axis. If you pass same 'y'+ index to two series than those series will be in same y axis

  height = '700px';
  width ='500px';
  series = [{id:'1',data:[0,10,13,10,5,6],type:'line',yAxis:'y0'},{id:'2',data:[1,3,5,8,10.12], type:'line',yAxis:'y1'},{id:'3',data:[4,6,7,8,10,2], type:'line',yAxis:'y1'}];
  isExporting = true;
  showLegends = true;

License This project is licensed under the MIT License – see the LICENSE file for details. Author Pradeep Balli For questions, issues, or feedback, please contact [email protected].