Adding a second x-axis in Highcharts

Question

NOTE: the below code is for Highcharts in R, but obviously any solution in 'normal' Highcharts code is also more than welcome!

I'm trying to print the mean (indicated by the diamond symbol in the example, below), and a difference to benchmark (not included in the sample data below) to a horizontal stacked bar chart.

At first I thought to plot a second graph, and combine them with hw_grid, but aligning them is really tricky. Hence I thought I'd add the numbers as the labels on a second x-axis.

I know it's possible to add multiple y-axes (Two y Axis in Highcharter in R, and https://www.highcharts.com/demo/combo-dual-axes), but because this is a horizontal chart, it needs to be the x-axis, and there doesn't seem to be an equivalent?

Here's the dummy data to reproduce in R:

library(dplyr)
library(highcharter)

df1 = data.frame("label"= paste0("Label", c(1,1,1,2,2,2,3,3,3,4,4,4)), 
                "value" = c(-100,231,110, -189,299,198, -199,150,298, -90,180,155), 
                "grade" = rep(c("Disagree","Neutral","Agree"), 4))

df2 = data.frame("x" = c(0,1,2,3), 
                 "y" = c(200,100,250,280))

highchart() %>%
  hc_add_series(df1, type="bar", hcaes(x=label,y=value,group=grade)) %>%
  hc_add_series(df2, type="scatter", marker=list(symbol='diamond', radius=8)) %>%
  hc_plotOptions(bar = list(stacking="normal")) %>%
  hc_xAxis(type = "category") %>%
  hc_yAxis(visible=FALSE)

Mark Z. Mark Z. · Accepted Answer · 2019-09-20T03:07:31

Works just the same as with the y-axis: simply add another axis object to the xAxis array (being sure to set opposite = true for it) and then for the series you want to leverage it, specify xAxis = 1.

Here is an example (which is using categorical x-axis values but that need not be the case):

xAxis: [{
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    crosshair: true
},
{
    categories: ['1', '2', '3', '4', '5', '6',
        '7', '8', '9', '10', '11', '12'],
        opposite: true
}]

...

series: [{
    name: 'Rainfall',
    type: 'column',
    xAxis: 1, // this applies this data to the alternate (2nd axis) specified above
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    tooltip: {
        valueSuffix: ' mm'
    }

}, {
    name: 'Temperature',
    type: 'spline',
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
    tooltip: {
        valueSuffix: '°C'
    }
}]

In this example, you can even have 2 x-axes and 2 y-axes: https://jsfiddle.net/mzhukovs/8v167bcf/2/

Adding a second x-axis in Highcharts

1 Answers