CODEWITHSUNDEEP
jqueryhighcharts
prospector
prospector

Reputation: 3469

Highcharts x-axis category overlap

The dates are overlapping in x-axis bar on the bottom. What is the best solution to resolve this?

If the date count is over 13, then I'm fine with having no category labels, but I at least need the dates on the point mouseover.

I've tried the formatter function, but it doesn't work, it gives me numbers and not a date range.

 xAxis: {
      categories:{
           formatter: function() {
               ['5/16/2013','7/1/2013','7/3/2013','7/2/2013','7/4/2013','7/6/2013','7/7/2013','7/8/2013','7/15/2013','5/22/2013','7/9/2013','7/10/2013','7/11/2013','7/13/2013']
           }
      }
 },

I've included a jsfiddle to show you how it looks.

http://jsfiddle.net/8eTnE/

Upvotes: 2

Views: 6363

Answers (3)

shammerw0w
shammerw0w

Reputation: 1986

Use step option to overcome the problem of overlapping of labels in xaxis

    xAxis: {
        categories:{
            formatter: function() {
                ['5/16/2013','7/1/2013','7/3/2013','7/2/2013','7/4/2013','7/6/2013','7/7/2013','7/8/2013','7/15/2013','5/22/2013','7/9/2013','7/10/2013','7/11/2013','7/13/2013']
            }
        },
        labels: {
            **step: 2**
        }
    }

Upvotes: 0

Sandip
Sandip

Reputation: 987

Here you see better output

http://jsfiddle.net/8eTnE/2/

add ,label in x axis as 

labels: {
                    rotation: -45,
                    align: 'right'

                }

increse mmarginbottom to 75 in chart as 

 marginBottom: 75

here is full code

  $(function () {

        var curdateVar = "04/01/2013";
        var dateinreq = "04/01/2013";
        var csdataArr = null;
        //var data = [0,0,0,0,0,0,0];
        var data1 = new Array(6);
        var data2 = new Array(6);


        var chart;
        $(document).ready(function () {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'containermain',
                    type: 'line',
                    backgroundColor: {
                        linearGradient: [0, 0, 250, 500],
                        stops: [
                                                                   [0, '#bbb'],
                                                                   [0.05, '#fff'],
                                                                   [1, 'white']
                        ]
                    },
                    borderColor: '#000000',
                    borderWidth: 2,
                    className: 'dark-container',
                    marginRight: 130,
                    marginBottom: 75
                },
                title: {
                    text: 'Activity Stats',
                    x: -20 //center
                },
                subtitle: {
                    text: 'Calories Burned',
                    x: -20
                },
                xAxis: {
                    categories: ['5/16/2013','7/1/2013','7/3/2013','7/2/2013','7/4/2013','7/6/2013','7/7/2013','7/8/2013','7/15/2013','5/22/2013','7/9/2013','7/10/2013','7/11/2013','7/13/2013']
                    ,labels: {
                rotation: -45,
                align: 'right'

            }
                        },
                        yAxis: {
                            title: {
                                text: 'Calories'
                            },
                            min: 0,
                            max: 2000,
                            tickInterval: 50,
                            plotLines: [{
                                value: 0,
                                width: 1,
                                color: '#808080'
                            }]
                        },
                        tooltip: {
                            formatter: function () {
                                //  return '';
                                return '<b>' + this.series.name + '</b><br/>' +
                                this.x + ': ' + this.y + 'cals';
                            }
                        },
                        legend: {
                            layout: 'vertical',
                            align: 'right',
                            verticalAlign: 'top',
                            x: -10,
                            y: 100,
                            borderWidth: 0
                        },
                        series: [{
                            name: 'Activity',
                            data: [120       ,473       ,473       ,0         ,142       ,509       ,296       ,398       ,558       ,136       ,98        ,330       ,355       ,289       ]
                        /* data: data1]*/
                    }]
                    });
                });

    });

refer more formatting from Demo

Upvotes: 2

RONE
RONE

Reputation: 5485

have modified your code, 

        tickInterval : 2,
        labels : { y : -15, rotation: -45, align: 'right' }

FIDDLE DEMO

Just check is that acceptable, you can do the same for Y axis too. just play with labels : { y : -15, rotation: -45, align: 'right' } values. you should be done.

Upvotes: 3

Related Questions