Using highcharts SvgRenderer class in angular 4

Question

How can I use HighCharts SvgRenderer class in an angular 4 typescript project to render images inside a high chart?

Answer 1

Just like in regular Highcharts:

var chart = this.chart = Highcharts.chart(this.container.nativeElement, {
  series: [{
    data: [1,2,3,4,5]
  }]
})

chart.renderer.image('https://www.highcharts.com/samples/graphics/sun.png', 100, 100, 30, 30)
.add();

Here's a live working example of using SVGRenderer in Angular 4 project: http://plnkr.co/edit/tZIGkSXoogeCyUReARaP?p=preview

Answer 2

Using angular2-highcharts you have to update chart-events

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule, Component }    from '@angular/core';
import { BrowserModule }          from '@angular/platform-browser';
import { ChartModule }            from 'angular2-highcharts'; 

@Component({
    selector: 'my-app',
    styles: [`
      chart {
        display: block;
      }
    `],
    template: `<chart [options]="options" (load)="onChartload($event)"></chart>`
})
class AppComponent {
    constructor() { 
        this.options = {
            title : { text : 'simple chart' },
            series: [{
                data: [29.9, 71.5, 106.4, 129],
            }]
        };
    }
    options: Object;
    onChartload (e) {
      e.context.renderer.image('https://www.highcharts.com/samples/graphics/sun.png', 100, 100, 30, 30)
              .add();

    }
}

@NgModule({
  imports:      [BrowserModule, ChartModule.forRoot(require('highcharts'))],
  declarations: [AppComponent],
  bootstrap:    [AppComponent]
})
class AppModule { }


platformBrowserDynamic().bootstrapModule(AppModule);

Plunker demo