highchart axis datetime + categories

Question

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

m1yoga · Accepted Answer · 2017-11-23T03:19:19.020

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/

highchart axis datetime + categories

1 Answers1