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?
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>