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/
Related
I would like to emphasise the difference between 2 different series in the same graphic : one coming from the user data and one from static data as following :
I wanted to define the pointPadding value, but this is available for all the series. How can I set this value only for a specific serie ?
The simplest solution seems to be adding a second x-axis and separate series. For example:
series: [{
...,
groupPadding: 0.325,
id: 'id1'
}, {
...,
groupPadding: 0.325,
id: 'id2'
}, {
...,
xAxis: 1,
linkedTo: 'id1'
}, {
...,
xAxis: 1,
linkedTo: 'id2'
}],
xAxis: [{
width: '20%',
type: 'category',
tickWidth: 1
}, {
offset: 0,
width: '80%',
left: '20%',
type: 'category',
tickWidth: 1
}]
Live demo: http://jsfiddle.net/BlackLabel/rwg6tL2v/
API Reference: https://api.highcharts.com/highcharts/xAxis
I have to use stacked bar and there are below requirements :
Bar width should be fixed ( lets say 15px, using pointWidth property)
Gap should be maintained between bars irrespective of number of values or Bars.
If Chart's Height goes beyond 600 px, need to show scroll ( point #1 and Point #2 should be in place)
I have achieved Point #1 and #2 ( Adjusting chart's height at run time using some logic basis bar/series count) but facing issue on Point #3 as there is a property
scrollablePlotArea: {
minHeight: 400
}
which displaying scroll when charts min height is less than 400 but it seems no option to show scroll when height goes beyond to particular limit or say MaxHeight option is missing.
Responsive rules should help, you can fit a chart for your conditions. I'm not sure you know that fact
the bar chart is exactly the same as a column chart only the x-axis and y-axis are switched.
Highcharts.chart('container', {
chart: {
type: 'bar',
scrollablePlotArea: {
minHeight: 600
},
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 2,
title: {
text: 'Total fruit consumption'
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}],
responsive: {
rules: [{
condition: {
minWidth: 600
},
// Make the labels less space demanding on mobile
chartOptions: {
chart: {
scrollablePlotArea: {
minHeight: 800
},
},
}
}]
}
});
Live demo:
https://jsfiddle.net/BlackLabel/ae4z53hw/
API References:
https://api.highcharts.com/highcharts/responsive.rules.condition
It would be better to adjust the width of the columns using use groupPadding, pointPadding and centerInCategory to manipulate.
PointWidth is a value in pixels that can be more difficult to manipulate so that they do not overlap.
plotOptions: {
series: {
grouping: false,
stacking: 'normal',
groupPadding: 0,
pointPadding: 0,
centerInCategory: true,
}
},
https://api.highcharts.com/highcharts/plotOptions.bar.centerInCategory
Why isn't the plotLine being drawn on the chart? I've been trying to figure this out for at least 2 hours.
The goal is to add a plotLine in line with a candlestick at any given index (100 in the example). So candle at index 100 in the ohlcarray would be highlighted in the chart. To do this I set the value of the plotLine to 100. Am I doing it wrong?
I really appreciate your help.
// ASSUME WE HAVE 300 BARS
const symbol = 'APPL';
const volume = [ ... ];
const ohlc = [ ... ];
Highcharts.stockChart('chart', {
cropThreshold: 500,
xAxis: {
plotLines: [{
color: 'red',
dashStyle: 'longdashdot',
value: 100,
width: 1,
zIndex: 5
}],
},
series: [{
type: 'candlestick',
id: `${symbol}-ohlc`,
name: `${symbol} OHLC`,
data: ohlc,
}, {
type: 'column',
id: `${symbol}-volume`,
name: `${symbol} Volume`,
data: volume,
yAxis: 1,
}]
});
You need to remember that your xAxis type is set as datetime, so 100 value is just a few seconds after 1 Jan 1970. To make it work you need to set a date value that fits to the chart range.
Demo: https://jsfiddle.net/BlackLabel/1gwvcy9L/
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/
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
}]
});
});