CODEWITHSUNDEEP
angularcsvhighcharts
J.Doe
J.Doe

Reputation: 596

Display data from CSV in Highcharts with Angular

I want to display data from a csv file in my Highcharts Diagram.

I found this link and tried to use what is described in there: https://www.highcharts.com/docs/working-with-data/data-module

My output-graph.component.ts Code now looks like this:

export class OutputGraphComponent implements OnInit {
  public options: any = {
    chart: {
      type: 'column'
  },
  data: {
      csvURL: 'assets/test.csv'

  },
  title: {
      text: window.location.origin
  },
  yAxis: {
      title: {
          text: 'Units'
      }
  }
  }
  constructor() { }

  ngOnInit(){
    Highcharts.chart('container', this.options);
  }
}

and my csv looks like this:

Categories,Apples,Pears,Oranges,Bananas
John,8,4,6,5
Jane,3,4,2,3
Joe,86,76,79,77
Janet,3,16,13,15

However, when i start the Site, the Highcharts diagram is just blank on with the words "No data to display"

What am I doing wrong? How can I display a csv file in Highcharts with Angular?

Upvotes: 0

Views: 920

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

You need to import and initialize the data module:

import * as Highcharts from 'highcharts';
import HC_data from 'highcharts/modules/data';
HC_data(Highcharts);

Docs: https://github.com/highcharts/highcharts-angular#to-load-a-module

Upvotes: 1

Related Questions