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
Related
I have 2 spline charts that I want to compare on a singe graph. The first should take up the top 25% of the plot area and the second should take up the bottom 75% of the plot area. To achieve this, I tried the following:
"yAxis": [{
"height": "25%",
"id": "blue",
"labels": {
"enabled": false
},
"title": {
"text": ""
},
"min": 267.15,
"max": 289.15,
"index": 0
},{
"id": "red",
"height":"75%",
"top": "25%",
"min": 265,
"max": 290,
"plotLines": [{
"color": "#fff8df",
"value": 285.15
}, {
"color": "#fff8df",
"value": 279.15
}, {
"color": "#c5eded",
"value": 273.15
}],
"index": 1
}],
The problem with this is that I have a min/max set (the graph is showing temperatures and we only care about a certain range). Because of these combined things, the graph is drawing right over the xAxis and outside of the expected plot area.
see: https://jsfiddle.net/06f9huam/
What I would like to see is the red line to be cut off if it goes below 265, just like it gets cut off when it goes over 290.
You can cut the unnecessary parts of lines by using clip-path attribute, example:
chart: {
animation: false,
events: {
load: function() {
const series1 = this.series[0];
const series2 = this.series[1];
const clipRect1 = this.renderer.clipRect(
series1.yAxis.left - series1.group.translateX,
series1.yAxis.top - series1.group.translateY,
series1.yAxis.width,
series1.yAxis.height
);
const clipRect2 = this.renderer.clipRect(
series2.yAxis.left - series2.group.translateX,
series2.yAxis.top - series2.group.translateY,
series2.yAxis.width,
series2.yAxis.height
);
series1.graph.clip(clipRect1);
series2.graph.clip(clipRect2);
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/15e3g78w/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#clipRect
https://api.highcharts.com/class-reference/Highcharts.SVGElement#clip
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
If you try to combine stacked series with a flag series there is an odd behaviour where only the flag series gets drawn. If you toggle it in the legend everything gets drawn properly.
http://jsfiddle.net/x9gaca75/
$("#container").highcharts({plotOptions: {series: {stacking: "normal"}}, ...});
What configuration am I missing to make this behave properly?
There is a bug in Highstock, where setting plotOptions.series.stacking will set the same for flags. Of course, stacking won't work for flags since those don't have values. In other words, workaround is to set stacking = false for flags:
options.series.push({
"stacking": false, // disable stacking
"show_in_legend": false,
"name": "Flags",
"type": "flags",
"data": [{
"x": 1432215000000.0,
"title": "AM"
}, {
"x": 1432229400000.0,
"title": "Midday"
}, {
"x": 1432245600000.0,
"title": "Peak Hour"
}, {
"x": 1432247400000.0,
"title": "Rolling, PM"
}]
});
Demo: http://jsfiddle.net/x9gaca75/1/
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?
I'm trying to use Highstock and am having a problem. When I have multiple series' on the chart, I want the points from the same day to match up, but currently they don't because Highstock takes the time into account.
Here is an example chart:
$('#chart').highcharts('StockChart', {
plotOptions: {
series: {
animation: {
duration: 0
}
}
},
yAxis: {
labels: {
align: 'right',
x: -4,
formatter: function() {
return '$' + Math.round(this.value);
},
},
tickPixelInterval: 40
},
series : [
{
"name": "Series 1",
"data": [
[
1389486123000,
200
],
[
1389578849000,
200
]
],
"tooltip": {
"valueDecimals": 2,
"valuePrefix": "$"
}
},
{
"name": "Series 2",
"data": [
[
1389486240000,
100
],
[
1389578849000,
100
]
],
"tooltip": {
"valueDecimals": 2,
"valuePrefix": "$"
}
}
]
});
JSFiddle: http://jsfiddle.net/EdvVW/
As you can see in JSFiddle, the second two points match up (and when you hover your mouse over them, they both show up in the tooltip, which is what I'm wanting), but even though the first two points are from the same day they don't match up because their timestamps are different.
Is there any way to decrease the accuracy of the rendered points so that data points from the same day match up regardless of time?
No, it's not possible. You need to have the same timestamp to match points.
You can preprocess your data: go over all points, create date from timestamp, then use Date.UTC(year, month, day); as x-value for a point.