Dual x-axis on same line with Highcharts. Possible? - highcharts

Question

Can we create multiple x-axis chart like this using Highcharts?
If yes, can someone please provide some pointers?
There are three year data displayed. i.e. 2010,2011, 2012
https://www.adr.com/DRDetails/CorporateActions?cusip=055622104

Answer 1

The older answers didn't run for me in JSFiddle.
Here is a working example, if it helps anyone:
http://jsfiddle.net/kPqKW/
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'container'
},
xAxis: [{
type: 'datetime'
}, {
type: 'datetime',
opposite: true
}],
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000 // one day
}, {
data: [176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0],
pointStart: Date.UTC(2010, 0, 10),
pointInterval: 24 * 3600 * 1000, // one day
xAxis: 1
}]
});
});

Answer 2

Using highstocks (highcharts lesser known sibling), you can do something like what you're looking for. Check out this fiddle
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function(data) {
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
dataLength = data.length;
for (i = 0; i < dataLength; i++) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
])
}
// set the allowed units for data grouping
var groupingUnits = [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]];
// create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Historical'
},
yAxis: [{
title: {
text: 'OHLC'
},
height: 200,
lineWidth: 2
}, {
title: {
text: 'Volume'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2
}],
series: [{
type: 'area',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'area',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
});
});
});

Answer 3

You can simply use Highcharts grouped categories plugin, take a look: https://github.com/blacklabel/grouped_categories

Answer 4

It seems possible, but in different view. one axis at the top and other one is at the bottom. You've set opposite to true as we do for y - axis. Have a look at this question in
Highcharts forum
<div id="container" style="height: 400px; width: 500px"></div>
<script type="text/javascript">
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: [{
type: 'datetime',
},{
type: 'datetime',
opposite: true
}],
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000 // one day
},{
data: [176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0],
pointStart: Date.UTC(2010, 0, 10),
pointInterval: 24 * 3600 * 1000, // one day
xAxis: 1
}]
});
</script>
for working example, look at this jsfilddle

Answer 5

you may go through this fiddle https://jsfiddle.net/ajaytripathi10/z8mrwhxz/. Hope this will help.
$(function () {
$('#container').highcharts({
title: {
text: 'Shared tooltip chart'
},
xAxis: [{
type: 'datetime',
id: 'x1'
}, {
type: 'datetime',
id: 'x2',
opposite: true
}],
yAxis: {
min: 0
},
tooltip: {
shared: true,
useHTML: true,
formatter: function () {
var tooltip = '';
var i, len;
tooltip += '<small>Apple</small>';
tooltip += '<table>';
for (i = 0, len = 4; i < len; i++) {
if(this.points[i] != undefined){
if(this.points[i].series.name.indexOf('Apple') >= 0){
tooltip += '<tr>';
tooltip += '<td style="color: ' + this.points[i].series.color + '">\u25CF</td>';
tooltip += '<td>' + Highcharts.dateFormat('%Y-%m-%d', this.points[i].x) + ':</td>';
tooltip += '<td style="text-align: right"><b>' + this.points[i].y + '</b></td>';
tooltip += '</tr>';
}
}
}
tooltip += '</table>';
tooltip += '<small>Mango</small>';
tooltip += '<table>';
for (i = 0, len = 4; i < len; i++) {
if(this.points[i] != undefined){
if(this.points[i].series.name.indexOf('Mango') >= 0){
tooltip += '<tr>';
tooltip += '<td style="color: ' + this.points[i].series.color + '">\u25CF</td>';
tooltip += '<td>' + Highcharts.dateFormat('%Y-%m-%d', this.points[i].x) + ':</td>';
tooltip += '<td style="text-align: right"><b>' + this.points[i].y + '</b></td>';
tooltip += '</tr>';
}
}
}
tooltip += '</table>';
return tooltip;
}
},
series: [{
name: 'Apple',
id: 'series1',
xAxis: 'x1',
color: 'rgba(255, 0, 0, 1.0)',
data: [5, 3, 4, 7, 6, 1, 0],
pointInterval: 1000 * 60 * 60 * 24,
pointStart: Date.UTC(2015, 2, 10)
}, {
name: 'Apple New',
id: 'series2',
//linkedTo: 'series1',
xAxis: 'x2',
color: 'rgba(255, 180, 180, 1.0)',
data: [4, 5, 5, 6, 1, 3, 4],
pointInterval: 1000 * 60 * 60 * 24,
pointStart: Date.UTC(2015, 2, 17)
},{
name: 'Mango',
id: 'series3',
xAxis: 'x1',
color: 'rgba(255, 0, 0, 1.0)',
data: [15, 13, 14, 17, 16, 11, 10],
pointInterval: 1000 * 60 * 60 * 24,
pointStart: Date.UTC(2015, 2, 10)
}, {
name: 'Mango New',
id: 'series4',
//linkedTo: 'series1',
xAxis: 'x2',
color: 'rgba(255, 180, 180, 1.0)',
data: [14, 15, 15, 16, 11, 13, 14],
pointInterval: 1000 * 60 * 60 * 24,
pointStart: Date.UTC(2015, 2, 17)
}]
});
});

Answer 6

Complete code for making horizontal and vertical line in column,piechart highcharts
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="container" class="col-md-4" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div class="col-md-8">
<div id="container2" class="col-md-6" style="min-width: 310px; height: 400px; margin: 0 auto" class="col-md-6"></div><div id="container3" class="col-md-6" style="min-width: 310px; height: 400px; margin: 0 auto" class="col-md-6" class="col-md-6">dddd</div>
</div>
<script>
Highcharts.chart('container', {
chart: {
type: 'column',
},
title: {
text: 'sample charts for both horizontal and vertical line'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
gridLineWidth: 1,
minPadding: 2,
maxPadding: 2,
maxZoom: 6 ,
categories: ['Jan', 'Feb', 'Apr', 'May', 'Jun',
'Dec']
},
yAxis: {
title: {
text: 'Temperature'
},
labels: {
formatter: function () {
return '$'+this.value;
}
},
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
series: [{
// name: '',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]
}]
});
Highcharts.chart('container2', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Sogou Explorer',
y: 1.64
}, {
name: 'Opera',
y: 1.6
}, {
name: 'QQ',
y: 1.2
}, {
name: 'Other',
y: 2.61
}]
}]
});
Highcharts.chart('container3', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Sogou Explorer',
y: 1.64
}, {
name: 'Opera',
y: 1.6
}, {
name: 'QQ',
y: 1.2
}, {
name: 'Other',
y: 2.61
}]
}]
});
</script>
</body>
</html>