how to use highstock in ecmascript?

Question

here are an example of code that work, I create a graph

import $ from 'jquery';
import Highcharts from 'highcharts';

class test {
    constructor(){
        let chart = new Highcharts.chart('container', {
            chart: {
                animation: false
            },

            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]
            }]

        });
    }
}

now I want do a stockChart like https://jsfiddle.net/74vn5utd/

but I import it and its module

import StockChart from 'highcharts/highstock';
import datahc from 'highcharts/modules/data';

after that I load the module

datahc(StockChart);

and finally I call the chart and

StockChart.chart('container', {


    rangeSelector: {
        selected: 1
    },

    title: {
        text: 'AAPL Stock Price'
    },

    series: [{
        name: 'AAPL',
        data: response.graph,
        tooltip: {
           valueDecimals: 2
        }
    }]
});

I have a regular graph, not a HighStock graph, I don't get it, what is wrong?

thanks in advance

Highstock is a superset of Highcharts. You're loading highstock ok, but you're still using .chart(), which is wrong. It should be `StockChart.stockChart()` above — Ringo, Jun 07 '22 at 14:08

score 3 · Answer 1 · answered Jan 31 '20 at 11:56

3

You still use the chart constructor which creates regular chart.

Try to use StockChart.stockChart('container, {...}), where stockChart is a Highstock constructor.

Demo: https://jsfiddle.net/BlackLabel/v4qbyka6/

  Highcharts.stockChart('container', {

    series: [{
        data: data
    }]
  });

answered Jan 31 '20 at 11:56

Sebastian Wędzel

11,417
1
6
16

Hi @Sebastian, that it isn't ecmascript :) in ecmascript it didn't recognise the function stockChart, please read my question well after answer, thanks – Emiliano Jan 31 '20 at 15:45
3

@Emiliano could you clarify what ecmascript means in your opinion then? Because as I know ECMAScript is a scripting-language specification standardized which was created to standardize JavaScript to help foster multiple independent implementations. In the parts of code which you have shared, you are using import and class methods which are JavaScript methods, just like the methods used in a demo which I sent you above. Have you tried to implement the code (constructor) which I suggested in the above post? Could you share a demo with your attempt? – Sebastian Wędzel Jan 31 '20 at 16:08
the new version of javascript, javascript 2016 or 2017, my question already has an example, I don't know what kind of example you want. – Emiliano Feb 04 '20 at 18:07
@Emiliano ES6 was a major update which added new features to JS like introducing const, let, arrow functions, class etc. I don't understand why you suggest that the example which I shared to you is not an ECMAScript. If you need to use a class instead of a basic function, go ahead. I show you an example of how to import the HighStock as an ECMAScript module and create Highstock chart by using stockChart construction. Docs: https://api.highcharts.com/class-reference/#toc4 – Sebastian Wędzel Feb 05 '20 at 09:19

how to use highstock in ecmascript?

1 Answers1