Highcharts multiple x-Axis without multiple series?

11,545

Solution 1

You can also use linkedTo paramtetr on extra axis http://api.highcharts.com/highcharts#yAxis.linkedTo

Solution 2

its pretty simple,

declare 2 xAxis same like the yAxis you mentioned in the example with one of them as opposite:true

As you have only one series set the second axis extremes same as the first one using getExtremes() and setExtremes(), as shown in this fiddle here http://jsfiddle.net/W43Zb/

Hope this will help you

Share:
11,545
natecraft1
Author by

natecraft1

Master of none

Updated on August 17, 2022

Comments

  • natecraft1
    natecraft1 over 1 year

    This fiddle uses multiple series and displays an axis for each of them. Is it possible to use a single series to make several Axes? http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/combo-multi-axes/

    xAxis:[{
            categories:setup.x_mixed,
            maxZoom:5,
            minPadding: 0.2,
            labels:{
              "enabled":setup.categories_label,
              "y":1,
              "style":{
                "fontSize":13,
                "color":"#999",
                fontFamily:"'helvetica neue',helvetica",
                whiteSpace:"nowrap",
                textOverflow:"clip",
                width:"100%",
                marginTop:legendSpacing
              },
              formatter:function () {
                return this.value.split("|")[0]
              }
            },
            lineColor:"rgba(255,255,255,0)",
            tickWidth:0,
            offset:0
          }, { // Secondary yAxis
            categories:setup.x_mixed,
            maxZoom:5,
            minPadding: 0.2,
            labels:{
              "enabled":setup.categories_label,
              "y":16,
              "style":{
                "fontSize":13,
                "color":"#999",
                fontFamily:"'helvetica neue',helvetica",
                whiteSpace:"nowrap",
                textOverflow:"clip",
                width:"100%",
                marginTop:legendSpacing
              },
              formatter:function () {
                return this.value.split("|")[1]
              }
            },
            lineColor:"rgba(255,255,255,0)",
            tickWidth:0,
            offset:0
    
            }],