Import Highcharts export-csv

[CristyTarantino]

OS

El Capitan

Versions.

1.0.0-beta-25.5

Repro steps.

Hi,

I am trying to import http://www.highcharts.com/plugin-registry/single/7/Export%20Data into my angular app.
Does anybody know how I could import it and use it specifically to one component in the app.

Thank you.

[beeman]

@CristyTarantino looking at this demo http://jsfiddle.net/highcharts/cqjvD/ it looks like you need to have the highcharts package installed and available on your page.

So make sure you install that package, and the packge for csv export from npm, then you can include them in your page:

const Highcharts = require('highcharts');

import 'highcharts/modules/exporting';
import 'highcharts-export-csv';

In order to have it render to an element on your page, you need to have a reference to your element.

In your template you want to create a div like this: <div #container></div>

In you component you create a reference to this element: @ViewChild('container') containerRef; (make sure to include the dependencies).

Now in your ngOnInit lifecycle hook you can use this referenced element and feed it into Highcharts.

My test component looks like this:

import { Component, ViewChild, OnInit } from '@angular/core';

const Highcharts = require('highcharts');

import 'highcharts/modules/exporting';
import 'highcharts-export-csv';

@Component({
  selector: 'app-root',
  template: '<div #container></div>',
})
export class AppComponent implements OnInit {
  @ViewChild('container') containerRef;

  constructor() {
    console.log(Highcharts);
  }

  ngOnInit() {
    const chart = new Highcharts.Chart({
      chart: {
        renderTo: this.containerRef.nativeElement
      },
      title: {
        text: 'Categorized chart'
      },
      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      },
      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]
      }]
    });
  }
}

[CristyTarantino]

@beeman thanks for your help. I tried to apply your method but it didn't work. After researches and a bit of trying different solutions, this is what fixed it for me.

I put the export-csv.js file into a folder in the src/scripts.

import * as Highcharts from "highcharts";
window["Highcharts"] = Highcharts;

import * as HighchartsExporting from "highcharts/modules/exporting";
import * as HighchartsOfflineExporting from "highcharts/modules/offline-exporting";

HighchartsExporting(Highcharts);
HighchartsOfflineExporting(Highcharts);
require('script-loader!scripts/export-csv');

@Component({
  selector: 'app-root',
  template: '<div #container></div>',
})
export class AppComponent implements OnInit {
  @ViewChild('container') containerRef;

  constructor() {
    console.log(Highcharts);
  }

  ngOnInit() {
    const chart = new Highcharts.Chart({
      chart: {
        renderTo: this.containerRef.nativeElement
      },
      title: {
        text: 'Categorized chart'
      },
      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      },
      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]
      }]
    });
  }
}

[filipesilva]

Glad to hear it's sorted, and thanks for the community help @beeman!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}