Naphthalene Possum Management
    Wondering what’s next for npm?Check out our public roadmap! »

    angular-highcharts
    TypeScript icon, indicating that this package has built-in type declarations

    11.3.1 • Public • Published

    angular-highcharts

    NPM version NPM downloads

    This is a Highcharts directive for Angular.

    Requirements

    {
      "angular": ">=10.0.0",
      "highcharts": ">=7.0.0"
    }

    Installation

    yarn

    # install angular-highcharts and highcharts
    yarn add angular-highcharts highcharts

    npm

    # install angular-highcharts and highcharts
    npm i --save angular-highcharts highcharts

    Usage Example

    // app.module.ts
    import { ChartModule } from 'angular-highcharts';
    
    @NgModule({
      imports: [
        ChartModule // add ChartModule to your imports
      ]
    })
    export class AppModule {}
    // chart.component.ts
    import { Chart } from 'angular-highcharts';
    
    @Component({
      template: `
        <button (click)="add()">Add Point!</button>
        <div [chart]="chart"></div>
      `
    })
    export class ChartComponent {
      chart = new Chart({
        chart: {
          type: 'line'
        },
        title: {
          text: 'Linechart'
        },
        credits: {
          enabled: false
        },
        series: [
          {
            name: 'Line 1',
            data: [1, 2, 3]
          }
        ]
      });
    
      // add point to chart serie
      add() {
        this.chart.addPoint(Math.floor(Math.random() * 10));
      }
    }

    API Docs

    Chart

    The Chart object.

    Type: class

    Constructor

    new Chart(options: Options)

    Properties

    ref: Highcharts.Chart;

    Deprecated. Please use ref$.

    ref$: Observeable<Highcharts.Chart>

    Observeable that emits a Highcharts.Chart - Offical Chart API Docs

    Methods

    addPoint(point: Point, [serieIndex: number = 0]): void

    Adds a point to a serie

    removePoint(pointIndex: number, [serieIndex: number = 0], [redraw: boolean = true], [shift: boolean = false]): void

    Removes a point from a serie

    addSeries(series: ChartSerie): void

    Adds a series to the chart

    removeSeries(seriesIndex: number): void

    Remove series from the chart

    StockChart

    The Chart object.

    Type: class

    Constructor

    new StockChart(options);

    Properties

    ref: Highstock.Chart;

    Deprecated. Please use ref$.

    ref$: Observeable<Highstock.Chart>

    Observeable that emits a Highstock.Chart

    MapChart

    The Chart object.

    Type: class

    Constructor

    new MapChart(options);

    Properties

    ref;

    Deprecated. Please use ref$.

    ref$;

    Observeable that emits a Highmaps.Chart

    Using Highcharts modules

    To use Highcharts modules you have to import them and provide them in a factory (required for aot). You can find the list of available modules in the highcharts folder ls -la node_modules/highcharts/modules.

    Hint: Highcharts-more is a exception, you find this module in the root folder. Don't forget to use the modules with the .src suffix, minimized highcharts modules are not importable.

    Example

    // app.module.ts
    import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
    import * as more from 'highcharts/highcharts-more.src';
    import * as exporting from 'highcharts/modules/exporting.src';
    
    @NgModule({
      providers: [
        { provide: HIGHCHARTS_MODULES, useFactory: () => [ more, exporting ] } // add as factory to your providers
      ]
    })
    export class AppModule { }

    Highstock & Highmaps support

    Highstock

    For Highstock support load the following module

    // app.module.ts
    import * as highstock from 'highcharts/modules/stock.src';
    
    @NgModule({
      providers: [
        { provide: HIGHCHARTS_MODULES, useFactory: () => [ highstock ] }
    ...
    // chart.component.ts
    import { StockChart } from 'angular-highcharts';
    
    @Component({
      template: `
        <div [chart]="stockChart"></div>
      `
    })
    export class ChartComponent {
      stockChart = new StockChart({ options });
    }

    Example Demo

    Highmaps

    For Highmaps support load the following module

    // app.module.ts
    import * as highmaps from 'highcharts/modules/map.src';
    
    @NgModule({
      providers: [
        { provide: HIGHCHARTS_MODULES, useFactory: () => [ highmaps ] }
    ...
    // chart.component.ts
    import { MapChart } from 'angular-highcharts';
    
    @Component({
      template: `
        <div [chart]="mapChart"></div>
      `
    })
    export class ChartComponent {
      mapChart = new MapChart({ options });
    }

    Offical Highcharts NPM Docs: http://www.highcharts.com/docs/getting-started/install-from-npm

    Troubleshooting

    If you expiring typing errors while you build/serve your angular app the following could be helpful:

    // override options type with <any>
    chart = new Chart({ options } as any);

    This is very useful when using gauge chart type.

    Demo

    License

    MIT © Felix Itzenplitz

    Install

    npm i angular-highcharts

    DownloadsWeekly Downloads

    20,798

    Version

    11.3.1

    License

    MIT

    Unpacked Size

    148 kB

    Total Files

    33

    Last publish

    Collaborators

    • avatar