Need help creating a highchart histogram in a Jupyter-Notebook - highcharts

Question

I'm trying to embed a Highchart Histogram in a Jupyter-notebook. I've simplified the code down to 2 cells and a small dummy series for the actual data to try and limit any surrounding code that could be causing the issue. I am still continually getting an error 17 on the console(that the series type doesn't exist). I'm thinking the problem is with importing the histogram-bellcurve module, but haven't been able to work around this. Any help would be appreciated.
Cell 1:
%%javascript
require.config({
paths: {
highcharts: "http://code.highcharts.com/highcharts",
highcharts_hist: "http://code.highcharts.com/modules/histogram-bellcurve"
},
shim: {
highcharts: {
exports: "Highcharts",
deps: ["jquery"]
},
highcharts_hist: {
exports: "Highcharts",
deps: ["highcharts"]
}
}
});
Cell 2:
%%javascript
$("#container").remove();
element.append('<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>');
require(['highcharts_hist'], function(Highcharts) {
$('#container').highcharts({
'title': {
'text': 'Highcharts Histogram'
},
'xAxis': [{
'title': { 'text': 'Data' },
'alignTicks': false
}, {
'title': { 'text': 'Histogram' },
'alignTicks': false,
'opposite': true
}],
'yAxis': [{
'title': { 'text': 'Data' }
}, {
'title': { 'text': 'Histogram' },
'opposite': true
}],
'series': [{
'name': 'Histogram',
'type': 'histogram',
'xAxis': 1,
'yAxis': 1,
'baseSeries': 's1',
'zIndex': -1
}, {
'name': 'Data',
'type': 'scatter',
'data': [1,1,1,2,2,3,3,3,3,3,4,5,6,7,7,7,7,7,7,7,8,8,9,9,10,11],
'id': 's1',
'marker': {
'radius': 1.5
}
}]
});
});

Answer 1

From Google it would appear that this approach once worked, however your result now seems the default. From the Highcharts documentation, it appears that you need to load the module specifically.
In your case I had success with this approach (changes in cell 2):
%%javascript
$("#container").remove();
element.append('<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>');
require(['highcharts', 'highcharts_hist'], function(Highcharts, histogram) {
histogram(Highcharts); // This is where the magic happens
$('#container').highcharts({
// ... for brevity
});
});
See this gist or this nbviewer to see it in action.