I am trying to draw a bubble chart with highchart using npm version of highcharts, but there is a error of error #17, I've already try to import highcharts-more, but it didn't work...
I have the following imports
import $ from "jquery";
import _ from "underscore";
import Logger from 'js-logger';
import Marionette from 'backbone.marionette';
import Highcharts from 'Highcharts';
import 'Highcharts/highcharts-more';
And the options of the bubbles chart are as follow:
settings = {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Sugar and fat intake per country'
},
subtitle: {
text: 'Source: <a href="/">Euromonitor</a> and <a href="/">OECD</a>'
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Daily fat intake'
},
labels: {
format: '{value} gr'
},
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 65,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: 'italic'
},
text: 'Safe fat intake 65g/day'
},
zIndex: 3
}]
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Daily sugar intake'
},
labels: {
format: '{value} gr'
},
maxPadding: 0.2,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 50,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
text: 'Safe sugar intake 50g/day',
x: -10
},
zIndex: 3
}]
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
'<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
'<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
'<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
data: [{
x: 95,
y: 95,
z: 13.8,
name: 'BE',
country: 'Belgium'
}, {
x: 86.5,
y: 102.9,
z: 14.7,
name: 'DE',
country: 'Germany'
}, {
x: 80.8,
y: 91.5,
z: 15.8,
name: 'FI',
country: 'Finland'
}, {
x: 80.4,
y: 102.5,
z: 12,
name: 'NL',
country: 'Netherlands'
}, {
x: 80.3,
y: 86.1,
z: 11.8,
name: 'SE',
country: 'Sweden'
}, {
x: 78.4,
y: 70.1,
z: 16.6,
name: 'ES',
country: 'Spain'
}, {
x: 74.2,
y: 68.5,
z: 14.5,
name: 'FR',
country: 'France'
}, {
x: 73.5,
y: 83.1,
z: 10,
name: 'NO',
country: 'Norway'
}, {
x: 71,
y: 93.2,
z: 24.7,
name: 'UK',
country: 'United Kingdom'
}, {
x: 69.2,
y: 57.6,
z: 10.4,
name: 'IT',
country: 'Italy'
}, {
x: 68.6,
y: 20,
z: 16,
name: 'RU',
country: 'Russia'
}, {
x: 65.5,
y: 126.4,
z: 35.3,
name: 'US',
country: 'United States'
}, {
x: 65.4,
y: 50.8,
z: 28.5,
name: 'HU',
country: 'Hungary'
}, {
x: 63.4,
y: 51.8,
z: 15.4,
name: 'PT',
country: 'Portugal'
}, {
x: 64,
y: 82.9,
z: 31.3,
name: 'NZ',
country: 'New Zealand'
}]
}]
};
Rendering the chart
let settings = this.bubbleChartSetting();
console.log(settings);
setTimeout(() => {
Highcharts.chart('container', settings);
}, 1);
Error Message
highcharts.js:8 Uncaught Error: Highcharts error #17: www.highcharts/errors/17
I am trying to draw a bubble chart with highchart using npm version of highcharts, but there is a error of error #17, I've already try to import highcharts-more, but it didn't work...
I have the following imports
import $ from "jquery";
import _ from "underscore";
import Logger from 'js-logger';
import Marionette from 'backbone.marionette';
import Highcharts from 'Highcharts';
import 'Highcharts/highcharts-more';
And the options of the bubbles chart are as follow:
settings = {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Sugar and fat intake per country'
},
subtitle: {
text: 'Source: <a href="http://www.euromonitor./">Euromonitor</a> and <a href="https://data.oecd/">OECD</a>'
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Daily fat intake'
},
labels: {
format: '{value} gr'
},
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 65,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: 'italic'
},
text: 'Safe fat intake 65g/day'
},
zIndex: 3
}]
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Daily sugar intake'
},
labels: {
format: '{value} gr'
},
maxPadding: 0.2,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 50,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
text: 'Safe sugar intake 50g/day',
x: -10
},
zIndex: 3
}]
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
'<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
'<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
'<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
data: [{
x: 95,
y: 95,
z: 13.8,
name: 'BE',
country: 'Belgium'
}, {
x: 86.5,
y: 102.9,
z: 14.7,
name: 'DE',
country: 'Germany'
}, {
x: 80.8,
y: 91.5,
z: 15.8,
name: 'FI',
country: 'Finland'
}, {
x: 80.4,
y: 102.5,
z: 12,
name: 'NL',
country: 'Netherlands'
}, {
x: 80.3,
y: 86.1,
z: 11.8,
name: 'SE',
country: 'Sweden'
}, {
x: 78.4,
y: 70.1,
z: 16.6,
name: 'ES',
country: 'Spain'
}, {
x: 74.2,
y: 68.5,
z: 14.5,
name: 'FR',
country: 'France'
}, {
x: 73.5,
y: 83.1,
z: 10,
name: 'NO',
country: 'Norway'
}, {
x: 71,
y: 93.2,
z: 24.7,
name: 'UK',
country: 'United Kingdom'
}, {
x: 69.2,
y: 57.6,
z: 10.4,
name: 'IT',
country: 'Italy'
}, {
x: 68.6,
y: 20,
z: 16,
name: 'RU',
country: 'Russia'
}, {
x: 65.5,
y: 126.4,
z: 35.3,
name: 'US',
country: 'United States'
}, {
x: 65.4,
y: 50.8,
z: 28.5,
name: 'HU',
country: 'Hungary'
}, {
x: 63.4,
y: 51.8,
z: 15.4,
name: 'PT',
country: 'Portugal'
}, {
x: 64,
y: 82.9,
z: 31.3,
name: 'NZ',
country: 'New Zealand'
}]
}]
};
Rendering the chart
let settings = this.bubbleChartSetting();
console.log(settings);
setTimeout(() => {
Highcharts.chart('container', settings);
}, 1);
Error Message
highcharts.js:8 Uncaught Error: Highcharts error #17: www.highcharts./errors/17
- See this github./highcharts/highcharts/issues/3616 – Nishith Kant Chaturvedi Commented Dec 29, 2015 at 6:51
- it works when i draw a pie chart, everythings fine. When i draw a bubble chart, error shows up – Lezon Commented Dec 29, 2015 at 6:57
- 2 Because, bubble charts need highcharts-more lib which is not loaded properly by NPM – Nishith Kant Chaturvedi Commented Dec 29, 2015 at 8:56
-
1
As @NishithKantChaturvedi said you need to load properly other Highchats modules. In this case it seems highcharts-more is needed. I've done this before like this:
code(var Highcharts = require('highcharts'); require('highcharts/highcharts-more')(Highcharts);). You need to do the same with every required module. – Garci García Commented Apr 6, 2016 at 8:24 -
Hi @Lezon, You need to impoert and initialize
highcharts-moremodule. Docs: github./highcharts/highcharts-vue#installation – ppotaczek Commented Jun 10, 2020 at 8:15
3 Answers
Reset to default 6The error is there because highcharts-more has not been properly imported.
Try to import as given under
import $ from "jquery";
import _ from "underscore";
import Logger from 'js-logger';
import Marionette from 'backbone.marionette';
import Highcharts from 'Highcharts';
require('highcharts/highcharts-more.js')(Highcharts);
if you work in Vue Component all you have to do is just import these files in your chart ponent
import More from 'highcharts/highcharts-more'
import Highcharts from 'highcharts'
More(Highcharts)
this helps me for Highcharts 6.1.0 version
import Highcharts from "highcharts6";
require('highcharts6/highcharts-more.src')(Highcharts);
require('highcharts6/modules/treemap.src')(Highcharts);
require('highcharts6/modules/heatmap.src')(Highcharts);
require('highcharts6/modules/drilldown.src')(Highcharts);