Today my highcharts bubble chart stopped allowing me to select the bubbles: it was working through yesterday. Here is the code:
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Sugar and fat intake per country'
},
subtitle: {
text: 'Source: Euromonitor and OECD'
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Daily fat intake'
},
labels: {
format: '{value} gr'
}
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Daily sugar intake'
},
labels: {
format: '{value} gr'
},
maxPadding: 0.2
},
plotOptions: {
series: { allowPointSelect: true,
dataLabels: {
enabled: false,
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' }
]
}]
});
I recreated the problem in this fiddle:
http://jsfiddle.net/azq5nx8a/
Interestingly, if you enable dataLabels, then you can select the point by clicking on the data label. But even with dataLabels enabled, just clicking on the bubble and not the label does nothing (unless you've already selected the bubble using the data label: if you start in that state, you can select and deselect the bubble by just clicking on the bubble. Play around and see).
On Github it looks like there was an update last night related to bubble charts. I wonder if that caused this issue.
Can anyone get this to work, so the bubbles can be selected by clicking on the bubble and not a data label?
Related
I'm trying to adapt my code with the newer version of highcharts and I have a problem with bubble chart with drilldown levels.
The code worked like a charm but in the version 9.3.3 (even in 10.0), only the first sub level is displayed correctly.
You can see a code here : https://jsfiddle.net/vegaelce/8nLumacp/
In this example, drilling in California sub-level displays correct years information. But drilling in Colorado or DC or Florida displays nothing.
This example worked with the library 9.1.2.
My series are defined as :
series: [{ name:'California',
data : [{
x: 4836171.3, y: 29828, z: 1953706.9,
drilldown: 'drill_California'
}],
},
{ name:'Colorado',
data : [{
x: 1327390, y: 8299, z: 527434,
drilldown: 'drill_Colorado'
}],
},
{ name:'DC',
data : [{
x: 1809005, y: 11525, z: 720978.0999999999,
drilldown: 'drill_DC'
}],
},
{ name:'Florida',
data : [{
x: 1252697.9, y: 7619, z: 524066.6,
drilldown: 'drill_Florida'
}],
},
],
drilldown: {
series: [{
name: "California",
id: "drill_California",
data: [{
name: '2016',x: 1595318.9, y: 9249, z: 627939.8,
},{
name: '2017',x: 1404929.6, y: 9817, z: 596923.6,
},{
name: '2018',x: 1729952.1, y: 10117, z: 688805.7,
},{
name: '2019',x: 105970.7, y: 645, z: 40037.8,
},],
dataLabels: {
enabled: true,
formatter: function () {
return this.key;}
}
},
{
name: "Colorado",
id: "drill_Colorado",
data: [{
name: '2016',x: 443088.5, y: 2669, z: 168450.9,
},{
name: '2017',x: 395947.7, y: 2787, z: 168011.2,
},{
name: '2018',x: 463399.3, y: 2685, z: 181716.8,
},{
name: '2019',x: 24954.5, y: 158, z: 9255.1,
},],
dataLabels: {
enabled: true,
formatter: function () {
return this.key;}
}
},
{
name: "DC",
id: "drill_DC",
data: [{
name: '2016',x: 599168.1, y: 3612, z: 230768.4,
},{
name: '2017',x: 593314.4, y: 4196, z: 249435.3,
},{
name: '2018',x: 586145.8, y: 3532, z: 229305.2,
},{
name: '2019',x: 30376.7, y: 185, z: 11469.2,
},],
dataLabels: {
enabled: true,
formatter: function () {
return this.key;}
}
},
{
name: "Florida",
id: "drill_Florida",
data: [{
name: '2016',x: 440506.9, y: 2561, z: 177894.7,
},{
name: '2017',x: 358862.3, y: 2482, z: 157490.4,
},{
name: '2018',x: 426437.3, y: 2403, z: 178357.5,
},{
name: '2019',x: 26891.4, y: 173, z: 10324,
},],
dataLabels: {
enabled: true,
formatter: function () {
return this.key;}
}
}]
I have the following chart: https://jsfiddle.net/w7jm2n6u/
Highcharts.chart('container', {
chart: {
type: 'area',
zoomType: 'x'
},
exporting: {
enabled: false
},
title: {
text: ''
},
legend: {
enabled: false
},
xAxis: {
type: 'datetime',
title: {
enabled: false
},
min: Date.UTC(2018, 10, 1)
},
yAxis: {
title: {
enabled: false
},
labels: {
formatter: function() {
return this.value / 1000;
}
},
max: 2000
},
tooltip: {
split: false,
},
plotOptions: {
area: {
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
},
series: {
trackByArea: true,
stickyTracking: false,
}
},
series: [{
name: 'Exceeds',
color: '#0000FF',
fillOpacity: 1,
marker: {
enabled: false,
},
data: [
{
x: Date.UTC(2018, 8, 1),
y: 2000
},{
x: Date.UTC(2019, 0, 1),
y: 2000
}, {
x: Date.UTC(2019, 1, 1),
y: 2000
}, {
x: Date.UTC(2019, 2, 1),
y: 2000
}],
}, {
name: 'Meets',
color: '#00FF00',
fillOpacity: 1,
marker: {
enabled: false,
},
data: [
{
x: Date.UTC(2018, 8, 1),
y: 700
},{
x: Date.UTC(2019, 0, 1),
y: 800
}, {
x: Date.UTC(2019, 1, 1),
y: 700
}, {
x: Date.UTC(2019, 2, 1),
y: 800
}],
}, {
name: 'Minimum',
color: '#FFFF00',
fillOpacity: 1,
marker: {
enabled: false,
},
data: [
{
x: Date.UTC(2018, 8, 1),
y: 400
},{
x: Date.UTC(2019, 0, 1),
y: 400
}, {
x: Date.UTC(2019, 1, 1),
y: 400
}, {
x: Date.UTC(2019, 2, 1),
y: 400
}],
}, {
name: 'Below Minimum',
color: '#FF0000',
fillOpacity: 1,
marker: {
enabled: false,
},
data: [
{
x: Date.UTC(2018, 8, 1),
y: 100
},{
x: Date.UTC(2019, 0, 1),
y: 200
}, {
x: Date.UTC(2019, 1, 1),
y: 300
}, {
x: Date.UTC(2019, 2, 1),
y: 320
}],
},
{
name: 'Data',
color: '#000000',
type: 'line',
data: [{
x: Date.UTC(2019, 0, 3),
y: 50
},
{
x: Date.UTC(2019, 0, 15),
y: 500
},
{
x: Date.UTC(2019, 1, 4),
y: 1000
},
{
x: Date.UTC(2019, 1, 15),
y: 1400
},
{
x: Date.UTC(2019, 1, 28),
y: 1900
},
]
},
]
});
Ideally, I would like to be able to hover over each area and see a tooltip with the value at that point in time for each of the 4 areas. For instance, between January 1st and February 1st, the Below Minimum (red) value ranges from 200 to 300. If I were to put my mouse halfway between those dates, I would want to see 'Below Minimum: 250'. Is there a way to achieve this?
If not, I would at least like the current tooltip to always show the previous point value instead of whichever it is closest to. If I hover around 12/2018, I want to see the point from Sept 1, 2018, not January 1, 2019. Essentially these are start dates for the values and are only valid on or after the date.
You need to increase the density of points. Below you can find an example how you can do it programmatically:
chart: {
type: 'area',
events: {
load: function() {
var series = this.series,
iterations = 2,
i = 0,
newData = [];
for (; i < iterations; i++) {
series.forEach(function(s) {
newData = [];
s.points.forEach(function(p, j) {
if (j) {
newData.push(
[
s.points[j - 1].x +
(p.x - s.points[j - 1].x) / 2,
s.points[j - 1].y +
(p.y - s.points[j - 1].y) / 2
],
[p.x, p.y]
);
} else {
newData.push([p.x, p.y]);
}
});
s.setData(newData, false);
});
this.redraw(false);
}
}
}
},
Live demo: https://jsfiddle.net/BlackLabel/d8jq9bvh/
API Reference: https://api.highcharts.com/highcharts/chart.events.load
I'm trying to represent a few series as a Bubble Chart, but I don't know how to represent the bubbles in different X positions when they belong to the same category. Let's take the following example
When the chart is represented in bars or columns, there is no overlapping, but when i choose bubbles, every bubble is drawn in the same position.
I want something like this:
How can I achieve this?? Here you can find the example:
chart: {
type: 'bubble',
plotBorderWidth: 1
},
xAxis: {
labels: {
overflow: 'justify'
},
lineColor: "#1E232A",
tickColor: "#1E232A",
type: "category"
},
series: [{
name: "BLUE",
data: [
{ y: 65, z: 13.8, name: 'Belgium' },
{ y: 32.9, z: 14.7, name: 'Germany' },
{ y: 11.5, z: 15.8, name: 'Finland' }
]
},
{
name: "BLACK",
data: [
{ y: 65, z: 44.8, name: 'Belgium' },
{ y: 32.9, z: 66.7, name: 'Germany' },
{ y: 11.5, z: 77.8, name: 'Finland' }
]
},
{
name: "GREEN",
data: [
{ y: 65, z: 54.8, name: 'Belgium' },
{ y: 32.9, z: 56.7, name: 'Germany' },
{ y: 11.5, z: 37.8, name: 'Finland' }
]
}]
https://jsfiddle.net/433bqnea/
As far as I can see/find there is no direct supported way to do this. The closest I think you can come is either specify x values for each point, or for each series with pointPlacement. I made an example using the pointPlacement:
series: [{
name: "BLUE",
pointPlacement: -0.25, //added this
data: [
{ y: 65, z: 13.8, name: 'Belgium' },
{ y: 32.9, z: 14.7, name: 'Germany' },
{ y: 11.5, z: 15.8, name: 'Finland' }
]
},
{
name: "BLACK",
data: [
{ y: 65, z: 44.8, name: 'Belgium' },
{ y: 32.9, z: 66.7, name: 'Germany' },
{ y: 11.5, z: 77.8, name: 'Finland' }
]
},
{
name: "GREEN",
pointPlacement: 0.25, //added this
data: [
{ y: 65, z: 54.8, name: 'Belgium' },
{ y: 32.9, z: 56.7, name: 'Germany' },
{ y: 11.5, z: 37.8, name: 'Finland' }
]
}]
The above will look like this:
Working example: https://jsfiddle.net/433bqnea/3/
API on pointPlacement: https://api.highcharts.com/highcharts/series.bubble.pointPlacement
I was facing the same issue of overlapping of items at different level. What I did to resolve is group the items on the basis of property where it was overlapping and then added jittering affect by adding some minor value to x and y coordinates of overlapping items.
Can anyone maybe tell me what I am doing wrong here. Because my Chart shows the X values but my Y values does not plot on the chart.
Note reason for this x: and y: is because I am using dotnet highchart helper.
chart: { renderTo:'chart_0_container', backgroundColor: '#FFFFFF', className: 'chart1', defaultSeriesType: 'line', marginRight: 10, plotShadow: false, resetZoomButton: { position: { align: 'left' } }, zoomType: 'xy' },
xAxis: { allowDecimals: false, type: 'linear' },
yAxis: [{ labels: { formatter: function () {return Highcharts.numberFormat(this.value,2,'.' ,' ');} }, max: 0, title: { text: '' } }],
legend: { enabled: true },
tooltip: { enabled: true, formatter: function() { return '<span style="color:' + this.series.color + ';">●</span> ' + this.series.name + ': <b>' + Highcharts.numberFormat(this.y,',','.') + '</b><br/>' + Highcharts.dateFormat(' %Y-%m-%d %H:%M (%A)' , new Date(this.x)); } },
title: { text: '' },
plotOptions: { line: { marker: { enabled: true } } },
exporting: { enabled: true, filename: 'TrendExport' },
series: [{ data:
[{ x: 49.898418, y: 21.32 },
{ x: 49.882478, y: 21.32 },
{ x: 51.759454, y: 21.57 },
{ x: 51.385514, y: 21.56 },
{ x: 50.678916, y: 21.47 },
{ x: 50.226594, y: 21.35 },
{ x: 49.956602, y: 21.25 },
{ x: 49.841858, y: 21.24 },
{ x: 49.865894, y: 21.28 },
{ x: 49.845258, y: 21.31 },
{ x: 49.797864, y: 21.21 },
{ x: 49.880792, y: 21.29 },
{ x: 50.863658, y: 21.31 },
{ x: 50.017988, y: 21.21 },
{ x: 49.98614, y: 21.21 },
{ x: 50.105496, y: 21.29 },
{ x: 49.712604, y: 21.19 },
{ x: 49.714074, y: 21.2 },
{ x: 49.756014, y: 21.19 },
{ x: 49.817874, y: 21.23 },
{ x: 49.798772, y: 21.21 },
{ x: 50.006356, y: 21.3 },
{ x: 50.06892, y: 21.32 },
{ x: 49.77289, y: 21.21 },
{ x: 49.700852, y: 21.2 },
{ x: 49.653704, y: 21.19 },
{ x: 49.736278, y: 21.21 },
{ x: 49.757966, y: 21.21 },
{ x: 49.7942, y: 21.22 },
{ x: 49.75787, y: 21.21 }], name: 'ABSA Capital Durban Incomer (kVAr)' }]
Thanks you in advance.
Ideally you should get sorted data from back-end logic and provide that to your chart .If it can't be in sorted order do following :
Put your series data in a variable and sort the data using:
var dataToSort = [{ x: 49.898418, y: 21.32 },
{ x: 49.882478, y: 21.32 },
{ x: 51.759454, y: 21.57 },
{ x: 51.385514, y: 21.56 },
{ x: 50.678916, y: 21.47 },
{ x: 50.226594, y: 21.35 },
// .......and so on
dataToSort.sort(function(a, b) {
return parseFloat(a.x) - parseFloat(b.x);
});
Also remove the date-formatter in tooltip, Itsdoesn't seem that your data has any timestamp or UTC date in x field .
Also as mentioned by #mekhatria remove max:0
See Working fiddle here
You have max:0 in yAxis.
Fix it here :), check jsfiddle
yAxis: [{
labels: {
formatter: function() {
return Highcharts.numberFormat(this.value, 2, '.', ' ');
}
},
//max: 0,
title: {
text: ''
}
}],
legend: {
enabled: true
},
I want to display custom prompt info in stacked area chart using the technique referred in (jQuery Highchart) Is there any way to put extra custom data inside Tooltip Box?
The chart works fine on the initial data, but does not working when dynamic adding new Points.
The source code is in http://jsfiddle.net/ukNPz/1/
$(function () {
var clusterInfoChart;
var clusterOptions = {
chart: {
type: 'area',
renderTo: 'container',
events: {
load: function () {
S = this.series;
setInterval(function () {
var seconds = Math.round(new Date() / 1000);
seconds = seconds - 1397529601 + 1235;
console.log(seconds);
var shift = S[0].data.length > 10;
S[0].addPoint([seconds, {
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}], true, shift);
S[1].addPoint([seconds, {
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}], true, shift);
clusterInfoChart.redraw();
}, 3000);
}
}
},
title: {
text: 'clusterInfo'
},
xAxis: {
categories: [
'1205', '1210', '1215', '1220', '1225', '1230', '1235'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Events'
},
labels: {
formatter: function () {
return this.value.y;
}
}
},
tooltip: {
formatter: function () {
return this.point.yinfo.replace(";", "<br>");
}
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: [{
name: 'Alert',
data: [
{
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}, {
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}, {
y: 2,
yinfo: '192.168.119.10:cpuwarn;192.168.119.11:memwarn'
}, {
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}, {
y: 2,
yinfo: '192.168.119.10:cpuwarn;192.168.119.11:memwarn'
}, {
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}, {
y: 2,
yinfo: '192.168.119.10:cpuwarn;192.168.119.11:memwarn'
}
]
}, {
name: 'Warn',
data: [
{
y: 0,
yinfo: ''
}, {
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}, {
y: 0,
yinfo: ''
}, {
y: 2,
yinfo: '192.168.119.10:cpuwarn;192.168.119.11:memwarn'
}, {
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}, {
y: 0,
yinfo: ''
}, {
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}
]
}]
};
Highcharts.setOptions({
global: {
useUTC: false
}
});
clusterInfoChart = new Highcharts.Chart(clusterOptions);
});
Just this format isn't proper:
[seconds, {
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}]
Should be:
{
x: seconds,
y: 1,
yinfo: '192.168.119.10:cpuwarn'
}