We Keep Coding

Highcharts, datetime, xAxis label. How to show all dates on x axis, not only even dates?

I'm new with Highcharts and stuck with a question. I need to display all dates on x axis, but by default, I'm supposing, only even dates are displaying. How can I display all dates?
Here my code:
const options: Options = {
chart: {
type: 'column',
},
title: {
text: '',
},
xAxis: {
crosshair: false,
type: 'datetime',
title: {
text: 'Days',
},
labels: {
format: LABEL_FORMAT[period],
rotation: 90,
align: 'left',
},
},
legend: {
enabled: true,
},
credits: {
enabled: false,
},
yAxis: {
title: {
text: 'Values',
},
},
series: [
{
name: 'test',
type: 'column',
data: [
[1651363200000, 10],
[1651449600000, 15],
[1651536000000, 5],
...
],
},
{
name: 'test 2',
type: 'column',
data: [
[1651363200000, 10],
[1651449600000, 20],
[1651536000000, 30],
...
],
},
],
},
};
This chart is not only used for to display day, but also for months and years.
Please, answer my question

Use the xAxis.tickInterval option. In this case:
xAxis: {
tickInterval: 24 * 3600 * 1000,
type: 'datetime',
labels: {
format: '{value:%Y-%m-%d}',
rotation: 90,
align: 'left'
},
}
Demo:
https://jsfiddle.net/BlackLabel/t0Lohusx/
API Reference:
https://api.highcharts.com/highcharts/xAxis.tickInterval

How to position dataLabels at the midpoint of an arearange chart in highcharts?

Highcharts.chart('container', {
chart: {
type: 'arearange',
zoomType: 'x',
scrollablePlotArea: {
minWidth: 600,
scrollPositionX: 1
}
},
title: {
text: 'Temperature variation by day'
},
xAxis: {
//type: 'datetime',
accessibility: {
rangeDescription: 'Range: Jan 1st 2017 to Dec 31 2017.'
}
},
yAxis: {
title: {
text: null
},
labels: {
enabled:true
}
},
plotOptions: {
arearange: {
dataLabels: {
enabled: true,
yLow: 5,
verticalAlign: 'bottom',
inside: true,
color: 'black',
formatter: function(e) {
if((this.x==0) && (this.point.low==this.y))
return this.series.name
}
}
}
},
legend: {
enabled: false
},
series: [{
name: "AREA 1",
data: [
[0, 10],
[0, 10],
],
borderColor: 'black',
borderWidth: 0.2,
},
{
name: "AREA 2",
data: [
[20, 40],
[20, 40],
]
}]
});
Above is a sample piece of code that I have plotted using the arearange chart. The graph is plotted successfully just as I wanted it to be. But there seems to be a problem. I want the series name "AREA1" and "AREA2" to be shown in the midpoint of the respective y-axis values. ie "Area 1" should be shown at 5(midpoint of 0 and 10) and "Area 2" should be shown at 30(midpoint of 20 and 40). Is there any way to do that? I've tried with specifying yLow value in the plotOptions. But it didn't work for me since the series data is dynamic.
The chart I'm using is highcharts and version is 4.1.5
Please help!! Thanks in advance

You can add mocked scatter series with disabled markers and enabled data labels to show the series name in the proper place:
series: [..., {
linkedTo: 0,
dataLabels: {
format: 'AREA 1'
},
type: 'scatter',
data: [(area1Data[0][0] + area1Data[0][1]) / 2]
}, {
linkedTo: 1,
dataLabels: {
format: 'AREA 2'
},
type: 'scatter',
data: [(area2Data[0][0] + area2Data[0][1]) / 2]
}
]
Live demo: http://jsfiddle.net/BlackLabel/d01e2ymx/
API Reference: https://api.highcharts.com/highcharts/series.scatter

How to reduce HighStock chart gap between candles?

I'm using candlestick chart of HighChart-HighStock. I want to reduce the gap between candlesticks. It's not so bad when it's on a wide range zoom. But when I zoomed the chart a lot, the padding between candle makes me annoyed because they are too wide apart.
I tried setting pointPadding of plotOption&xAxis to 0, but nothing happened. How can I shrink this gap?
Zoomed chart - too wide gap between candlestick
Wide view chart - not so bad
Highcharts.stockChart('container', {
// title: { text: '---'},
rangeSelector: {
buttons: [
// { type: 'hour', count: 1, text: '1h' },
{
type: 'day',
count: 1,
text: '1d'
},
// { type: 'all', count: 1, text: 'All' }
],
selected: 1,
//inputEnabled: true
},
xAxis: [{
pointPadding: 0,
type: 'datetime',
}, {
type: 'datetime',
}],
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '70%',
lineWidth: 2,
resize: {
enabled: true
}
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '75%',
height: '25%',
offset: 0,
lineWidth: 2
}],
plotOptions: {
candlestick: {
pointPadding: 0,
downColor: 'blue',
upColor: 'red',
dataGrouping: {
enabled: false,
}
},
line: {
lineWidth: 1,
states: {
hover: {
enabled: false
}
}
}
},
series: [{
name: 'ohlc',
type: 'candlestick',
data: chartData,
},
{
name: 'avg5',
type: 'line',
data: avg5Data,
color: '#FF0000',
},
{
name: 'avg10',
type: 'line',
data: avg10Data,
color: '#0C9B3A',
},
{
name: 'avg20',
type: 'line',
data: avg20Data,
color: '#FF9900',
},
{
name: 'avg60',
type: 'line',
data: avg60Data,
color: '#000000',
},
{
name: 'vol',
type: 'column',
data: moneyData,
yAxis: 1,
color: '#0944a3',
dataGrouping: {
enabled: false,
}
}
],
});
}

You need to set the series.pointPadding combined with series.groupPadding (equal to zero) to achieve the expected effect. Here is the example: https://jsfiddle.net/ahxrk5zq/
series: [{
type: 'candlestick',
name: 'AAPL Stock Price',
data: data,
groupPadding: 0,
pointPadding: 0.04,
dataGrouping: {
units: [
[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]
]
}
}]
API Reference:
https://api.highcharts.com/highstock/series.candlestick.pointPadding
https://api.highcharts.com/highstock/series.candlestick.groupPadding

highchart axis datetime + categories

Using Highcharts, is it possible to add to axis an additional category when the type is datetime?
Highcharts.chart('container', {
chart: {
pankey:'shift',
panning:true,
type: 'column',
zoomType:'xy'
},
series: {
allowPointSelect: true,
cursor: 'pointer',
stacking: 'normal',
},
xAxis: {
type:'datetime',
dateTimeLableFormats:{
day:'%e. %b',
hour:'%H',
month:'%b \'%Y',
year:'%Y'
}
},
series: [{
data: [
[1451606400000, 179594.83],
[1454284800000, 176105.09],
[1456790400000, 195630.06],
[1459468800000, 183081.82],
[1462060800000, 187955.4],
[1464739200000, 187483.48],
[1467331200000, 318999.15],
[1470009600000, 176279.28],
[1472688000000, 74438.96]
],
name: 'Cost',
stack: 'Cost'
},
{
data: [
[1451606400000, 179594.83],
[1454284800000, 176105.09],
[1456790400000, 195630.06],
[1459468800000, 183081.82],
[1462060800000, 187955.4],
[1464739200000, 187483.48],
[1467331200000, 318999.15],
[1470009600000, 176279.28],
[1472688000000, 74438.96]
],
name: 'Cost',
stack: 'Cost1'
}],
tooltip: {
crosshairs: true,
headerFormat:'<b>{point.x:%e. %b} : {series.options.stack}</b>',
pointFormat:'<b>{point.name}: </b> {point.y}<br><b>Total: </b>{point.total}'
}
});
Sample jsfiddle:https://jsfiddle.net/m1yoga/kby5973t/
Would like to see stack names Cost1 & Cost2, show up on the x-Axis. This jsfiddle data is just a sample, the code behind can generate many series names with different stack names.
Related link: Proper x-axis for Highcharts stack group column

Played around with the fiddle and got this working.
$(function () {
var ugly = ['apples','oranges'];
var cats = ugly.concat(ugly).concat(ugly).concat(ugly).concat(ugly);
var zeroes = [];
cats.forEach(function () {zeroes.push(0);});
var options = {
chart: {
pankey:'shift',
panning:true,
type: 'column',
zoomType:'xy'
},
series: {
allowPointSelect: true,
cursor: 'pointer',
stacking: 'normal',
},
xAxis: [
{
categories:cats,
lineColor:'#ffffff'
},
{
type:'datetime',
dateTimeLableFormats:{
day:'%e. %b',
hour:'%H',
month:'%b \'%Y',
year:'%Y'
}
}
],
series: [{
id: 'cost',
data: [
[1451606400000, 179594.83],
[1454284800000, 176105.09],
[1456790400000, 195630.06],
[1459468800000, 183081.82],
[1462060800000, 187955.4],
[1464739200000, 187483.48],
[1467331200000, 318999.15],
[1470009600000, 176279.28],
[1472688000000, 74438.96]
],
name: 'Cost',
stack: 'Cost',
xAxis: 1
},
{
linkedTo: 'cost',
data: [
[1451606400000, 179594.83],
[1454284800000, 176105.09],
[1456790400000, 195630.06],
[1459468800000, 183081.82],
[1462060800000, 187955.4],
[1464739200000, 187483.48],
[1467331200000, 318999.15],
[1470009600000, 176279.28],
[1472688000000, 74438.96]
],
name: 'Cost',
stack: 'Cost1',
xAxis:1
},
{
name: '',
data: zeroes,
showInLegend: false,
stack: '2015',
}
],
tooltip: {
crosshairs: true,
headerFormat:'<b>{point.x:%e. %b} : {series.options.stack}</b>',
pointFormat:'<b>{point.name}: </b> {point.y}<br><b>Total: </b>{point.total}'
}
};
$('#container').highcharts(options);
});
Here is the fiddle:
https://jsfiddle.net/m1yoga/afu3s3sj/3/

How to display the prices and the volumes on a candlesticks chart with Highstock Charts?

The example on the demo page shows the prices and the volumes on 2 charts (http://www.highcharts.com/stock/demo/candlestick-and-volume).
Is it possible to render them in one chart only?
Thanks.
Update:
Ok, got it here: http://jsfiddle.net/eAFJ3/3/:
$('#container').highcharts('StockChart', {
rangeSelector: {
enabled: false
},
scrollbar: {
enabled: false
},
navigator: {
enabled: false
},
title: {
text: 'AAPL Historical'
},
yAxis: [{
title: {
text: 'OHLC'
},
lineWidth: 2
},
{
title: {
text: 'Volume',
style: {
color: "#DDD"
}
},
gridLineWidth: 0,
opposite: true
}],
tooltip: {
shared: true
},
series: [{
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
color: '#DDD',
dataGrouping: {
units: groupingUnits
}
}, {
type: 'candlestick',
name: 'AAPL',
data: ohlc,
yAxis: 0,
dataGrouping: {
units: groupingUnits
}
}]
});
It takes a while to understand how to configure the charts... You have to define two Y axis and put the Volume xAxis as the first one in the series array. Otherwise it renders on top of the candles.