I'd like to style my navigator columns in a Highstock chart to take up more horizontal space (be less 'gappy') but I can't seem to find the settings to do it.
You can control width of the item using pointPadding and groupPadding, for example:
navigator: {
series: {
type: 'column',
pointPadding: 0,
groupPadding: 0
}
}
jsFiddle demo
you can use following in your chart config:
spacingBottom: 0,
spacingTop: 0,
spacingLeft: 0,
spacingRight: 0,
margin:0,
padding:0
Turns out the navigator column widths are automatically calculated based on the values of pointPadding and groupPadding. This worked for me:
navigator: {
series: {
type: 'column',
pointPadding: 2,
groupPadding: 2
},
},
Related
I am new to highcharts. Is there anyway I can achieve kind of chart functionality using highcharts in which series label are on top and y axis is drawn vertically as shown in this image
Chart
You just can build a chart with multiple y-axes and enabled inverted option:
chart: {
inverted: true
},
yAxis: [{
opposite: true,
width: '40%'
}, {
offset: 0,
opposite: true,
width: '50%',
left: '50%'
}]
Live demo: http://jsfiddle.net/BlackLabel/4eow5np2/
API Reference: https://api.highcharts.com/highstock/chart.inverted
I really want to know how to make it like images below in highcharts.
Have a good day.
enter image description here
You can use xrange series with partialFill property: https://jsfiddle.net/BlackLabel/nhoxj4tk/ or simple bar series with plotBands:
series: [{
type: 'bar',
pointPadding: 0,
groupPadding: 0,
data: [12]
}],
yAxis: {
max: 20,
plotBands: [{
color: 'yellow',
from: 0,
to: 20
}]
}
Live demo: http://jsfiddle.net/BlackLabel/ao3v6h15/
API Reference: https://api.highcharts.com/highcharts/yAxis.plotBands
I have set both a column and a line in one chart, such as the link:
https://jsfiddle.net/dodouwang/wtjbgav0/1/
Highcharts.chart('container', {
xAxis: {
type: 'datetime',
},
plotOptions: {
column: {
turboThreshold: 10000,
borderWidth: 0,
pointPadding: 0,
groupPadding: 0
},
},
series: [{
type: 'column',
name: 'column',
data: [[1497484800000,210000],[1497571200000,120000],[1497744000000,190000]]
},{
type: 'line',
name: 'line_wide',
data: [[1497484800000,210000],[1497571200000,120000]]
},{
type: 'line',
name: 'line_narrow',
data: [[1497484800000,210000],[1497498000000,120000]],
visible: false
}],
});
But I found that if the gap between the points of the line is too narrow(less than one day), then the width of the column is automatic set to no wider than the gap. Is it a bug or a feature?
you can visit the link above, the default show is a column with a "wider" line, it seems all right. But if you unselect the "line_wide" and select the "line_narrow", then the bug accurs.
How to fix it?
P.S.: I have another question of this link's column: I have set the xAxis to 'datetime', and the column data is [[1497484800000,210000],[1497571200000,120000],[1497744000000,190000], and set the Gapping to 0 to make the width of the column as wider as possible. But, when there are only column in the chart(the 2 lines are unselected), why the max width of the column is a "day", not an "hour" or a "minute" or other width?
What you need is series.pointRange option. Width of the column depends on that value and if it is not configured - the range will be computed as the distance between the two closest data points (on axis, so each series which have that specific axis will be taken into the account).
If you set pointRange to 1 day, columns widths will span for 1 day:
plotOptions: {
column: {
turboThreshold: 10000,
borderWidth: 0,
pointRange: 1000 * 3600 * 24,
pointPadding: 0,
groupPadding: 0
},
},
example: https://jsfiddle.net/nogfr6js/
This is a follow-up from Highcharts: incorrect column placement with linked series? but I felt that this issue warranted a new post rather than a continuation of the comments in the above post.
Basically a bit of a hack is required in order to implement variable width columns. That hack is to use multiple series... one series per column width required.
But that hack leads to an issue with placement of columns, and another hack is required to move them to the right place.
But that creates an issue with a big gap between the edge of the chart area and the y axis. So another hack is required to eliminate the gap.
But that seems to create yet another issue, which is that it messes up the left-most data points in any other series on the chart.
This is illustrated in the following jsfiddle:
http://jsfiddle.net/drmrbrewer/215tnLna/33/
You'll see that something funny is happening when the cursor is over the left-most two columns. If you un-share the tooltip, the problem appears to be that the tooltip is not operating at all on the left-most two spline points.
Any way to resolve this? It's a shame you can't just have variable column widths as a native feature, specifying a column width per point...
Thanks.
jsfiddle code is as follows:
$(function () {
$('#container').highcharts({
title: {
text: 'Variable width columns'
},
xAxis: {
type: 'datetime',
tickInterval: 36e5,
labels: {
format: '{value:%H}'
},
// following are to eliminate gaps:
min: 1428048000000-36e5 + (6 * 0.5 * 36e5),
max: 1428127200000-36e5 - (6 * 0.5 * 36e5)
},
// seems to be a combination of min above
// and tooltip.shared below that freezes the
// left-most two columns
tooltip: {
shared: true
},
legend: {
enabled: false
},
plotOptions: {
column: {
groupPadding: 0,
pointPadding: 0,
borderWidth: 0,
grouping: false,
color: '#22CC00'
}
},
series: [{
name: 'spline',
yAxis: 0,
type: 'spline',
zIndex: 5,
data: [{"x":1428048000000,"y":8.6},{"x":1428051600000,"y":9},{"x":1428055200000,"y":8.1},{"x":1428058800000,"y":6.6},{"x":1428062400000,"y":5},{"x":1428073200000,"y":4.9},{"x":1428084000000,"y":4},{"x":1428094800000,"y":3.4},{"x":1428105600000,"y":2.4},{"x":1428127200000,"y":6.9}],
color: '#2222CC'
},
// now the multiple series of columns having different widths, linked together...
{
name: 'column',
type: 'column',
data: [{"x":1428048000000,"y":8.6},{"x":1428051600000,"y":9},{"x":1428055200000,"y":8.1},{"x":1428058800000,"y":6.6},{"x":1428062400000,"y":5}],
pointRange: 36e5,
// following is to position the bars correctly
pointPlacement: -0.5*(3/6)*(1/3)
},{
name: 'column',
type: 'column',
data: [{"x":1428073200000,"y":4.9},{"x":1428084000000,"y":4},{"x":1428094800000,"y":3.4},{"x":1428105600000,"y":2.4}],
linkedTo: ':previous',
pointRange: 3 * 36e5,
// following is to position the bars correctly
pointPlacement: -0.5*(3/6)
},{
name: 'column',
type: 'column',
data: [{"x":1428127200000,"y":6.9}],
linkedTo: ':previous',
pointRange: 6 * 36e5,
// following is to position the bars as I want them
pointPlacement: -0.5
}]
});
});
Is it possible to have highstocks make each individual pane have its own shadow, rather than the entire plot area? I tried putting the shadow options in the yAxis field but that does not seem to work:
yAxis: [{
title: {
text: 'OHLC'
},
height: 200,
lineWidth: 2,
id: 'OHLC',
//do it here??
chart: {
plotBackgroundColor: '#f2f6fb',
plotShadow: {
enabled: true,
width: 6,
offsetX: 2,
offsetY: 2
}
},
aaaand jsfiddler: http://jsfiddle.net/abbike18/Ww5Tg/7/
Only shadow for full plotting area is supported, see: http://jsfiddle.net/Ww5Tg/8/
You have two options:
try to use plotBands for yAxis, but this may not be sufficient
use chart.render.rect() to add rect where you have pane, with color/options you have to