cebor / angular-highcharts Goto Github PK

I just installed angular-highcharts and highcharts, did everything that was documented to start basic chart. But I ma getting this error:

Uncaught Error: Template parse errors:
Can't bind to 'chart' since it isn't a known property of 'div'. ("
  <button (click)="add()">Add Point!</button>
  <div [ERROR ->][chart]="chart"></div>
  "): ng:///EDLModule/EDLComponent.html@2:7
    at syntaxError (compiler.es5.js:1694)
    at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (compiler.es5.js:12937)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (compiler.es5.js:27133)
    at compiler.es5.js:27052
    at Set.forEach (<anonymous>)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (compiler.es5.js:27052)
    at compiler.es5.js:26939
    at Object.then (compiler.es5.js:1683)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26938)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26867)

below is my component:

import { Chart } from 'angular-highcharts';

@Component({
  selector: 'app-edl',
  template: `
  <button (click)="add()">Add Point!</button>
  <div [chart]="chart"></div>
  `
  
})
export class EDLComponent extends BaseWidget {
   /**
   * testing highcharts here
   */
  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));
  }
}

A plunker demo showing all files and configuration required will help to setup. Can you guide the process to setup this. Also is this angular 4.4.3 comapatible ?

Hello and thank you for this great library!

I'm trying to use highchart modules, but cant get any of those to work.

I have this on my sharedmodule

import { ChartModule, Highcharts } from 'angular-highcharts';
import exporting from 'highcharts/modules/exporting.src.js';
exporting(Highcharts);

And getting this error: Uncaught TypeError: Cannot read property 'defaultOptions' of undefined at exporting.src.js:29

Any ideas?

ng -v
@angular/cli: 1.4.4
node: 7.8.0
os: darwin x64
@angular/animations: 4.4.4
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/core: 4.4.4
@angular/forms: 4.4.4
@angular/http: 4.4.4
@angular/platform-browser: 4.4.4
@angular/platform-browser-dynamic: 4.4.4
@angular/router: 4.4.4
@angular/cli: 1.4.4
@angular/compiler-cli: 4.4.4
typescript: 2.2.2

Nice demo!!! Nice loadsize !!!

After randomly or repeatedly clicking buttons
App loaded!!
2vendor.402d3b4.bundle.js:8 ERROR TypeError: Cannot read property 'data' of undefined
at t.addPoint (vendor.402d3b4.bundle.js:309)
at n.addPoint (main.058f3e0.bundle.js:1)
at Object.handleEvent (main.058f3e0.bundle.js:1)
at Object.w [as handleEvent] (vendor.402d3b4.bundle.js:99)
at Object.handleEvent (vendor.402d3b4.bundle.js:99)
at Xt (vendor.402d3b4.bundle.js:78)
at vendor.402d3b4.bundle.js:78

I used your code exaclty, it compiles but once you run it i get the following error:
Could anyone perhaps help ?

zone.js:642 Unhandled Promise rejection: Template parse errors:
Can't bind to 'chart' since it isn't a known property of 'div'. ("

Version 5.3.2 of rxjs just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As rxjs is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

At javascript:

tooltip: {
    formatter: function () {
        return new Date(this.x).toLocaleString() + '<br><b>内存：</b>' + byte_to_string(this.y)
    }
}

But typescript this is a class.

Hi all,
i have a chart with two series (spline and column).

This is my app.component.s

import {Component} from '@angular/core';
import {Chart} from 'angular-highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  template: `
    <div [chart]="chart" ></div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  chart= new Chart({
    chart: {
      backgroundColor: '#f2f2f2',
      borderColor: '#e8e8e8',
      height: 395,
      width: 660,
    },
    colors: ['#4ec5c1'],
    title: {
      text: 'Movements per month'
    },
    xAxis: {
      categories: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
    },
    yAxis: {
      floor: 0,
      ceiling: 33000,
      title: {
        text: null
      },
      labels: {
        format: '{value} €'
      }
    },
    plotOptions: {
      series: {
        connectNulls: true,
        marker: {
          radius: 6,
          states: {
            hover: {
              radiusPlus: 2,
              fillColor: '#ffffff',
              lineColor: '#4ec5c1',
              lineWidthPlus: 5
            }
          }
        }
      }
    },
    series: [{
      type: 'spline',
      name: null,
      data: [1000, 1300, 800, 920, null, null, 1283, 1250, 0, 0, 1280, 1220],
    }, {
      type: 'column',
      name: null,
      data: [800, 1300, 800, 920, null, null, 1283, 1250, 0, 0, 1280, 1220],
      enableMouseTracking: false
    }],
    tooltip: {
      shadow: false,
      shared: true,
      borderRadius: 20,
      borderColor: '#54c6be',
      backgroundColor: '#54c6be',
      style: {
        color: '#fff'
      },
      useHTML: true,
      headerFormat: null,
      pointFormat: '{point.y} €'
    },
    credits: {
      enabled: false
    }
  });

}

If i try to add the option: enableMouseTracking: false for disabled tooltip on the column serie i have an compilation error:

D:/wamp64/www/angular-test/src/app/app.component.ts (61,7): Argument of type '{ chart: { backgroundColor: string; borderColor: string; height: number; width: number; }; colors...' is not assignable to parameter of type 'Options'. Types of property 'series' are incompatible. Type '({ type: string; name: null; data: number[]; } | { type: string; name: null; data: number[]; enab...' is not assignable to type 'IndividualSeriesOptions[]'. Type '{ type: string; name: null; data: number[]; } | { type: string; name: null; data: number[]; enabl...' is not assignable to type 'IndividualSeriesOptions'. Type '{ type: string; name: null; data: number[]; enableMouseTracking: boolean; }' is not assignable to type 'IndividualSeriesOptions'. Object literal may only specify known properties, and 'enableMouseTracking' does not exist in type 'IndividualSeriesOptions'.

Can you help me please, im lost?

use demo in html:
<div [chart]="chart"></div>

use version:
    "@angular/core": "4.3.2",
    "angular-highcharts": "4",
    "@types/highcharts": "^5.0.10",
    "highcharts": "^6.0.2",

hello
is there a possibility to do something like this in angular2 too?
http://pablojim.github.io/highcharts-ng/examples/example.html
I have a form where i enter some data, I always redraw the chart when a value is changed... sorry new to angular2...

I was trying to use pie chart to pie chart drilldown, but it looks like it has used in highchart.js but not implemented in this package.

https://www.highcharts.com/demo/pie-drilldown
I am looking for exact same feature as given in above link.
Can you please help me with that ?
Thanks

Hi,

I am looking for the plotOptions inside the responsive property, but I cannot find it? Is it supported within the library?

this.chart = new Chart({
      chart: {
        type: 'line'
      },      
      series: [{
        name: 'Line 1',
        data: [1, 2, 3]
      }],
      responsive: [{
        rules: [{
          condition: {
            maxWidth: 1000
          },
          chartOptions: {
            plotOptions: {        //  Syntax error here, plotOptions cannot be found

            }
          }
        }]
      }]
    });

Please help, thanks for the awesome wrapper btw :)

How can I refresh the data. I have modal that opens I hook to ngOnChanges to call the new data. Problem is that the graph is never updated:

getChartData(id: number) {
this.mainService.getPriceHistory(id).subscribe(
(data) => {
console.log(data);
this.chart.addSerie(data);
}
);
}

Any help?

Thnaks

Hello,

Is it possible to use "style mode" and "patterns" ?
I want to add a pattern on a column chart but i am not able to use the "defs tag" (https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns).

Is there some snippet or jsfiddle example of usage with an angular component ?

Thanks

hello,

I have the problem that the chart is not rendered to its container.
I tried some css but no success yet. Either the chart is to small like in the picture - or the chart covers the whole page.... as soon as I resize the window it gets rendered correctly.... reflow or redraw - no success.
I could run a resize function after the content is inialiazied... but this just can't be the solution...
any ideas? somebody?

`.chart {
display: block;
border: 3px solid yellow;

}

.chart-wrapper {
border: 3px solid orangered;
width: 100% !important;
}`

<div class="row" style="padding: 0.625rem;" id="testing"> <div class="chart-wrapper" id="chart-wrapper"> <div class="chart" [chart]="chart" id="chart-wrapper0" name="output" ></div> </div> </div>

Hi,
When I'm trying to create a gauge chart , I get #17 error: https://www.highcharts.com/errors/17
Do I have to import something more to use gauge ?
Thank you,
Alex

Do you support other than type "line"
I tried gauge and I am getting errors
can you provide some example?

I am trying to use this awesome component with Webpack but have the following issue in the Chrome console:

(...)node_modules\angular-highcharts\chart.d.ts
(1,1): error TS2688: Cannot find type definition file for 'highcharts'.

Any idea what I could be doing wrong?

I successfully able to create line chart but when I am changing chart type to solidgauge , I am getting errors ,

I followed the same steps in npmjs of this library
https://www.npmjs.com/package/angular-highcharts

Please let me know what types i need to import in order to use solidgauge

chart = new Chart({
        chart: {
            type: 'solidgauge',
            marginTop: 50
        },

        title: {
            text: 'Activity',
            style: {
                fontSize: '24px'
            }
        },

        tooltip: {
            borderWidth: 0,
            backgroundColor: 'none',
            shadow: false,
            style: {
                fontSize: '16px'
            },
            pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
            positioner: function (labelWidth) {
                return {
                    x: 200 - labelWidth / 2,
                    y: 180
                };
            }
        },

        pane: {
            startAngle: 0,
            endAngle: 360,
            background: [{ // Track for Move
                outerRadius: '112%',
                innerRadius: '88%',
                backgroundColor: 'red',
                borderWidth: 0
            }, { // Track for Exercise
                outerRadius: '87%',
                innerRadius: '63%',
                backgroundColor: 'blue',
                borderWidth: 0
            }, { // Track for Stand
                outerRadius: '62%',
                innerRadius: '38%',
                backgroundColor: 'green',
                borderWidth: 0
            }]
        },

        yAxis: {
            min: 0,
            max: 100,
            lineWidth: 0,
            tickPositions: []
        },

        plotOptions: {
            solidgauge: {
                dataLabels: {
                    enabled: false
                },
                linecap: 'round',
                stickyTracking: false

            }
        },
        series: [{
            name: 'Move',
            data: [{
                color: 'red',
                radius: '112%',
                innerRadius: '88%',
                y: 80
            }]
        }, {
            name: 'Exercise',
            data: [{
                color: 'blue',
                radius: '87%',
                innerRadius: '63%',
                y: 65
            }]
        }, {
            name: 'Stand',
            data: [{
                color: 'green',
                radius: '62%',
                innerRadius: '38%',
                y: 50
            }]
        }]
    });

Hello,
is it possible to use HighStock and Highcharts Modules like Exporting?

thanks

Close this report when you want. Not an issue.

I researched 3 main libraries on NPM. After careful examination I choose this library and I'm certain it was the right choice.

Other Libraries

• Had issues that had not been addressed in quite some time
• Had no updates in months
• Didn't have the best looking ngOnDestroy aka clean-up code
• Had poor documentation

I really like this library. Five thumbs up. Great job!

Can any 1 tell me does highchart support variwide charts in angular program ? .. if it supports can any 1 tell me how to use it because giving type: 'variwide' gives error in console like ERROR Error: Highcharts error #17: www.highcharts.com/errors/17
Stack trace:
../../../../highcharts/highcharts.js/</</a.error@http://172.18.1.71:2000/5.chunk.js:2197:49
initSeries@http://172.18.1.71:2000/5.chunk.js:2418:45
firstRender/<@http://172.18.1.71:2000/5.chunk.js:2442:40
../../../../highcharts/highcharts.js/</</a.each@http://172.18.1.71:2000/5.chunk.js:2215:463
firstRender@http://172.18.1.71:2000/5.chunk.js:2442:13

https://www.npmjs.com/package/angular2-highcharts
i used the above link to integrate in my pgm ... P.S line , pie charts are working fine using the above method ...

Hi I was looking to set up useUTC option. There is way to do something like this?

    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });

Thanks.

hello,

well I've tried some different highcharts wrapper but this is definitly my favourite one!
The last things I'm really missing is the option to display no data available (comming from the highcharts-more) and to be able to remove a series... is this on your roadmap in mind?

would love to have those options! 👍

I use the [email protected], when execute ng server, the console print ERROR in ChartModule is not an NgModule, but is can use in browser.

and when execute ng build --aot is have an error

I have tried to add ColumnRange chart but it's giving "Highcharts error #17: www.highcharts.com/errors/17" Error.

`chart: {
type: 'columnrange',
inverted: true
},

        title: {
            text: 'Temperature variation by month'
        },

        subtitle: {
            text: 'Observed in Vik i Sogn, Norway'
        },

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

        yAxis: {
            title: {
                text: 'Temperature ( °C )'
            }
        },

        tooltip: {
            valueSuffix: '°C'
        },

        plotOptions: {
            columnrange: {
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                        return this.y + '°C';
                    }
                }
            }
        },

        legend: {
            enabled: false
        },

        series: [{
            name: 'Temperatures',
            data: [
                [-9.7, 9.4],
                [-8.7, 6.5],
                [-3.5, 9.4],
                [-1.4, 19.9],
                [0.0, 22.6],
                [2.9, 29.5],
                [9.2, 30.7],
                [7.3, 26.5],
                [4.4, 18.0],
                [-3.1, 11.4],
                [-5.2, 10.4],
                [-13.5, 9.8]
            ]
        }]`

I am trying to change the default UTC to false.

import { ChartModule, Highcharts } from '../../node_modules/angular-highcharts';

Highcharts.setOptions({
   global: {
     useUTC: false
   }
 });

But It shows an error:

app.module.ts:13 Uncaught TypeError: Cannot read property 'setOptions' of undefined
    at Object.../../../../../src/app/app.module.ts (app.module.ts:13)
    at __webpack_require__ (bootstrap eafd89d709b4c84e1dec:54)
    at Object.../../../../../src/main.ts (environment.ts:8)
    at __webpack_require__ (bootstrap eafd89d709b4c84e1dec:54)
    at Object.0 (main.bundle.js:367)
    at __webpack_require__ (bootstrap eafd89d709b4c84e1dec:54)
    at webpackJsonpCallback (bootstrap eafd89d709b4c84e1dec:25)
    at main.bundle.js:1
../../../../../src/app/app.module.ts @ app.module.ts:13
__webpack_require__ @ bootstrap eafd89d709b4c84e1dec:54
../../../../../src/main.ts @ environment.ts:8
__webpack_require__ @ bootstrap eafd89d709b4c84e1dec:54
0 @ main.bundle.js:367
__webpack_require__ @ bootstrap eafd89d709b4c84e1dec:54
webpackJsonpCallback @ bootstrap eafd89d709b4c84e1dec:25
(anonymous) @ main.bundle.js:1

How to set UTC to false, Anyone who can help.

Thanks in Advance,
Ahmad

Hello,

I have updated angular-highcharts from 3.4.7 to 4.0.5. After that I have been getting errors. Is there any changes do i need to make after updating version?

When I'm building my Angular app I run into the following issue:

** NG Live Development Server is listening on 0.0.0.0:4200, open your browser on http://localhost:4200/ **
Date: 2017-10-13T08:35:36.571Z
Hash: ab62cbc5db0485bf17d8
Time: 8720ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 1.06 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 323 bytes {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 85.1 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 338 kB [initial] [rendered]

ERROR in /var/www/front/node_modules/angular-highcharts/highcharts.d.ts (1,8): Module '"/var/www/front/node_modules/@types/highcharts/index"' has no default export.

webpack: Failed to compile.

Here are my dependencies:

"dependencies": {
    "@angular/animations": "^4.4.5",
    "@angular/common": "^4.4.5",
    "@angular/compiler": "^4.4.5",
    "@angular/core": "^4.4.5",
    "@angular/forms": "^4.4.5",
    "@angular/http": "^4.4.5",
    "@angular/platform-browser": "^4.4.5",
    "@angular/platform-browser-dynamic": "^4.4.5",
    "@angular/router": "^4.4.5",
    "angular-2-local-storage": "^1.0.1",
    "angular-highcharts": "^3.5.0",
    "core-js": "^2.5.1",
    "file-saver": "^1.3.3",
    "highcharts": "^6.0.1",
    "include-media": "^1.4.9",
    "microtip": "^0.2.2",
    "moment": "^2.19.1",
    "mydatepicker": "^2.0.31",
    "mydaterangepicker": "^4.1.9",
    "ng2-validation": "^4.2.0",
    "ngx-clipboard": "^8.1.1",
    "ngx-smart-modal": "^2.0.4",
    "ngx-tabset": "^1.2.0",
    "normalize-scss": "^7.0.0",
    "rxjs": "^5.4.3",
    "web-animations-js": "^2.3.1",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "^1.4.7",
    "@angular/compiler-cli": "^4.4.5",
    "@angular/language-service": "^4.4.5",
    "@types/highcharts": "^5.0.7",
    "@types/jasmine": "~2.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^8.0.34",
    "codelyzer": "^3.2.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "json-server": "^0.12.0",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-selenium-launcher": "^1.0.1",
    "npm-run-all": "4.1.1",
    "protractor": "~5.1.2",
    "ts-node": "^3.3.0",
    "tslint": "^5.7.0",
    "typescript": "^2.5.3"
  }

Add module field: package.json
Add rollup for umd bundling.

FYI: https://github.com/angular/angular/tree/master/modules/%40angular/core

I can use highchart to set the export button .

ref:https://code.hcharts.cn/highcharts/hhhhsu/1

but how can i use ng-highchart to set the exporting button? thanks

I am using angular 4 and I want to show the series 1 value got selected by default when we load the page and also it should show always without mouse hover, but when i mouse hover the second cirle it should show the corresponding value.

https://stackoverflow.com/questions/45014033/highcharts-activity-gauge-need-to-display-first-series-data-without-mouseover

import { Chart } from 'angular-highcharts';
import { Highcharts } from 'angular-highcharts';
declare var require: any;
require('highcharts/highcharts-more')(Highcharts);
require('highcharts/modules/solid-gauge')(Highcharts);

this.chart = new Chart({
        chart: {
            type: 'solidgauge',
            marginTop: 50,
            backgroundColor: 'transparent'
        },
        title: {
            text: 'Incremental Price Monitor',
            style: {
                fontSize: '24px',
                color: 'ghostwhite',
                display: 'none'
            }
        },
        credits: {
            enabled: false
        },
        tooltip: {
            borderWidth: 0,
            backgroundColor: 'none',
            shadow: false,
            style: {
                fontSize: '16px',
                color: 'ghostwhite'
            },
            // pointFormat: '<span style="font-size:5em; color: {point.color}; font-weight: bold">{point.y}%</span><br><span style="font-size:1em; color: {point.color}; font-weight: bold">{series.name}</span>',
            pointFormat: '<span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}mw</span>',
            positioner: function (labelWidth) {
                return {
                    x: 200 - labelWidth / 2,
                    y: 210
                };
            }
        },
        pane: {
            startAngle: 0,
            endAngle: 360,
            background: [{ // Track for Move
                outerRadius: '112%',
                innerRadius: '88%',
                backgroundColor: '#1B5795',
                borderWidth: 0
            }, { // Track for Exercise
                outerRadius: '87%',
                innerRadius: '63%',
                backgroundColor: '#33683C',
                borderWidth: 0
            }]
        },
        yAxis: {
            min: 0,
            max: 100,
            lineWidth: 0,
            tickPositions: []
        },
        plotOptions: {
            solidgauge: {
                dataLabels: {
                    enabled: false
                },
                linecap: 'round',
                stickyTracking: false
            }
        },
        series: [{
            name: 'Target Ramp',
            data: [{
                color: this.forecasted_he_target_generation_Color,
                radius: '112%',
                innerRadius: '88%',
                y: this.forecasted_he_target_generation
            }]
        }, {
            name: 'MW Actual',
            data: [{
                color: this.current_generation_Color,
                radius: '87%',
                innerRadius: '63%',
                y: this.current_generation
            }]
        }]
    });

This property 'wrap' does not exist in 'Static' interface, How can I convert below code to angular

Highcharts.wrap(Highcharts.Tooltip.prototype, 'hide', function (p, delay) {
  if (this.options.alwaysVisible) {
     return this.refresh(this.chart.series[0].data[0])
   }
   p.call(this, delay)
})

Does this plugin have theme support? it would be nice to have a way of doing something like this directly with Angular.

Looks like 'HighchartsOptions' is not in the @types module recommended in the readme. My charts will render, but I get a series of errors looking like this:

client:80 [default] /...node_modules/angular-highcharts/src/chart.d.ts:7:13 Cannot find name 'HighchartsOptions'.

Any thoughts?

I am trying to create boxplot chart. but it is throwing error.

Highcharts error #17: www.highcharts.com/errors/17
at Object.a.error (highcharts.js:10)
at a.Chart.initSeries ....

i have imported chartmodule on my appcomponent:
import { ChartModule } from 'angular-highcharts';
and Chartmodule injected into import array.

Hi,

Is it possible to register event handlers like legendItemClick or point select events on the tag where [chart] directive ws placed?

Thanks in advance, plunker example would be nice 😉

I want to create gantt chart as shown bellow image:

Hi,

It seems your Demo link gets a 404 error currently

hello,

since updating to the latest highcharts and angular-highcharts i'm running into this highcharts 27 error... you need to include boost-canvas and boost .js... I added those but the error still appears. Did anyone manage this?

using systemjs.

https://www.highcharts.com/errors/27

regards

I am trying to do something like:

this.charts.options.title.text = this.currentDate.toDateString();

But the title does not get updated. Is there a way to "refresh" the highcharts below even if the data did not change?

In old angular highchart(version:3.7.0), it was working check bellow:
series: [
{
//showInLegend: false,
name: 'Target',
color: '#FF0000',
data: diseaseAreaTargetData,
pointPadding: 0.3,
pointPlacement: -0.2
}, {
//showInLegend: false,
name: 'Actual',
color: '#8085e9',
data: diseaseAreaActualData,
pointPadding: 0.4,
pointPlacement: -0.2
}]
]
In new angular highchart(version:5.0.1), pointPadding and pointPlacement is not working.

Highcharts has functions to update and destroy a chart. When data changes every few seconds, the chart can be updated instead of created over and over again without the ability of being destroyed.

I would like to be able to do one of the things below to prevent memory leaks.

private createHighchart (options: HighchartOptions): void {
    if(this.chart) {
      this.chart.update(options);
    }
    else {
      this.chart = new Highchart(options);
    }
  }

private createHighchart (options: HighchartOptions): void {
    if(this.chart) {
      this.chart.destroy();
    }
    else {
      this.chart = new Highchart(options);
    }
  }

How do I set lang. This code doesn't work:

// Configuracion global de highcharts (definicion de idioma)
Highcharts.setOptions({
lang: {
months: ["Enero", 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
weekdays: ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
shortMonths: [ 'Ene' , 'Feb' , 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
loading: 'Cargando...',
exportButtonTitle: 'Exportar',
printButtonTitle: 'Importar',
rangeSelectorFrom: 'De',
rangeSelectorTo: 'A',
rangeSelectorZoom: 'Periodo',
downloadPNG: 'Descargar gráfica PNG',
downloadJPEG: 'Descargar gráfica JPEG',
downloadPDF: 'Descargar gráfica PDF',
downloadSVG: 'Descargar gráfica SVG',
printChart: 'Imprimir Gráfica',
decimalPoint: ',',
thousandsSep: '.'
}

});

I'm getting this error when using "ng serve" command with angular-cli. I have the lastest version of highcharts (6.0.2), angular0highcharts(5.0.3), and @types/highcharts(5.0.9).

I'm running on Windows 10, angular 4.0.0, and using Google Chrome.

ERROR in Metadata version mismatch for module ..(my directory)/node_modules/angular-highcharts/angular-highcharts.d.ts, found version 4, expected 3

In multiple series pie chart ,cannot give size and gives error as size is not a known property for individual series object

Hey there,

i'm trying to figure out how to access the methods like reflow or setSize from controller.
In regular javascript it was always just like get the div element (#somechart).highcharts().reflow()... As mentioned in the example I'd suggest I should do something like this.chart.reflow but none of them works. I have my charts wrapped in angular2 grid and as soon as the size of the widget changed the chart needs to be rerendered.

hope anyone can help out.

cheers

I am trying to use visible property inside series like:

 series: [{
        name: 'Tokyo',
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        visible: false
    }]

The code works for simple highcharts not for angular-highcharts, whenever I try to implement it gives the following error:

Types of property 'series' are incompatible.
    Type '{ name: string; data: number[]; visible: boolean; }[]' is not assignable to type 'IndividualSeriesOptions[]'.
      Type '{ name: string; data: number[]; visible: boolean; }' is not assignable to type 'IndividualSeriesOptions'.
        Object literal may only specify known properties, and 'visible' does not exist in type 'IndividualSeriesOptions'. 

Highchart has poor performance as soon as many points exist.
Is there a solution to this problem?
I can't solve the problem with 'boost'.
Currently my graphic has about 200000 points with 4 series

plnkr example could be helpful if someone has a solution

How can I include solid-gauge chart? I tried using the solution mention to include exporting but it does not work.
I am working with ionic 3.6.1