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.
Related
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've noticed that if I specify yAxis.max in a Highcharts call:
$('#container').highcharts({
//snip...
yAxis: {
max: 30000,
minorGridLineWidth: 1,
minorTickInterval: 10000,
title: {
enabled: false
}
},
//snip...
});
The resulting chart will cap the yAxis range at 30000:
However, if I specify a somewhat short height on the chart's target container:
<div id="container" style="height:126px; width:420px;"></div>
The resulting chart will not "honor" the yAxis max property:
Please see https://jsfiddle.net/jhfrench/kpf2b3Lf/ for an example.
How can I force Highcharts to respect yAxis.max when I specify a short height?
You can manually select a tickInterval to force highcharts to respect the axis max. This should work if the size of your container is constant.
Here's an updated fiddle: https://jsfiddle.net/kpf2b3Lf/1/
yAxis: {
max: 30000,
minorGridLineWidth: 1,
minorTickInterval: 10000,
tickInterval: 10000,
title: {
enabled: false
}
},
I need to plot a radar chart using HighCharts; in particular, all of the series have a different scale. I am able to draw correctly the radar chart using multiple scales (one per y-axis), but I see multiple overlapping labels on the main y-axis, which is clearly wrong. Now, I want instead to plot the labels related to every y-axis on the corresponding y-axis. How can I do this ?
Here is a snippet that can be pasted in jsFiddle to verify that the labels indeed overlap.
$(function () {
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
polar: true,
type: 'line',
zoomType: 'xy'
},
title: {
text: 'Indicators Radar Chart',
x: -80
},
pane: {
size: '90%'
},
xAxis: {
categories: ['A', 'B', 'C', 'D'],
tickmarkPlacement: 'on',
lineWidth: 0,
min: 0
},
yAxis: [{
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
labels: {
enabled: true
}
}, {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
labels: {
enabled: true
}
}, {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
labels: {
enabled: true
}
}],
tooltip: {
shared: true,
valuePrefix: ''
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 100,
layout: 'vertical'
},
series: [{
name: 'Austria',
yAxis: 0,
data: [0.130435, 35.043480, 29288.695312, 236960.296875],
pointPlacement: 'on'
}, {
name: 'Germany',
yAxis: 1,
data: [0.000000, 42.217392, 149103.906250, 589782.500000],
pointPlacement: 'on'
}, {
name: 'Italy',
yAxis: 2,
data: [2.304348, 44.826088, 132805.218750, 878785.937500],
pointPlacement: 'on'
}]
});
});
The output I am trying to obtain is such that for this particular chart, the labels related to the different scales appear along each axis: from the center point to A, from the center point to B, from the center point to C and from the center point to D. The problem is that right now all of the labels appear on the same axis, from the center point to A.
Thank you in advance.
Demo: http://www.highcharts.com/jsbin/eyugex/edit
You seem to assume that each of the axes extend from the center to different directions, but this is not the case. All Y axes extend from the center. The X axis starts on top of the chart and follows the perimeter clockwise around the perimeter and ends on top. The Y axis labels are drawn where the X axis starts, which is up.
In a chart like this it wouldn't make sense to add multiple Y axes because they are all drawn on top of each other and you can't visually distinguish one from another.
I am creating a HighChart with a plotLine in it. The plotLine has a fixed value, while the data can vary between charts.
HighChart scales the y-axis automatically based on the maximum value of data, but it doesn't consider the plotLine's value in its calculations.
Hence, if the data range encompasses the plotLine value, the plotLine gets shown, but gets cropped out of the viewport if not.
Example:
$(function () {
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Dummy Data by Region'
},
xAxis: {
categories: ['Africa', 'America', 'Asia']
},
yAxis: {
plotLines:[{
value:450,
color: '#ff0000',
width:2,
zIndex:4,
label:{text:'goal'}
}]
},
series: [{
name: 'Year 1800',
data: [107, 31, 650]
}]
});
});
});
JSFiddle for above code: http://jsfiddle.net/4R5HH/3/
The goal line (in red) is shown for the default data, but if I change the data to [107, 31, 250], then the plotLine goes out of the graph viewport and hence becomes invisible.
One other option that does not introduce data points:
yAxis: {
minRange:450,
min:0,
plotLines:[{
value:450,
color: '#ff0000',
width:2,
zIndex:4,
label:{text:'goal'}
}]
},
This sets the minimum for the yAxis to 0 (this is unlikely to be false in this case) and the minimum Range to 450.
See updated fiddle.
You need to add in a point to you chart but disable the marker.
I added a new series with scatter plot type and its value equal to the goal value:
{
name: 'Goal',
type: 'scatter',
marker: {
enabled: false
},
data: [450]
}
See updated jsFiddle: http://jsfiddle.net/wergeld/4R5HH/4/
In some cases, wergeld's solution would be preferable than jank's solution, especially when you are not sure about min and minRange. But wergeld's solution has a minor issue. If you point your mouse over the plot line, it will show a point and tooltip on the point. To avoid this, I have modified his solution and added enableMouseTracking to get rid of the problem.
{
name: 'Goal',
type: 'scatter',
marker: {
enabled: false
},
data: [450],
enableMouseTracking: false
}
See updated jsFiddle: http://jsfiddle.net/4R5HH/570/
You could simply set the max attribute to the max value you will have:
yAxis: {
max:650 //HERE
plotLines...
},
Adjust the axis while loading the chart:
$(function() {
$('#container').highcharts({
chart: {
events: {
load: function() {
var check = $('#container').highcharts();
var min = check.yAxis[0].min;
var max = check.yAxis[0].max;
var pLine = check.yAxis[0].chart.options.yAxis[0].plotLines[0].value;
if (pLine > max) {
check.yAxis[0].setExtremes(null, pLine);
}
if (pLine < min) {
check.yAxis[0].setExtremes(pLine, null);
}
}
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar'],
},
yAxis: {
minPadding: 0.30,
plotLines: [{
color: '#FF0000',
width: 2,
value: 200
}]
},
series: [{
data: [70, 60, 95]
}]
});
});