Dynamic xAxis Highcharts

Question

I have a char and I want to display some text on the xAxis Categories, I'll create xAxis array dynamically, every label must be with a tickInterval of 5, I can do this with numbers but I don't know how to do it with text, here if my chart:

$(document).ready(function () {
  $('#xd').click(function () {
    draw();
  });
});

function draw() {
  var myArray = [];
  myArray = [1, 5, 10, 11, 8, 6, 7 ,8 ,9, 10];
  var dates = [];
  dates = ["11/Nov/16", "11/Dic/16"];
  
  $('#grafic').highcharts({
        
        title: {
            text: 'Sampled Parts'
        },
        xAxis: {
          tickInterval:5,
            categories: dates,
            labels: {
                rotation: -33,
            },
          
        },
        yAxis: {
            allowDecimals: true,
            min: 0,
            title: {
                text: 'Resultados'
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    'Total: ' + this.point.stackTotal;
            }
        },

        legend: {
            reversed: true
        },
        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'My Data',
            data: myArray
        }]
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>



<div id="grafic">
</div>

<button id="xd">Click</button>

In other words I want to display 11/Dic/16 instead of 5 how can I do that?

PD. This should work if then I add another 5 values to myArray and another date to dates.

morganfree morganfree · Accepted Answer · 2016-11-18T12:53:31

Your second category name has value 1, so it would appear under the second tick. If you want to use categories, then you have to fill it with some values.

dates = ["11/Nov/16", '', '', '', '', "11/Dic/16"];

example: https://jsfiddle.net/ty7qs88y/

I think a better way is not using categories array, but a linear axis and in the label formatter invoke the dates array directly.

 xAxis: {
      tickInterval:5,
        type: 'linear',

        labels: {
            rotation: -33,
            formatter: function () {
                return dates[this.value / 5];
            }
        },

    },

example: https://jsfiddle.net/ty7qs88y/1/

If you use datetime values - you can always use datetime axis and then just format how it is displayed. See API Docs

Dynamic xAxis Highcharts

1 Answers