highcharts / highcharts-angular Goto Github PK

Hello,

First of all, I never see an Angular Component like that... You have still many work...

Ok for my problem, imagine a Component with a chart. Simple, I want to call .setSize(X, Y, false); from my component and of course outsite update flag and callback function you proposed.

Regards,

Hey there,

I am having the worst time trying to get my Angular 5 app to find the HighchartsChartComponent. I've outlined the steps that I followed. Can you please tell me what I am doing wrong or maybe what I am forgetting? Any help will be greatly appreciated!

Thank you in advance,
C

Here's the steps I took:

1. npm install highcharts/highcharts-angular
2. npm install highcharts --save ... below is the resulting package.json

{
  "name": "Dashboard-Web",
  "version": "4.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "ng": "ng",
    "start": "ng serve --ec true",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.5",
    "@angular/common": "^5.2.5",
    "@angular/compiler": "^5.2.5",
    "@angular/core": "^5.2.5",
    "@angular/forms": "^5.2.5",
    "@angular/http": "^5.2.5",
    "@angular/platform-browser": "^5.2.5",
    "@angular/platform-browser-dynamic": "^5.2.5",
    "@angular/router": "^5.2.5",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0",
    "@ngx-translate/core": "^9.1.1",
    "@ngx-translate/http-loader": "^2.0.1",
    "ajv": "^6.3.0",
    "core-js": "^2.5.3",
    "font-awesome": "^4.7.0",
    "highcharts": "^6.0.7",
    "highcharts-angular": "github:highcharts/highcharts-angular",
    "rxjs": "^5.5.6",
    "yarn": "^1.3.2",
    "zone.js": "^0.8.20"
  },
  "devDependencies": {
    "@angular/cli": "1.7.0",
    "@angular/compiler-cli": "^5.2.5",
    "@angular/language-service": "^5.2.5",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^9.4.7",
    "codelyzer": "~4.1.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.4.1",
    "karma-jasmine": "~1.1.1",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.6.2"
  }
}

3. Updated tsconfig.json include with node_modules/highcharts-angular/src/app/* and Updated tsconfig.json files with the path to the ts file. (TS was throwing an error when parse the include without the actually ts file being added to the config)

{
    "compileOnSave": true,
    "compilerOptions": {
        "outDir": "./dist/out-tsc.js",
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [
            "es2017",
            "dom"
        ],
        "listFiles": true,
        "baseUrl": "/dist",
        "paths": {
            "@app/*": ["dist/*"]
        },
        "pretty": true,
        "target": "es5",
        "typeRoots": [
         "node_modules/@types"
        ]
    },
    "files":[
        "node_modules/highcharts-angular/src/app/highcharts-chart.component.ts"
    ],
    "include":[
        "**/*.d.ts",
        "src/**/*",
        "node_modules/highcharts/*",
        "node_modules/highcharts-angular/src/app/*"
    ],
    "exclude": [
        "**/*.spec.ts"
    ]
}

4. Added HighchartsChartComponent to chart.module.ts as a declaration.

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

import { ChartRoutingModule } from './chart-routing.module';
import { ChartComponent } from './chart.component';

import { HighchartsChartComponent } from 'highcharts-angular';

@NgModule({
    imports: [CommonModule, ChartRoutingModule],
    declarations: [ChartComponent, HighchartsChartComponent]
})
export class ChartModule {}

5. Added the highcharts-chart directive to chart.component.html with [options]="chartOptions"

<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions"></highcharts-chart>

6. Set chartOptions to simple highcharts json object.

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

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.scss']
})
export class ChartComponent implements OnInit {
  @Input() title: any;
  chartOptions: any;
  Highcharts = Highcharts.Highcharts;

  constructor() {}

  ngOnInit() {
      this.showChart();
  }

  ngOnDestroy(){
  }


  showChart(){
      this.chartOptions = {
        chart: {
            type: 'line',
            height: '300px'
        },
        title: {text: ''},
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
        },
        legend: {
            verticalAlign: 'bottom',
            layout: 'horizontal',
            align: 'center',
            itemStyle: {"cursor": "default"}
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    this.x + ': ' + this.y;
            }
        },
        plotOptions: {
        series: {
          animation: false,
          cursor: 'pointer'
        },
        bar: {
            animation: false,
            events: {
                legendItemClick: function () {
                    return false; // <== returning false will cancel the default action
                }
            }
        }
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
      };
  }

}

7. Run ng build --watch ... no errors
8. Load app in Chrome and receive this error:

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'Highcharts' since it isn't a known property of 'highcharts-chart'.

1. If 'highcharts-chart' is an Angular component and it has 'Highcharts' input, then verify that it is part of this module.
2. If 'highcharts-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" ][Highcharts]="Highcharts" [options]="chartOptions">

"): ng:///DashboardModule/ChartComponent.html@6:22 Can't bind to 'options' since it isn't a known property of 'highcharts-chart'. 1. If 'highcharts-chart' is an Angular component and it has 'options' input, then verify that it is part of this module. 2. If 'highcharts-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("> ][options]="chartOptions"> "): ng:///DashboardModule/ChartComponent.html@6:48 'highcharts-chart' is not a known element: 1. If 'highcharts-chart' is an Angular component, then verify that it is part of this module. 2. If 'highcharts-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->] "): ng:///DashboardModule/ChartComponent.html@6:4 Error: Template parse errors: Can't bind to 'Highcharts' since it isn't a known property of 'highcharts-chart'. 1. If 'highcharts-chart' is an Angular component and it has 'Highcharts' input, then verify that it is part of this module. 2. If 'highcharts-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" ][Highcharts]="Highcharts" [options]="chartOptions"> "): ng:///DashboardModule/ChartComponent.html@6:22 Can't bind to 'options' since it isn't a known property of 'highcharts-chart'. 1. If 'highcharts-chart' is an Angular component and it has 'options' input, then verify that it is part of this module. 2. If 'highcharts-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("> ][options]="chartOptions"> "): ng:///DashboardModule/ChartComponent.html@6:48 'highcharts-chart' is not a known element: 1. If 'highcharts-chart' is an Angular component, then verify that it is part of this module. 2. If 'highcharts-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->] "): ng:///DashboardModule/ChartComponent.html@6:4 at syntaxError (compiler.js:485) at TemplateParser.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.TemplateParser.parse (compiler.js:24668) at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._parseTemplate (compiler.js:34621) at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileTemplate (compiler.js:34596) at compiler.js:34497 at Set.forEach () at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileComponents (compiler.js:34497) at compiler.js:34367 at Object.then (compiler.js:474) at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:34366) at syntaxError (compiler.js:485) at TemplateParser.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.TemplateParser.parse (compiler.js:24668) at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._parseTemplate (compiler.js:34621) at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileTemplate (compiler.js:34596) at compiler.js:34497 at Set.forEach () at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileComponents (compiler.js:34497) at compiler.js:34367 at Object.then (compiler.js:474) at JitCompiler.webpackJsonp../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:34366) at resolvePromise (zone.js:809) at resolvePromise (zone.js:775) at zone.js:858 at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4740) at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:595)

Hello all,

I am trying to run highcharts within ngfor loop. An array consisting of multiple input objects. Please help.

Regards,
Sam

Hi,

when you say: "Official minimal Highcharts wrapper for Angular"
on your readme file, what does "minimal" mean?

Can I use the full functionality with this wrapper or just the ones, that are implemented yet?

Waterfront

We developed app using Highcharts with Angular. We have used standalone Highcharts( Piechart and Column chart). The problem here is there are some design issues when we load the highcharts. This issue occurs only in MI 4i mobile in both Chrome browser and hybrid app. Could you please check and let us know the issue?

Here i attached demo url: http://223.30.223.169/lrs/retailer/dist/index.html open this link in your Mi 4i mobile chrome browser, after you will see the design issues.

source code reference : https://github.com/kennedymca/angularhighcharts/tree/master/src/app

Chrome version: 61
Android version:5.0

In order to get it to work in an Angular 6 library module, I had to do it very slightly differently from what's in the README, and I just wanted to share that back for possible inclusion in the docs.

Instead of:

import * as Highcharts from 'highcharts';
import * as HC_exporting from 'highcharts/modules/exporting';
HC_exporting(Highcharts);

I did:

import * as Highcharts from 'highcharts';
import * as HC_exporting_ from 'highcharts/modules/exporting';
const HC_exporting = HC_exporting_;
HC_exporting(Highcharts);

As far as I can tell this is just a workaround. It's not something "special" to highcharts, I had to do the same sort of thing for moment. But maybe this will save someone else some search time. This follows from advice I found here: jvandemo/generator-angular2-library#221

The code above lives in any Component in which I want to use highcharts.

I used to define the following chartOptions, with an empty series array:

chartOptions = {
        title: {
            visible: false,
            text: ""
        },
        exporting: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        xAxis: {
            visible: false
        },
        yAxis: {
            visible: false
        },
        labels: {
            visible: false
        },
        series: []
    };

Then after calling a service, I would get the entire options for the chart as json, including all series data, like this:

getDashboardData(id: number): void {
        this.loading = true;
        this.dashboardService.getDashboard(id)
            .subscribe(dashboardData => {
                this.loading = false;
                this.chartOptions = dashboardData;
                this.updateFromInput = true;
            });
    }

When not using 3d, the chart updates dynamically with any amount of series returned by the service.
But when using 3d, the chart gives an error.

You can even try changing the chart's options with an onclick handler instead of calling a service.
for instance you can define the following variable, and then use it to set the chart's option binding property on your handler: (You will see that when pepe.chart.options3d.enabled is true, the chart doesn't render)

pepe:any = {
        title: {
            text: 'Month To Date Carrier Performance',
            visible: true,
            style: {
                fontSize: '16px',
                color: '#1c3660',
                fontFamily: 'Titillium Web'
            }
        },
        chart: {
            height: 500,
            backgroundColor: '#fff',
            type: 'column',
            plotBackgroundColor: 'rgb(255, 255, 255)',
            options3d: {
                skew3d: false,
                enabled: false,
                alpha: 15,
                beta: 0,
                viewDistance: 25,
                depth: 100
            }
        },
        credits: {
            enabled: false
        },
        xAxis: {
            categories: ["SAIA", "R&L Carriers"],
            visible: true,
            labels: {
                skew3d: false,
                style: {
                    fontSize: '13px',
                    color: '#1c3660',
                    fontFamily: 'Titillium Web'
                }
            },
            gridLineColor: '#bcf'
        },
        yAxis: [
            {
                visible: true,
                title: {
                    text: 'Count of Loads',
                    skew3d: false,
                    style: {
                        fontSize: '13px',
                        color: '#1c3660',
                        fontFamily: 'Titillium Web'
                    }
                },
                gridLineColor: '#bcf'
            },
            {
                visible: false
            },
        ],
        plotOptions: {
            series: {
                pointPadding: 0,
                groupPadding: 0.09
            },
            column: {
                stacking: 'normal',
                depth: 50
            },
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: true
            }
        },
        tooltip: {
            shared: true
        },
        labels: {
            visible: true
        },
        exporting: {
            sourceWidth: 1200,
            enabled: false
        },
        series: [{
            name: 'Loads with Issues',
            color: {
                linearGradient: {
                    x1: 0,
                    x2: 0,
                    y1: 0,
                    y2: 1
                },
                stops: [
                    [0, 'rgb(124,181,236)'],
                    [1, 'rgb(128, 203, 255)']
                ]
            },
            data: [208, 44],
        },
            {
            name: 'Loads without Issues',
            color: {
                linearGradient: {
                    x1: 0,
                    x2: 0,
                    y1: 0,
                    y2: 1
                },
                stops: [
                    [0, 'rgb(0, 63, 129)'],
                    [1, '#1c3660']
                ]
            },
            data: [472, 487],
        },
        {
            type: 'line',
            yAxis: 1,
            tooltip: {
                valueSuffix: '%'
            },
            name: 'Efficiency',
            data: [69, 92],
            marker: {
                lineWidth: 2,
                lineColor: '#1c3660',
                fillColor: 'white'
            }
        }
        ]
    };

I would like to have custom formatted tooltips and axis values. How to achieve this?

What is the difference between import with :
npm i highcharts-angular and npm install highcharts/highcharts-angular
When i use npm i highcharts-angular i have an error :

core.js:1427 ERROR Error: Uncaught (in promise): Error: Unexpected value 'HighchartsChartComponent' declared by the module 'XXXXXX'. Please add a @Pipe/@Directive/@component annotation.
Error: Unexpected value 'HighchartsChartComponent' declared by the module 'BoardModule'. Please add a @Pipe/@Directive/@component annotation.
at syntaxError (compiler.js:485)
at eval (compiler.js:15254)
at Array.forEach ()

And whn i use npm install highcharts/highcharts-angular i dont have this error.

Why does this module require the consumer to supply a highcharts instance to the component? Could <highcharts-chart> not import Highcharts itself? It seems redundant to have to add both the component reference in the module and then again import Highcharts for every component I want to use <highcharts-chart> within..

Hi,

I'm in trouble with the Hichchart export module implementation in my Angular6 app.

When I add the following line in my index.html:

<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>

I've this error: Highcharts is not defined

Can someone how to do it ?

Thanks,

Btw: everything works as expected in the module 👍

Hi,

I want to initialize the chart on some click event/ within a function.
Below is the code I am using :

export class ResaonForChangeChartComponent implements OnInit {
 
  // piecharts = Highcharts;
  piecharts;
  ChartHeader = 'Reason for Change % Breakdown';
  SeriesName = 'Reason For Change';
  piechartOptions = {};
  chartDatasource = [];
  chartData_RFC = [];
  reasonForChangeMaster = [
    'Change in scope from Customer',
    'Change in budget',
    'Planning change from Customer',
    'Wrong estimation',
    'Unclear requirements',
    'Other: resource availability',
    'Other'
  ];

  constructor(private WelcomeSvc: WelcomeService) {}

  ngOnInit() {
    this.getReportData(null);
  }

  private getReportData(reqURL: string) {
    let nextPageURL = reqURL;
    this.WelcomeSvc.getReportData_RFC(nextPageURL).subscribe(
      JsonData => {
        this.chartDatasource = this.chartDatasource.concat(JsonData.d.results);
        if (JsonData.d.__next) {
          nextPageURL = JsonData.d.__next;
          this.getReportData(nextPageURL);
        } else {
          this.PrepareChartData();
        }
      },
      err => console.error(err)
    );
  }

  PrepareChartData() {
    if (this.chartDatasource.length > 0) {
      const totalRecords = this.chartDatasource.length;

      // A: Data for Reason For Change
      this.reasonForChangeMaster.forEach(reason => {
        const DataLablel = reason;
        if (reason === 'Other') {
          reason = null;
        }
        // 1. Filter the data based on reason & Calculte %
        const filteredData = this.chartDatasource.filter(CR => CR.ReasonForChange === reason);
        const ReasonForChangePercentage = parseFloat(((filteredData.length / totalRecords) * 100).toFixed(2));

        // 2. Prepare the data set
        const ResonForChangePercentage = { name: DataLablel, y: ReasonForChangePercentage };

        this.chartData_RFC.push(ResonForChangePercentage);
      });
    
      // 3. Initialize chart configurations
      this.SetChartConfiguration();
    }
  }

  // Initialize the chart &  sets the configuration for chart
  SetChartConfiguration() {
    this.piecharts = Highcharts;
    this.piechartOptions = {
      chart: { type: 'pie', events: {} },
      title: { text: this.ChartHeader },
      xAxis: { type: 'column' },
      legend: { enabled: true },
      credits: { enabled: false },
      plotOptions: {
        series: { dataLabels: { enabled: true } },
        pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true }, showInLegend: false }
      },
      series: [{ name: this.SeriesName, data: this.chartData_RFC }]
    };
  }
}

Issue : this code works but with below errors:

But, when we initialize the Highchart object outside SetChartConfiguration function (globally) , no error occurs but chart also failed to load.

What is the correct way to achieve below requirement:

1. Get the required data for chart
2. Then set the configuration & data for chart.

Hi there

I have heat maps and scatter charts working fine using highcharts-angular but i can't get a solidgauge example working.

Error:
RiskWidgetComponent.html:10 ERROR TypeError: c.init is not a function at a.Chart.initSeries (highcharts.js:237) at highcharts.js:261 at Array.forEach (<anonymous>) at a.each (highcharts.js:27) at a.Chart.firstRender (highcharts.js:261) at a.Chart.init (highcharts.js:237) at a.Chart.getArgs (highcharts.js:236) at new a.Chart (highcharts.js:235) at Object.a.chart (highcharts.js:235) at HighchartsChartComponent.updateOrCreateChart (highcharts-chart.component.ts:33)

I have include HighchartsChartComponent directly in my source code to avoid other issues.

I have a custom helper class with this code:
`import * as Highcharts from 'highcharts';

import * as HC_exporting from 'highcharts/modules/exporting';
HC_exporting(Highcharts);

import * as HC_solidgauge from 'highcharts/modules/solid-gauge';
HC_solidgauge(Highcharts);
...

export class HighchartsGaugeComponent {
theChart : any;

Highcharts = Highcharts;
chartConstructor = 'chart';
chartOptions = {

  chart: {
      type: 'solidgauge'
  },

  title: null,

  pane: {
      center: ['50%', '85%'],
      size: '140%',
      startAngle: -90,
      endAngle: 90,
      background: {
          backgroundColor: '#EEE',
          innerRadius: '60%',
          outerRadius: '100%',
          shape: 'arc'
      }
  },

  tooltip: {
      enabled: false
  },

  credits: {
      enabled: false
  },

  plotOptions: {
      solidgauge: {
          dataLabels: {
              y: 5,
              borderWidth: 0,
              useHTML: true
          }
      }
  },

  yAxis: {
      min: 0,
      max: 200,
      title: {
          text: 'Speed'
      }
  },

  series: [{
      name: 'Speed',
      data: [80],
      dataLabels: {
          format: '{y}'
      },
      tooltip: {
          valueSuffix: ' km/h'
      }
  }]

};
// Callback function after the chart is create
chartCallback = (chart) => {
if (this.theChart == null) {
this.theChart = chart;
console.log('Set chart: '+this.theChart);
}
};
// Used to indicate when the chart UI should be updated
updateFlag = false;

...
`
Could you please point out what is incorrect with my code?

Thanks very much.

Glad to see an official wrapper from highcharts for angular, is there a planned date for npm release so it can be used in production? Thanks!

Steps:

1. npm install highcharts --save
2. npm install highcharts/highcharts-angular

 import { HighchartsChartComponent } from 'highcharts-angular';

@NgModule({
  declarations: [
    HighchartsChartComponent,
    ...]

4. ng -serve

WARNING in ./node_modules/highcharts-angular/node_modules/@angular/core/esm5/core.js
6561:15-102 Critical dependency: the request of a dependency is an expression
    at ImportLazyContextDependency.getWarnings (C:\Users\xxx\node_modules\webpack\lib\dependencies\ImportContextDependency.js:28:4)
    at Compilation.reportDependencyErrorsAndWarnings (C:\Users\xxx\node_modules\webpack\lib\Compilation.js:677:24)
    at Compilation.finish (C:\Users\xxx\node_modules\webpack\lib\Compilation.js:535:9)
    at applyPluginsParallel.err (C:\Users\xxx\node_modules\webpack\lib\Compiler.js:512:17)
    at C:\Users\xxx\node_modules\tapable\lib\Tapable.js:289:11
    at _addModuleChain (C:\Users\xxx\node_modules\webpack\lib\Compilation.js:481:11)
    at processModuleDependencies.err (C:\Users\xxx\node_modules\webpack\lib\Compilation.js:452:13)
    at _combinedTickCallback (internal/process/next_tick.js:73:7)
    at process._tickCallback (internal/process/next_tick.js:104:9)

npm version : 5.6.0
ng - v :

 @angular/cli: 1.3.1
node: 6.10.2
os: win32 x64
@angular/animations: 4.3.6
@angular/common: 4.3.6
@angular/compiler: 4.3.6
@angular/core: 4.3.6
@angular/forms: 4.3.6
@angular/http: 4.3.6
@angular/material: error
@angular/platform-browser: 4.3.6
@angular/platform-browser-dynamic: 4.3.6
@angular/router: 4.3.6
@angular/cli: 1.3.1
@angular/compiler-cli: 4.3.6
@angular/language-service: 4.3.6

Hello Highcharts team
I'm trying to work with motion to enable player inside my chart

I used to work with https://rawgit.com/larsac07/Motion-Highcharts-Plugin/master/motion.js

Before updating to the latest highcharts-angular, I was able to create a service that do the same thing that motion.js is doing. Bug after updating to the latest, my service is not working anymore, since Highcharts.merge / Highcharts.splat / Highcharts.each / Highcharts.CreateElement / Highcharts.pick are not working anymore.

getting the following error message

• Property 'merge' does not exist on type 'Static'.
• Property 'splat' does not exist on type 'Static'.
• Property 'each' does not exist on type 'Static'.
• Property 'CreateElement' does not exist on type 'Static'.
• Property 'pick' does not exist on type 'Static'.

Thank you for your help.

I want to add indicators in my High Stock Candle stick Chart same as above Screenshot. I am using Angular 5.0 . Please suggest me any library for adding Indicators.

Hi
When i try to implement highcharts-angular, i got below error and i import this component also HighchartsChartComponent,
Node: 8.9.1,
NPM: 5.5.1
Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open '../node_modules\highcharts-angular\src\app\highcharts-chart.component.js'
at Object. (vendor.js:117153)
at webpack_require (bootstrap 4e23c6432567db7976a9:54)
at Object. (index.js:1)
at webpack_require (bootstrap 4e23c6432567db7976a9:54)
at Object.262 (main.ts:5)
at webpack_require (bootstrap 4e23c6432567db7976a9:54)
at Object.244 (signup.service.ts:9)
at webpack_require (bootstrap 4e23c6432567db7976a9:54)
at webpackJsonpCallback (bootstrap 4e23c6432567db7976a9:25)

Just wondering if this wrapper is limited or I am doing something wrong. I would like to use the WindRose chart within my Angular 5 application.

I have copied the example and have setOptions to the same as shown on the website for example

https://www.highcharts.com/maps-demo/polar-wind-rose

my angular componenet ts is as follows

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

@Component({
  selector: 'app-wind-rose',
  templateUrl: './wind-rose.component.html',
  styleUrls: ['./wind-rose.component.scss']
})
export class WindRoseComponent implements OnInit {

  Highcharts = Highcharts;
 
  chartOptions = {
    data: {
      table: 'freq',
      startRow: 1,
      endRow: 17,
      endColumn: 7
    },
      chart: {
        polar: true,
        type: 'column'
    },

    title: {
      text: 'Wind rose for South Shore Met Station, Oregon'
    },

    subtitle: {
      text: 'Source: or.water.usgs.gov'
    },

    pane: {
      size: '85%'
    },

    legend: {
      align: 'right',
      verticalAlign: 'top',
      y: 100,
      layout: 'vertical'
    },

    xAxis: {
      tickmarkPlacement: 'on'
    },

    yAxis: {
      min: 0,
      endOnTick: false,
      showLastLabel: true,
      title: {
        text: 'Frequency (%)'
      },
      labels: {
        formatter: function () {
          return this.value + '%';
        }
      },
      reversedStacks: false
    },

    tooltip: {
      valueSuffix: '%'
    },

    plotOptions: {
      series: {
        stacking: 'normal',
        shadow: false,
        groupPadding: 0,
        pointPlacement: 'on'
      }
    },
  }

  constructor() { }

  ngOnInit() {
    
  }

}

And then in the HTML

<highcharts-chart [Highcharts]="Highcharts"
                  [options]="chartOptions"
                  style="width: 100%; height: 400px; display: block;"></highcharts-chart>

Is the chart type supported ?

I can get hte basic example working for a line graph using series data.

Any help would be appreciated , thank you.

Just upgraded from Angular 5.2.9 to 5.2.10 and the compilation (AOT) is failing!

ERROR in Error during template compile of 'PlatformRef'
  Function calls are not supported in decorators but 'ɵmakeDecorator' was called in 'Injectable'
    'Injectable' calls 'ɵmakeDecorator'.
node_modules/highcharts-angular/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.

I know, it's a dull browser but unfortunately we're forced to run our apps on it...
I've downloaded the demo-app, did a npm install and npm start as described and everything works fine on Chrome and Edge, but in IE11 I see the "loading..." screen and the console says "Exception thrown and not caught" with no callstack and a reference to _for-of.js
(see screenshots)

Want to set the display timezone. Tried:

import * as moment from 'moment-timezone';
import * as Highcharts from 'highcharts';
import * as HighchartsMore from 'highcharts/highcharts-more.src.js';
import * as HighchartsExport from 'highcharts/modules/exporting.src.js';
HighchartsExport(Highcharts);
HighchartsMore(Highcharts);
moment(Highcharts);

Still get: Highcharts error #25: www.highcharts.com/errors/25 on console.

How do I import?

Steve

Hi,

I have an issue, but I might simply be doing something wrong. My requirement is for a trend where the user can add or remove custom y-axes during runtime.

What I've been doing is constructing the axis configuration objects and pushing them into the yAxis array in the configuration. I also set the update option before adding each object, and the objects themselves are assembled and added correctly.

The problem is that the first axis I add is displayed as if it applies to the navigator instead of the main plot, and any subsequent ones are ignored (though they correctly appear in the configuration object).

When I add the same axis manually into the initial configuration object, it displays correctly. However, any dynamically added ones follow the same pattern from that point onward (first one added is displayed in the navigator and the others are not displayed at all),

\

Am I doing something wrong? Should I somehow fetch the chart object and call addAxis? Seems like there must be a more straightforward angulary way to do it. Is this functionality supported with this wrapper in the first place?

Thanks in advance!

Your own demo app work well with a simple ng serve, but with --aot it does not compile:

ERROR in src/app/app.component.html(46,7): : Property 'hcCallback' does not exist on type '{ hcOptions: { title: { text: string; }; subtitle: { text: string; }; plotOptions: { series: { po...'.
  Property 'hcCallback' does not exist on type '{ hcOptions: { title: { text: string; }; subtitle: { text: string; }; series: ({ type: string; da...'.

Same result if I update all the dependencies to the latest versions.

tsc finds the file them no matter what is in exclude in tsconfig.json

then, because import is used, error TS5055 shows up

Workaround:
require works fine

On app.module.ts I have:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';

import { ChartModule } from 'angular2-highcharts';

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

import { APP_CONFIG, TagVal_AppConfig } from './app.config';

import { AppRoutingModule } from './app-routing.module';
import { TradePageComponent } from './components/trade-page/trade-page.component';
@NgModule({
    imports: [
        BrowserModule,
        AppRoutingModule,
        FormsModule,
        HttpModule,
        HttpClientModule,
        ChartModule.forRoot(require('highcharts')),
        JsonpModule,
    ],
    declarations: [
        AppComponent,
        TradePageComponent,
    ],
    providers: [
        { provide: APP_CONFIG, useValue: TagVal_AppConfig },
    ],
    bootstrap:    [ AppComponent ],
})
export class AppModule { }

I also import ChartModule on the component I'm trying to put my chart in, but I get this error: Uncaught Error: Can't resolve all parameters for HighchartsService: (?).

I don't a site to run it live, but my project is here: https://github.com/TroyTaylor/binance-app

Declaring @angular/core, etc. as dependencies can cause a duplicate copy of angular to be installed under highcharts-angular's own node_modules folder, rather than reusing the already-installed one for a project.

For example, these are the directories under my main node_modules folder:

/node_modules
    ...
    /highcharts-angular
        /node_modules
            /@angular   <-- duplicate, and it's Angular 5.2 rather than 6+ which is on my project
            /rxjs
            /symbol-observable
        /src
            /app
                highcharts-chart.component.ts
        .npmignore
        index.js
        LICENSE
        package.json
        README.md

This causes a separate copy of Angular to be used at runtime just for the <highcharts-chart> component, as well as runtime errors like:

StaticInjectorError(Platform: core)[HighchartsChartComponent -> ElementRef]: 
    NullInjectorError: No provider for ElementRef!

@angular/core, etc. should be declared as peerDependencies in package.json, and be given a very loose version number. Something like >=2.0.0, since it looks like this component will be compatible with anything Angular 2.0 and on.

@angular/core, etc. can also be declared under devDependencies for your local highcharts-angular development purposes.

(Thank you for the wrapper)

We've got the hello world app working fine in our angular 5 app. We want to do some computations and update the options. I see that I can update this.chartOptions to the new values but I don't see the graph redrawing. Somewhere on the net / docs I see that we may need to call the redraw function of the api. We need the chart instance even to do things like addSeries etc.

I tried adding a chart: object definition but that didn't seem to help. Did go through instance details section I seem to have missed getting the specific chart instance.

Any suggestions would be welcome - thanks.

How to synchronize multiple highcharts on click event]

Refer code @ [a link] https://stackblitz.com/edit/angular-gjewfv?file=app/app.component.ts
If one chart is clicked (drilled down), other chart also drill down in sync

              **app.component.ts**
            import { Component, OnInit } from '@angular/core';
            import { Chart } from 'angular-highcharts';

            //component having two instances of chart


            @Component({
              selector: 'my-app',
              templateUrl: './app.component.html',
              //styleUrls: ['./line-chart.component.css']
            })





            export class AppComponent implements OnInit {

              constructor() { }

             // Two instances chart and chart1 have been created. 
        //How to synchronize both chart and chart1 on click event so that the drill down property is syncronized.

              chart = new Chart({
                chart: { 
                  type: 'line',
                  zoomType: 'xy',
                },
                title: {
                  text: 'Linechart'
                },
                credits: {
                  enabled: false
                },
              series: [{
              name: 'Operating Systems',
              data: [
                {
                  name: 'Windows',
                  y: 88.19,
                  drilldown: 'windows-versions'
                },
                ['MacOSX', 9.22],
                ['Linux', 1.58],
                ['Others', 1.01]
              ]
            }],
            drilldown: {
              series: [{
                name: 'Windows versions',
                id: 'windows-versions',
                data: [
                  ['Win 7', 55.03],
                  ['Win XP', 15.83],
                  ['Win Vista', 3.59],
                  ['Win 8', 7.56],
                  ['Win 8.1', 6.18]
                ]
              }]
            }

              });

    // Second instance of chart. It is of type pie.

              chart1 = new Chart({

                chart: {
                  type: 'pie',
                  options3d: {
                      enabled: true,
                      alpha: 45
                  }
              },
              title: {
                  text: 'Contents using Pie chart'
              },
              subtitle: {
                  text: '3D donut in Highcharts'
              },
              plotOptions: {
                  pie: {
                      innerSize: 100,
                      depth: 45
                  }
              },
 // Data for the charts. Refer url for working example at 

//https://stackblitz.com/edit/angular-gjewfv?file=app/app.component.ts //which is having two charts . One is pie chart and other one is bar/line chart. //Both are having different instances inside the same component

            series: [{
              name: 'Operating Systems',
              data: [
                {
                  name: 'Windows',
                  y: 88.19,
                  drilldown: 'windows-versions'
                },
                ['MacOSX', 9.22],
                ['Linux', 1.58],
                ['Others', 1.01]
              ]
            }],

Hi ,

I am getting below compilation error :

After importing highcharts module & without making changes in tsconfig -

After updating tsconfig

getting below error :
Cannot redeclare block-scoped variable 'ngDevMode'.
node_modules/highcharts-angular/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.

Followed the steps mentioned in below article:
https://github.com/highcharts/highcharts-angular

**Environment **
Angular CLI: 6.0.7
Node: 8.9.3
Angular: 6.0.3

Hi,
I'm using this wrapper in my angular 5 app and would like to use a LTTB downsampling plugin while drawing the chart.
How do I integrate the plugin using this wrapper ?

Here's a fiddle of the plugin:
http://jsfiddle.net/sveinn_st/FMJAL/

I included the js file of the plugin in index.html but I got the error:
'Highcharts' is not defined

The install instructions here indicate the following:

Installing

Get package from NPM in your Angular app:

npm install highcharts/highcharts-angular

However, this results in the package being installed from Github, not NPM, hence package.json ends up looking like this:

...    
"highcharts-angular": "github:highcharts/highcharts-angular"
...

Therefore, in order to actually get the package from NPM, you must do the following instead:

npm install highcharts-angular

The documentation should be updated to reflect the actual behavior. Additionally, the latest version of this npm package released here is 0.1.0 while the latest on Github is 1.0.0, is there a planned npm publish cycle to stay in sync with the latest release on Github? because it would be very useful to get a new release in npm to include the changes that are in v1.0.0 release

I would like to be able to refresh charts when a section of the chart is clicked (e.g. bar, pie etc.). How to attached events and also do you have examples?

Highcharts integrated with our hybrid mobile app which we developed using ionic Framework with Angular. We have used standalone Highcharts( Piechart and Column chart). The problem here is there are some design issues when we load the highcharts. This issue occurs only in MI 4i mobile in both Chrome browser and hybrid app. Could you please check and let us know the issue?

Chrome version: 61
Android version:5.0

Hi,

I was wondering why this project is not bundled into a module. It feels very unnatural to me to add the highcharts component into the declarations array of my app module instead of declaring a module import in the corresponding imports array (as I do with every single angular dependency usually).

I'm not sure but I think the various build issues that some people encounter would be resolved by doing so.

I'm curious to know the reason behind this choice

Thanks in advance

Angular 2+ is used for new part of Spring MVC application where Highcharts is used. Later, highcharts charting (angular-highcharts) is added to new components written in angular 2+ technology. The same Highcharts 6 version is used at both sides.
At the time angular charting component is initialized Highcharts is already loaded in web page and following Uncaught Error: Highcharts error #16: www.highcharts.com/errors/16 is thrown.

Highcharts is not reloaded by angular component and H.error(code, true) is executed. What is the best way to resolve this conflict?
Should additional Highcharts_X global variable for legacy web application be created? I don't prefer this approach because it is productively used by Higcharts and then it should be changed in the source code at many places.(?)

Is it possible to tell angular-higcharts that the library is already loaded and to use that one?
Or to let it be reloaded without breaking JS with the error?

I have the latest version of Angular installed (v6.0.9)

When I install highcharts-angular, I get the message:

$ npm install highcharts-angular --save
npm WARN [email protected] requires a peer of @angular/common@^2.0.0-rc.0 || ^2.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/core@^2.0.0-rc.0 || ^2.0.0 but none is installed. You must install peer dependencies yourself.

The Readme states that it has been tested with Angular v6. What do I need to do to fix this?

Thanks,
Steven

This library seems not able to update series dynamically(add or remove series collection)
because 'oneToOne' argument is false.

I think it is better to enable to update series by specifying oneToOne to be true or enabling to set oneToOne argument at @input or something.

series: [{
          type: 'candlestick',
          id: 'aapl',
          name: 'AAPL Stock Price',
          data: data,
          zIndex: 1
        }, {
          type: 'pivotpoints',
          linkedTo: 'aapl',
          zIndex: 0,
          lineWidth: 1,
          dataLabels: {
            overflow: 'none',
            crop: false,
            y: 4,
            style: {
              fontSize: 9
            }
          }
        }, {
          type: 'macd',
          yAxis: 1,
          linkedTo: 'aapl'
        }]

I have formed the series like above, but I am getting the below error. Please let me know how to import or use the indicators.

Highcharts Error #17
The requested series type does not exist
This error happens when you are setting chart.type or series.type to a series type that isn't defined in Highcharts. A typical reason may be that your are missing the extension file where the series type is defined, for example in order to run an arearange series you need to load the highcharts-more.js file.

ERROR in ./node_modules/highcharts-angular/src/app/highcharts-chart.component.ts
Module build failed: Error: /Volumes/repo/test/ng4-highsoft/node_modules/highcharts-angular/src/app/highcharts-chart.component.ts is not part of the compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
at AngularCompilerPlugin.getCompiledFile (/Volumes/repo/test/ng4-highsoft/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:619:23)
at plugin.done.then (/Volumes/repo/test/ng4-highsoft/node_modules/@ngtools/webpack/src/loader.js:467:39)
at
@ ./node_modules/highcharts-angular/index.js 1:17-67
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

webpack: Failed to compile.

I tried installing the package even with the latests dev branch, and still the oneToOne change added because of issue 20 (Update series dynamically #20) is not there. It says it will be added for next release. Couldn't there be a patch release for that minor change. I edited the HighchartsChartComponent class myself, but my application would brake, when other devs update/install highchats-angular. Thank you

I am trying to create a bubble type chart but cannot due to being unable to figure out how to import highcharts-more.

trying to recreate this chart
https://jsfiddle.net/kevchadders/ary52wu3/

We have just upgrade to angular6 and have this issue

chunk {vendor} vendor.js, vendor.js.map (vendor) 325 kB [initial] [rendered]

ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
node_modules/highcharts-angular/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.

ℹ ｢wdm｣: Failed to compile.

Angular CLI: 6.0.1
Node: 9.11.1
OS: darwin x64
Angular: 6.0.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, upgrade

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.5.13
@angular-devkit/build-angular     0.5.13
@angular-devkit/build-optimizer   0.5.13
@angular-devkit/core              0.5.13
@angular-devkit/schematics        0.6.1 (cli-only)
@angular/cli                      <error>
@ngtools/webpack                  6.0.0-rc.11
@schematics/angular               0.6.1 (cli-only)
@schematics/update                0.6.1 (cli-only)
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.6.0

Tried incorporating this control into several pages of an existing Angular app and noticed that memory usage kept creeping up (Chrome developer tools) while navigating around the app. Took a snapshot of the heap ... and there were lots of Highcharts objects each around 50K in size. It seems that when navigating off a page, the Highcharts objects were not getting picked up by GC even after clicking the 'Collect Garbage' button.

In order to try and isolate the problem, created a variation of your sample that has 2 pages, to test the behavior when navigating. Each page has a link to the other, so you can click back and forth and watch the memory usage continue to increase.

Put this up on Stackblitz ([https://stackblitz.com/edit/angular-s6qpav?file=src%2Fapp%2FhcChartStd%2FhcChartStd.component.ts]).

To duplicate the issue:

• go to the link above in Chrome
• open Chrome developer tools and click on the Memory tab
• click the garbage can icon to run GC
• note the amount of memory on the line labelled angular-s6qpav.stackblitz.io ... (that's the project)
• click the Toggle to Page 1/2 buttons about 10 times.
• click the garbage can icon again
• note that the memory used is higher than before
• repeat and you'll see the memory keep climbing

Since the original post, I added a couple of new pages the Stackblitz. These are based on a slightly different version of the wrapper (hcChartStd.component.ts). It has an ngOnDestroy event that sets the chart reference to null. The charts are similar to those in my system.

To access these pages, click on the Go to Users Tests link. There are 2 pages and buttons on the pages to toggle back and forth.

The this.chart = null; in ngOnDestroy seems to have no effect.

EDIT:
Adding this.chart.destroy(); in ngOnDestroy seems to solve the problem.

I'm trying to run Highcharts API in an Angular 4+ application but I'm getting this error message to import Highcharts at the app.module.ts file:

[ts]
Could not find a declaration file for module 'highcharts-angular'. 'c:/Projects/rh-analytics/node_modules/highcharts-angular/index.js' implicitly has an 'any' type.
Try npm install @types/highcharts-angular if it exists or add a new declaration (.d.ts) file containing declare module 'highcharts-angular';

The typescript version is 2.5.2.