CODEWITHSUNDEEP
angularcsvhighchartsangular-data
J.Doe
J.Doe

Reputation: 596

How do I manage the imports in Angular correctly?

I am trying to import the Data Modules into Angular for reading CSV in highcharts like this:

import * as HighchartsMore from "highcharts/highcharts-more";
import * as HighchartsExporting from "highcharts/modules/exporting";
import * as HighchartsData from "highcharts/modules/data";

HighchartsMore(Highcharts);
HighchartsExporting(Highcharts);
HighchartsData(Highcharts);

However, when doing this I get following Error:

Cannot invoke an expression whose type lacks a call signature. Type 'typeof import("angular-highcharts/node_modules/highcharts/highcharts-more")' has no compatible call signatures

The other things I tried was doing the imports like this:

import HC_data from 'highcharts/modules/data';
let Boost = require('highcharts/modules/boost');
let noData = require('highcharts/modules/no-data-to-display');
let More = require('highcharts/highcharts-more');
Boost(Highcharts);
noData(Highcharts);
More(Highcharts);
noData(Highcharts);
HC_data(Highcharts);

In this case, i don't get an error but the highcharts will just show:

no data to display

whenever I try something like this in the chart settings:

data: {
   csv: csvFile
},

What am i doing wrong? how can i correctly import the data module? or how can i show csv data in highcharts correctly?

Upvotes: 0

Views: 311

Answers (1)

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

Try out the following method . 

import {HC_data} from 'highcharts/modules/data';
import {Boost} from 'highcharts/modules/boost';
import {noData} from 'highcharts/modules/no-data-to-display';
import  {More} from 'highcharts/highcharts-more';
Boost(Highcharts);
noData(Highcharts);
More(Highcharts);
noData(Highcharts);
HC_data(Highcharts);

Try out this code .

Upvotes: 0

Related Questions