javascriptchartshighcharts

Highcharts.stockChart is not a function


I'm trying to make a graph using Hightcharts.js, but get an error

TypeError: Highcharts.stockChart is not a function.

I install it using npm(package.json)

"highcharts": "^5.0.6"

Сall

var Highcharts = require('highcharts');

And use

var options = {
    chart: {
        alignTicks: false,
        renderTo: 'container'
    },

    rangeSelector: {
        selected: 1
    },

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

    series: [{
        type: 'column',
        name: 'AAPL Stock Volume',
        data: [],
        dataGrouping: {
            units: [[
                'week', // unit name
                [1] // allowed multiples
            ], [
                'month',
                [1, 2, 3, 4, 6]
            ]]
        }
    }];
};
var chart = Highcharts.stockChart(options);

Highstock is not a separate module, and belongs to Highcharts, I do not understand what could be the problem?


Solution

  • Highstock not a separate module, and belongs to Highcharts . This is not true.

    But the reverse is. if you include Highstock then you need not to include Highcharts again.

    As per the Highcharts documentations

    http://www.highcharts.com/docs/getting-started/installation

    Highcharts is already included in Highstock, so it is not necessary to load both. The highstock.js file is included in the package.

    $(document).ready(function(){
        $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data)    {
            // Create the chart
            
            var dataObject = {
                rangeSelector: {
                    selected: 1,
                    inputEnabled: $('#container').width() > 480
                },
                
                title: {
                    text: 'AAPL Stock Price'
                },
                
                series: [{
                    name: 'AAPL',
                    data: data,
                    tooltip: {
                        valueDecimals: 2
                    }
                }]
                
                ,
                
                chart: {
                    renderTo: 'container'
                }
                
            };
            
             var chart = new Highcharts.stockChart(dataObject);   
        });
        });
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.6/css/highcharts.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.6/js/highstock.js"></script>
    
    <div id="container" style="height: 400px; min-width: 310px"></div>