CODEWITHSUNDEEP
javascripthighcharts
Sanjay Kanani
Sanjay Kanani

Reputation: 308

Highstock chart x-axis label overlap issue

I am getting issue in Highcharts stockChart date type chart.

Its overlapping x-axis label at the end.

Highcharts.stockChart('container', {
    chart: {
        alignTicks: false
    },

    rangeSelector: {
        selected: 1
    },

    title: {
        text: 'AAPL Stock Volume'
    },
    yAxis: {
        offset: 0,
        opposite: false
    },
    series: [{
        type: 'column',
        name: 'AAPL Stock Volume',
        data: [[992908800000,3],[993427200000,1],[993513600000,1],[993600000000,4],
                [994291200000,1],[994636800000,2],[994723200000,1],[995328000000,4],
                [995500800000,1],[995587200000,1],[995846400000,1],[996019200000,3],
                [996796800000,2],[996883200000,1],[997660800000,2],[997747200000,6],
                [997920000000,1],[998611200000,1],[999043200000,3],[999648000000,1],
                [999734400000,2],[999820800000,1],[1000080000000,2],[1000252800000,1],
                [1001376000000,2],[1001548800000,1]],
        dataGrouping: {
            units: [[
                'week', // unit name
                [1] // allowed multiples
            ], [
                'month',
                [1, 2, 3, 4, 6]
            ]]
        }
    }]
});

Here is the link: http://jsfiddle.net/o04fh8kq/1/

After load change, zoom button you will get overlapped label.

Upvotes: 1

Views: 1027

Answers (1)

Sanjay Kanani
Sanjay Kanani

Reputation: 308

We can skip one label after one to reduce label count on x-axis. set "Step" value as how many label should be skip in consecutive occurrence.
i.e: If step =2 then it will skip one label after from 2.

   xAxis: {
               type: 'datetime',
               tickInterval: {_tickInterval},
               labels: {
                         step:2
                       }
             }

Upvotes: 1

Related Questions