kennethic
Posts: 25
Joined: Thu Jun 16, 2022 2:18 pm

TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

Hi. I encountered issue using highstock.

Can you please help me about this error.

Thank you!

Code: Select all

ERROR Error: Uncaught (in promise): TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function
TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

Hello kennethic!
Welcome to our forum and thanks for contacting us with your question!

It is hard to tell you what is not working and what could be done without taking look at your code and your project. I am assuming, that you are using some kind of package manager. Here you can find an article, which describes the installation of Highcharts using NPM: https://www.highcharts.com/docs/getting ... l-from-npm

Please, check if you are doing it like it is described in the article below.
Kind regards!
Hubert Kozik
Highcharts Developer
kennethic
Posts: 25
Joined: Thu Jun 16, 2022 2:18 pm

Re: TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

It's worked but in my trial project, I'll try it to my main project.
But anyway, Thank you so much!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer
kennethic
Posts: 25
Joined: Thu Jun 16, 2022 2:18 pm

Re: TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

Hi another question again.

Why didn't my data go to stockchart calendar? Is there any calculation about that? or format about dates?

Btw. My data is from geojson API.
see image below:
https://drive.google.com/file/d/1kjdfFU ... sp=sharing

Thank you!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

kennethic,
Are you passing your data as the date in milliseconds?
As you can read e.g. here: https://www.highcharts.com/docs/chart-concepts/axes datetime axes are based on milliseconds, so for example an interval of one day is expressed as 24 3600 1000.

Let me know if that helps you.
Best regards!
Hubert Kozik
Highcharts Developer
kennethic
Posts: 25
Joined: Thu Jun 16, 2022 2:18 pm

Re: TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

Yes. I converted my format date to milliseconds and I dont know why the dates still default to (Jan 1, 1970)

Question again. Do you have

Code: Select all

console.log
inside series?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

kennethic,
I am not sure what do you mean by console.log in series. Series is an object where you can pass a data as the variable, see this example please: https://jsfiddle.net/BlackLabel/42wz67gs/

If you still have an errors please try to reproduce the issue in an online editor that I could work on, you can start with the demo above.

Kind regards!
Hubert Kozik
Highcharts Developer
kennethic
Posts: 25
Joined: Thu Jun 16, 2022 2:18 pm

Re: TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

Btw. I separated the xAxis to the chart

Code: Select all

    // X AXIS
    chart.xAxis[0].update(
      {
        categories: getDateTime,
        tickInterval: 6, //x axis display
        type: 'datetime',
        labels: {
          format: '{value:%Y-%b-%e}',
        },
      },
      true
    );

Code: Select all

      series: [
        {
          name: 'Flood Height',
          color: '#0C2D48',
          data: [],
          lineWidth: 1.5,
          marker: {
            enabled: false,
          },
          hover: {
            lineWidth: 5,
          },
        },
      ],
inside the xAxis I converted my format DateTime to Milliseconds. But it didnt work
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

kennethic,
I see that in code you have pasted series.data array is empty - but maybe you are setting it later. Another mistake is that you are trying to set categories on xAxis.type set to datetime and that is incorrect. You cannot use categories with xAxis.type set to datetime. Please try to reproduce the issue in the online editor that I could have work with.

Regards!
Hubert Kozik
Highcharts Developer
kennethic
Posts: 25
Joined: Thu Jun 16, 2022 2:18 pm

Re: TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

Hi hubert.k, I edited the fiddle that you given. That's the format inside my geojson.

That's exactly my problem.

See this:
https://jsfiddle.net/9c27ys15/
kennethic
Posts: 25
Joined: Thu Jun 16, 2022 2:18 pm

Re: TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

how do I pass the value of categories to series?

Code: Select all

 // X AXIS
    chart.xAxis[0].update(
      {
        categories: getDateTime,
        tickInterval: 6, //x axis display
        type: 'datetime',
        labels: {
          format: '{value:%Y-%b-%e}',
        },
      },
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

kennethic,
You cannot declare variables inside the object - that's basics of JavaScript. As I said in my previous posts you have to pass to series.data x-value in milliseconds - like in the demo below. First I declare a new Date based on the date string and next, I convert it to milliseconds by using a getTime JS method.

Demo: https://jsfiddle.net/BlackLabel/2u4xdyba/

You cannot use categories if you want to use xAxis.type as datetime. You can set type to category (and then set proper categories) or datetime - not both. Please read some documentation here: https://www.highcharts.com/docs/getting ... irst-chart https://www.highcharts.com/docs/chart-concepts/axes

Regards!
Hubert Kozik
Highcharts Developer
kennethic
Posts: 25
Joined: Thu Jun 16, 2022 2:18 pm

Re: TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

Hi hubert.k How about this kind of data, how can I display received_at as xAxis and as well as in calendar and distance_m as my Yaxis.

Code: Select all

const sampleData = [
"result" [{
	"received_at": "2022-06-21T11:27:36.434950Z",
  "distance_m": 1,
}]
]

Highcharts.stockChart('container', {
  series: [{
    data: sampleData
  }]
});

See fiddle:
https://jsfiddle.net/BlackLabel/2u4xdyba/
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: TypeError: highcharts__WEBPACK_IMPORTED_MODULE_9__.stockChart is not a function

kennethic,
I am not pretty sure how your sampleData will look, because you pasted a code with an error. I have made two simple demos for you with ways to process your sampleData. All you need to do is iterate through data and make points with x and y properties to read it in the chart. Take a look at the demos below.

Demo: https://jsfiddle.net/BlackLabel/wt92eob3/
https://jsfiddle.net/BlackLabel/qfo8g0mb/

Kind regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Stock”