I have this simple bubble chart https://jsfiddle.net/zengoric/4qyqokgj/
Highcharts.chart('container', {
chart: {
type: 'bubble',
},
series: [{
"name": "First data set",
"data": [{
"x": 0,
"y": 2,
"z": 4.61,
}],
"sizeByAbsoluteValue": true,
}, {
"name": "Second data set",
"data": [{
"x": -1,
"y": -3,
"z": 4.6,
}],
"sizeByAbsoluteValue": true
}]
});
but it display nothing. Something is wrong with data or it's a bug in highcharts library?
You have to initialize zMin or/and zMax properties to make bubbles visible.
Live demo: https://jsfiddle.net/BlackLabel/gs2dr565/
Bubbles are too small to be drawn in the example that you provided.
API references:
https://api.highcharts.com/highcharts/series.bubble.zMin
https://api.highcharts.com/highcharts/series.bubble.zMax
Related
How can I prevent this space:
I try a lot but no success.
Here is my options:
$('#container').highcharts({
"chart": {
"type": "column"
},
"xAxis": {
"categories": ["1/1/2018", "2/1/2018", "3/1/2018"]
},
"legend": {
"enabled": false
},
"yAxis": {
"categories": []
},
"series": [{
"data": [1, 3, 1]
}]
});
JSFiddle link
Thanks in advance.
Remove the empty category definition on the yAxis to make highchart automatically generate values for the yAxis:
$('#container').highcharts({
"chart": {
"type": "column"
},
"xAxis": {
"categories": ["1/1/2018", "2/1/2018", "3/1/2018"]
},
"legend": {
"enabled": false
},
"yAxis": {
},
"series": [{
"data": [1, 3, 1]
}]
});
JSFiddle working example: http://jsfiddle.net/ewolden/sq1hf68r/
Creating a column chart with some dynamically populated drilldowns. For the surface level, I'm returning the top ten results of my search, some of which share a common name.
Names display as categories just fine for both the surface and drill downs when specifying xAxis type: 'category'. However, since the surface level can have duplicate names, it's stacking them be default. Is there a setting to prevent this?
Thanks!
Perhaps the solution to this issue will be to add the same category data in two separate series. I guess you add it as one series? Check demo I posted you below.
Two series:
"series": [{
"name": "Browsers",
"colorByPoint": true,
"data": [{
"name": "Chrome",
"y": 62.74,
"drilldown": "Chrome2"
},
{
"name": "Internet Explorer",
"y": 7.23,
"drilldown": "Internet Explorer"
}
]
}, {
"data": [{
"name": "Chrome",
"y": 10.57,
"drilldown": "Chrome1"
}]
}]
One series:
"series": [{
"name": "Browsers",
"colorByPoint": true,
"data": [{
"name": "Chrome",
"y": 62.74,
"drilldown": "Chrome2"
},
{
"name": "Internet Explorer",
"y": 7.23,
"drilldown": "Internet Explorer"
},
{
"name": "Chrome",
"y": 10.57,
"drilldown": "Chrome1"
}
]
}]
Demo:
two series - https://jsfiddle.net/wchmiel/h04egdu7/3/
one series - https://jsfiddle.net/wchmiel/pnj3etd4/
I have created a spline chart in highcharts, where the x-axis is datetime values, which do not necessarily align between series. Tooltips only appear to snap based on the horizontal position of the mouse, making it extremely awkward to see tooltips for certain points. Code below + fiddle link
$('#container').highcharts({
chart: {
type: 'spline'
},
xAxis: {
type: "datetime"
},
series: [{
"name": "series 1",
"data": [
[Date.parse("2014-12-16T10:41:30.000Z"), 62],
[Date.parse("2015-01-16T10:41:30.000Z"), 64]
]
}, {
"name": "series 2",
"data": [
[Date.parse("2014-12-16T10:44:10.000Z"), 26],
[Date.parse("2015-01-16T10:44:10.000Z"), 26]
]
}, {
"name": "series 3",
"data": [
[Date.parse("2014-12-16T10:44:17.000Z"), 104],
[Date.parse("2015-01-16T10:44:17.000Z"), 104]
]
}]
});
fiddle
It is almost impossible to view the tooltips for 'series 2' with this data.
How can I make the tooltips snap based on distance to the points?
This issue is fixed in the newest master-branch
I have highstocks set up to display two series of data.
When I zoom all the way the x-axis label for one of the series is always missing.
jsfiddle link
$(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart = new Highcharts.StockChart({
chart: {
"renderTo": "container"
},
plotOptions: {
"column": {
"stacking": "normal"
}
},
series: [{
"type": "column",
"name": "column 1",
"color": "#1d8ecd",
"data": [
[1296511200000, 974],
[1301605200000, 1618],
[1306875600000, 990],
[1312146000000, 1720],
[1317416400000, 516],
[1322690400000, 1472],
[1328047200000, 349],
[1333227600000, 1781],
[1338498000000, 649],
[1343768400000, 1124],
[1349038800000, 829],
[1354312800000, 1615],
[1359669600000, 1181]
]
}, {
"type": "column",
"name": "column 2",
"color": "#636466",
"data": [
[1293832800000, 1913],
[1298930400000, 1269],
[1304197200000, 567],
[1309467600000, 668],
[1314824400000, 722],
[1320098400000, 442],
[1325368800000, 1558],
[1330552800000, 1831],
[1335819600000, 373],
[1341090000000, 275],
[1346446800000, 1540],
[1351720800000, 998]
]
}],
});
});
Any ideas why is this happening and if I can force it to display all x-axis labels, at least when there is space for it?
http://jsfiddle.net/ramon_ackermann/PhjX7/2/
$(function () {
$('#container').highcharts({
chart: {
type:'column'
},
xAxis: {
min:0,
max:0,
categories: ["test"]
},
series: [{
"name": "ABELO",
"data": [
0.73
]
},{
"name": "UAAU",
"data": [
0.77
]
},{
"name": "ANCB",
"data": [
1.72
]
},
{
"name": "avg",
"type": "line",
"color": "#ff0000",
"data": [
{
"x": -0.5,
"y": 1.5
},{
"y": 1.5,
"dataLabels": {
"enabled": true,
"align": "right",
"verticalAlign": "bottom",
"formatter": function(){
return 'avg: ' + this.y;
},
"style": {
"fontWeight": "normal"
},
"x": 0.5
}
}
]
}
]
});
});
Before updgrading to Highcharts 3, the code above would work properly, drawing the line from left to right, but since I'm trying to upgrade to v3, I can't get the line to draw all the way to the right.
I devised the above solution from my previous question / answers (highcharts line not fully plotted)
The above sample is a simplified version of what I need, unfortunately plotLines is not a solution for me.
Simple solution is to extend another point onto your avg line:
...,{"x": 1.5, "y": 1.5}]
Why is a plotLine not appropriate?
I advice to use plotLine or use renderer.
http://api.highcharts.com/highcharts#yAxis.plotLines
http://api.highcharts.com/highcharts#Renderer.path