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.
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
Good evening,
I'm using highcharts and this is my actual situation
`
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: "One might think points get grouped by name"
},
"series": [{
"data": [{
x: 1,
"name": "May",
"y": 1
}],
"name": "Alpha"
}, {
"data": [{
x: 0,
"name": "Apr",
"y": 1
}, {
x: 1,
"name": "May",
"y": 2
}, {
x: 2,
"name": "Jun",
"y": 3
}],
"name": "Beta"
}],
xAxis: {
type: 'category',
//categories : ["Jun", "Apr", "May"]
},
yAxis: {
type: 'category',
categories : ["First", "Second", "Third", "fourth","fifth"]
}
});
});
` .As you can see from the fiddle, the y axis is detached from the x axis but if I comment rows from 37 to 41 I get what I want. Is there any way to get x and y axis starting from the same point and keep using categories ?
You don't have to categorize yAxis - you can display proper yAxis labels using yAxis.labels.formatter function:
var yAxisCategories = ['first', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seventh', 'eighth', 'ninth']
yAxis: {
labels: {
formatter() {
return yAxisCategories[this.pos]
}
}
},
jsFiddle with formatter
If you'd like to stick with categorized yAxis, you can manually move xAxis closer to they yAxis 0 value using xAxis.offset property together with yAxis.tickmarkPlacement 'on' property. In this example, I have put -34px rigidly, but you can calculate the proper value in chart.load event and then update calculated offset.
xAxis: {
type: 'category',
offset: -34
},
yAxis: {
type: 'category',
categories: ["First", "Second", "Third", "fourth", "fifth"],
tickmarkPlacement: 'on'
},
jsFiddle with offset
If you want to try a different approach, let me know - I will edit my answer.
API References:
https://api.highcharts.com/highcharts/yAxis.labels.formatter
https://api.highcharts.com/highcharts/yAxis.tickmarkPlacement
https://api.highcharts.com/highcharts/xAxis.offset
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 thought a newly added series should not affect old ones, but when I tried to add a scatter series with custom markers, empty spaces will be created between candlesticks where the new points are. I know set ordinal option on xAxis to false will avoid it, but the problem of that is it may be possible that some of the data points for candlesticks are missing, creating gaps on the candlestick series. Hence, what I want is a scatter series does not change the look of the candlestick series.
This is the options that I pass to highstock series:
series : [{
type : 'candlestick',
name : 'AAPL Stock Price',
data : data,
dataGrouping : {
units : [
['week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]]
]
}
}, {
type: "scatter",
data: [{
x: 1362407640000,
y: 460,
marker: {
symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
}
}],
}]
In a word, I just want to get rid of the empty space on the candlestick series when a scatter series is created.
Here is the fiddle http://jsfiddle.net/vRDNZ/. Thank you for your help!
In general this is exactly how ordinal axis should work. There is simple workaround for this, use second xAxis, which is linked to first one, and connect scatter series to that axis. Example: http://jsbin.com/oyudan/267/
xAxis: [{
opposite: false
}, {
linkedTo: 0,
offset: 0,
labels: {
enabled: false
}
}],
series : [{
type : 'candlestick',
name : 'AAPL Stock Price',
data : data,
dataGrouping : {
units : [
['week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]]
]
}
}, {
type: "scatter",
xAxis: 1,
data: [{
x: 1362407640000,
y: 460,
marker: {
symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
}
}],
}]
I have data that can either be weekly or monthly that gets returned as json.
Can somebody explain how I can just return the series in the payload to group by each series? That is, display the x-axis as the label?
I want to use one chart to display (weekly, monthly, daily) with a json data payload but use only one chart to display that json payload for either time slice.
For example:
Weekly Payload:
[
{
"date-label":"Week 24",
"series1":789118,
"series2":49475,
},
{
"date-label":"Week 25",
"series1":5759546,
"series2":286657,
}
]
Monthly Payload:
[
{
"date-label":"June",
"series1":789118,
"series2":49475,
},
{
"date-label":"July",
"series1":5759546,
"series2":286657,
}
]
How many points do you have?
If there is only a couple (~10?) you can use categories, and then result should be:
new Highcharts.Chart({
xAxis: {
categories: ['June', 'July' ... ]
},
series: [{
data: [123, 124 ...]
}, {
data: [123, 124 ...]
}]
});
If you have more points, so it wouldn't be possible to display all categories, you need to change format from 'Week 24' or 'June' to timestamp, so something like this:
new Highcharts.Chart({
xAxis: {
type: 'datetime'
},
series: [{
data: [[timestamp, 123], [timestamp, 124] ...]
}, {
data: [[timestamp, 123], [timestamp, 124] ...]
}]
});
Where timestamp is in milliseconds.