I'm using the HighCharts graphing software and am trying to show the date labels on the x axis below the stock graph; it currently shows below the volume graph only.
How can I do this?
Here are the chart options I am using (removed irrelevant ones to save space)
JSFiddle link below
$('#container').highcharts('StockChart', {
rangeSelector: {
inputEnabled: $('#container').width() > 480,
selected: 1
},
series: [{
type: 'candlestick',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
JSFille Link
You can use two xAxis, like in the example: http://jsfiddle.net/sbochan/phtd7r1t/2/
xAxis: [{
offset: 15
},{
linkedTo:0,
offset: -76
}],
You could use some of the positioning options to achieve this. If the height is dynamic it might be a bit difficult, but for static height charts this approach should work fine.
First edit the yAxis[1].top to be '73%' (moving the "Volume" chart further down to create a gap).
Then offset your x-axis with xAxis: { offset: -81 } to move it in between the two charts.
See this JSFiddle demonstration of the result.
Related
highstock data grouping is wrong while zooming. I am grouping data for each hour in a day.
data grouping without zoom
data grouping with zoom
as you can see from the image hour 3 and 16 not having the previous yAxis sum value anymore.
Can someone please let me know what's wrong here?
fiddle - highstock data grouping with zoom
{
type: 'column',
name: 'Stock Volume',
color: 'red',
data: data,
dataGrouping: {
forced: true,
units: [['hour', [1]]],
approximation: 'sum',
}
}
setting series.getExtremesFromAll to true solved my issue.
In general, only points in the visible range are grouped, points that are outside the extremes are not taken into calculations. In the docs they have mentioned only yAxis extremes, but it affects data Grouping too.
series: [{
type: 'column',
name: 'AAPL Stock Volume',
color: 'red',
data: data,
getExtremesFromAll: true,
dataGrouping: {
forced: true,
units: [['hour', [1]]],
approximation: 'sum',
}
}]
fiddle
github issue link
I'm trying to define the limit the zoom level, I want to increase it, a user can go on a map.
Because for some country I'm showing on the map, there is some region that is so small that the shape is not visible, even if they are correctly defined into the GeoJSON, and there is also the label over it.
You can take as reference the following code from highmaps developers:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/doubleclickzoomto/
$('#container').highcharts('Map', {
title : {
text : 'Zoom in on country by double click'
},
mapNavigation: {
enabled: true,
enableDoubleClickZoomTo: true
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
series : [{
data : data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'code'],
name: 'Population density',
states: {
hover: {
color: '#BADA55'
}
}
}]
});
found the solution:
setting minRange property on both xAxis and yAxis:
The minimum range to display on this axis. The entire axis will not be allowed to span over a smaller interval than this, in terms of shape path coordinates. Defaults to 5 times the size of the smallest area.
$('#container').highcharts('Map', {
title : {
text : 'Zoom in on country by double click'
},
xAxis: {
minRange: 1
},
yAxis: {
minRange: 1
},
.....
My highstock chart isn't rendering properly. It shows some gap when my 2nd series start in the area chart. Even when zoomed in it's not showing properly. The timestamps are in UTC and have a value.
To clarify it a bit here some screenshots:
Normally not zoomed in:
Zoomed in a bit, and showing mouseover. Has only 1 series:
Zoomed in more, showing bigger gap, but has only 1 series:
Zoomed in more, showing bigger gap, but has only 1 series on same date:
I have the following options enabled on the graph:
chart: {
zoomType: 'x',
type: 'area'
},
plotOptions: {
area: {
stacking: 'normal'
},
series: {
turboThreshold: 0,
dataGrouping: {
approximation: "high",
smoothed: true,
groupPixelWidth: 10,
units: [['day', [1]], ['week', [1]], ['month', [1]]]
}
}
}
Any suggestions how to resolve this?
Thanks!
Seems that disabling
plotOptions.series.dataGrouping.smoothed
does the trick.
So then a bug-report:
When
plotOptions.series.dataGrouping.smoothed = true
the graph renders gaps, where I would expect a line.
Can anyone recommend a method of setting the X axis to be a constant width across multiple instances of a bar chart?
See this jsFiddle: http://jsfiddle.net/LCYwW/1/
The first chart is an example of placing the data for 2 locations in a single chart. In this case, Highcharts automatically adjusts the X axis width to accommodate both location labels.
However, I need to separate these 2 locations into separate charts, but maintain the same proportions of X Axis to bar area width for both charts. See charts 2 and 3 in the example. In this case, Highcharts picks an X axis width that suits just the single location and the 2 charts do not line up when stacked.
Is there a method to get the individual charts to maintain the same proportions as each other? I tried setting the xAxis.labels.style.width attribute, and it does something, but doesn't seem to be a concrete width. See http://jsfiddle.net/LCYwW/3/
This example is easiest to see in the jsFiddle, but SO is requiring me to post the code:
$('#containerAll').highcharts({
chart:{
type: 'bar'
},
series: [
{
name: 'Male',
data: [{"name":"58.1%","y":0.581}, {"name":"18.1%","y":0.181}]
},
{
name: 'Female',
data: [{"name":"58.5%","y":0.585}, {"name":"28.5%","y":0.285}]
}
],
xAxis: {
categories: ['Short Name', 'Much Longer Location Name']
}
});
$('#container1').highcharts({
chart:{
type: 'bar'
},
series: [
{
name: 'Male',
data: [{"name":"58.1%","y":0.581}]
},
{
name: 'Female',
data: [{"name":"58.5%","y":0.585}]
}
],
xAxis: {
categories: ['Short Name'],
labels: {
style: {
width: 200
}
}
}
});
$('#container2').highcharts({
chart:{
type: 'bar'
},
series: [
{
name: 'Male',
data: [{"name":"18.1%","y":0.181}]
},
{
name: 'Female',
data: [{"name":"28.5%","y":0.285}]
}
],
xAxis: {
categories: ['Much Longer Location Name'],
labels: {
style: {
width: 200
}
}
}
});
You have a lot more control over the labels if you turn on useHTML.
xAxis: {
categories: ['Short Name'],
labels: {
style: {
width: '100px',
'min-width': '100px'
},
useHTML : true
}
}
http://jsfiddle.net/LCYwW/5/
You'll also probably have to set a min and max for the yAxis to keep the data in proportion.
Fiddle with the yAxis max set: http://jsfiddle.net/LCYwW/6/
Also consider, using the chart: marginLeft property to set a fixed width for the labels:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
marginLeft: 160
},
// ...
})
});
This preserves the other behavior of the chart, e.g., alignment of the labels. Also see this question.
Adding the marginLeft property inside of chart worked like a charm for me.
chart: {
type: 'bar',
marginLeft: 200
}, ...
Is it possible to have 2 yAxis in a highstock chart from highcharts one on the left and another on the right ?
Thanks
A very simple example:
First you have to create your new yAxis and set it's position.
{
title: {
text: 'Other data panel'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2,
opposite: true
}
Then, when you create your serie you in what yAxis it will be placed.
{
type: 'column',
name: 'Other',
data: otherData,
yAxis: 2,
dataGrouping: {
units: groupingUnits
}
}
You can see it working here.