Related
When I have multiple x axes in a column chart the max value rendered isn't being computed correctly. Also - zooming doesn't work as expected. Here is a jsfiddle showing the issue - https://jsfiddle.net/ermht671/. Does anyone have an example using 2 x axis with Highcharts?
Highcharts.chart('container', {
yAxis: {
min: 0,
max: 1.1
},
xAxis: [{
minRange: 1
}, {
minRange: 1,
linkedTo: 0,
visible: false
}],
series: [{
name: 'series',
data: [
[0.1, 0.2],
[0.7, 0.4],
[1.3, 0.2]
]
}, {
type: 'line',
xAxis: 1,
name: 'MPO',
data: []
}],
chart: {
type: 'column',
zoomType: 'x'
}
});
The solution here is to set chart.alignTicks to false.
Live demo: https://jsfiddle.net/kkulig/3098h8vd/
API reference: https://api.highcharts.com/highcharts/chart.alignTicks
It seems like when I enable crosshair for the yAxis, only the last series defined get a crosshair. I would like all of them to be crosshaired.
(.. and I would love if they also had the color (or preferably a darker variant) as the series.)
You can create an y axis per series, link those additional axes to the first one and define a specific crosshair in each axis - then link series with a specific axis and you will get an seperate customizable crosshair per series.
Highcharts.chart('container', {
yAxis: [{
gridLineWidth: 0,
crosshair: {
width: 2,
color: Highcharts.getOptions().colors[0]
}
}, {
linkedTo: 0,
crosshair: {
width: 2,
color: Highcharts.getOptions().colors[1]
},
visible: false
}],
tooltip: {
shared: true
},
series: [{
data: data.slice()
}, {
yAxis: 1,
data: data.reverse()
}]
});
example: http://jsfiddle.net/absuLu6h/
The navigator in Highstock only seems to affect the first xAxis. The second xAxis, as in the example linked to below, isn't rescaled, and always shows all data.
See jsfiddle below:
https://jsfiddle.net/wardrop/t9ug4pm7/7/
Does anyone know how to fix this?
You can set extremes in the second axis manually after extremes are set in the first axis.
xAxis: [{
type: 'datetime',
minRange: 24 * 3600000, // 1 day
labels: {
align: "left",
rotation: 45
},
dateTimeLabelFormats: {
day: '%e %b %Y'
},
events: {
afterSetExtremes: function (e) {
this.chart.xAxis[1].setExtremes(e.min, e.max, true, false);
}
}
},
example: https://jsfiddle.net/t9ug4pm7/9/
You can also linked two axis, so the linked axis' extremes will follow after the master axis. But for columns it is needed to define pointRange because without it, columns might be drawn incorrectly.
, { //axis
type: 'datetime',
linkedTo: 0, // linked to master axis
minRange: 24 * 3600000,
lineWidth: 0,
tickWidth: 0,
labels: {enabled: false},
opposite: true
}
series: [{
id: 'daily',
name: 'Daily',
type: 'column',
color: 'rgb(124, 181, 236)',
data: data['daily'],
pointRange: 1000 * 3600 * 24,
},
example: https://jsfiddle.net/t9ug4pm7/11/
I have 2 graphs in 1 chart. The range of x-axis values for 1st graph is from 1 to 100. The range of x-axis values for 2nd graph is from 1 to 30. So, when the graphs are plotted in the chart, the 2nd graph gets plotted in very small area. So, it becomes difficult to read 2nd graph. My requirement - both the charts to be readable. Can anyone help me in doing this? Thanks in advance.
You could set up two axes - one for each series.
Example: http://jsfiddle.net/4v0a07op/
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: [{
},{
opposite: true
}],
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: [{
name: '1 to 30',
xAxis: 1,
data: [11,12,13,14,15,16,17,18,19,10,11,12,13,14,15,16,17,18,19,10,11,12,13,14,15,16,17,18,19,10]
}, {
name: '1 to 100',
xAxis: 0,
data: [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]
}]
});
});
I'm using Highcharts Highstock chart to display daily data. The vertical (x-axis) gridlines do not align with the data point (gridline is to the left of the data point). Does anyone know how to align the gridline with the data point?
http://jsfiddle.net/kngz3exf/3/
Highcharts.setOptions({
global: {
useUTC: false
}
});
$(function () {
$('#container').highcharts('StockChart', {
rangeSelector: {
enabled: false
},
yAxis: {
gridLineWidth: 0
},
xAxis: {
gridLineColor: '#000000',
gridLineWidth: 1,
lineColor: '#000000',
tickColor: '#000000',
minorGridLineColor: '#000000',
minorGridLineWidth: 1,
minorTickColor: '#000000',
ordinal: true,
tickInterval: 86400000,
minorTickInterval: 86400000
},
series: [{
data:[
[1417410000000, -0.4818850000000001],
[1417496400000, -0.40866199999999997],
[1417582800000, 0.20889499999999994],
[1417669200000, -0.623542],
[1417755600000, -0.060399999999999995],
[1418014800000, -0.56108],
[1418101200000, 0.30852700000000005],
[1418187600000, -0.4492829999999999],
[1418274000000, -0.275211],
[1418360400000, 0.013063999999999965],
[1418619600000, -0.27293900000000004],
[1418706000000, 0.49981200000000003],
[1418792400000, 0.2362090000000001],
[1418878800000, 0.4464490000000003],
[1418965200000, 1.2100639999999998],
[1419224400000, -0.792635],
[1419310800000, 0.14788899999999994],
[1419397200000, 0.011684],
[1419570000000, 0.08526699999999998],
[1419829200000, -0.12494599999999997],
[1419915600000, -0.06489100000000003],
[1420002000000, 0.279632]
]
}]
});
});
By changing my date format from ticks to Date.UTC(yyyy, mm, dd), I can get the data point to align with the vertical grid line.
What you need to do is set the useUTC to false. Now your Dec 2nd data show on Dec 2nd axis tick. Note that your data is not going to hit every major tick mark - looks like you are skipping weekends but your axis is not.