combine x-axis labels in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Line Chart

Description

combine x-axis labels in line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {//from  w w w . java2s.com
    $('#container').highcharts({
    "chart": {
        "type": "line"
    },
    "colors": [
        "#FF7F0F",
        "#6A8795"
    ],
    "credits": {
        "enabled": false
    },
    "exporting": {
        "enabled": false
    },
    "legend": {
        "enabled": false
    },
    "plotOptions": {
        "line": {
            "dataLabels": {
                "enabled": false
            },
            "enableMouseTracking": true
        },
        "series": {
            "animation": true,
            "marker": {
                "radius": 4,
                "states": {
                    "hover": {
                        "enabled": false
                    },
                    "select": {
                        "enabled": false,
                        "lineWidth": 0
                    }
                }
            },
            "point": {
                "events": {}
            }
        }
    },
    "series": [
        {
            "category": "compliant",
            "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 2, 1, 0, 1, 0, 1, 1, 0, 0], "id": "0c",
            "marker": {
                "symbol": "circle"
            },
            "name": "Account-Group2"
        },
        {
            "category": "compliant",
            "data": [1, 0, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            "id": "3c",
            "marker": {
                "symbol": "circle"
            },
            "name": "Account-Group1"
        }
    ],
    "title": {
        "text": null
    },
    "tooltip": {
        "useHTML": true
    },
    "xAxis": {
        "categories": [
            "2011 - M01",
            "2011 - M02",
            "2011 - M03",
            "2011 - M04",
            "2011 - M05",
            "2011 - M06",
            "2011 - M07",
            "2011 - M08",
            "2011 - M09",
            "2011 - M10",
            "2011 - M11",
            "2011 - M12",
            "2012 - M01",
            "2012 - M02",
            "2012 - M03",
            "2012 - M04",
            "2012 - M05",
            "2012 - M06",
            "2012 - M07",
            "2012 - M08",
            "2012 - M09",
            "2012 - M10",
            "2012 - M11",
            "2012 - M12"
        ],
        tickInterval:6
    },
    "yAxis": {
        "allowDecimals": false,
        "min": 0,
        "title": {
            "text": "Number of Events"
        }
    }
});
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px"></div>  
   </body>
</html>

Related Tutorials