Highchart x-Axis labels shows double dates

2019-07-18 06:42发布

问题:

I am using highcharts in my projects and it shows me date twice in the x-axis, How can I remove it and get only 1 Date in the x-axis.

Here is the snapshot of how it looks like right now

How can I get rid of the double date display.

EDIT: Adding the options for the chart

These are the options I am using

chart: {
            renderTo: divId,
            type: 'column'
        },
        title: {
            text: chartTitle
        },
        tooltip: {
            shared: true
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black, 0 0 3px black'
                    }
                }
            }
        },
        xAxis: {
            type: 'datetime',

            labels: {
                format: '{value:%Y-%m-%d}',

                rotation: 45,
                align: 'left'
            },

            title: {
                text: 'Date'
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            },
            max: 1440,
            stackLabels: {
                enabled: false

            }
        },
        legend: { 
                  backgroundColor: 'rgba(211,223,181,0.6)', 
                  layout: 'vertical', 
                  align: 'left', verticalAlign: 'top', 
                  floating: true, 
                  borderWidth: 0, x: 70 
         }

回答1:

This usually happens when you have multiple dates or multiple ticks within the same day/week/month etc, and the formatter is set to return only the day/week/month etc. Try specifying a tickInterval value and the dateTimeLabelFormats object in your x-axis options:

  xAxis: {
        type: 'datetime',
        tickInterval: 3600*1000,
        dateTimeLabelFormats: {
            second: '%Y-%m-%d<br/>%H:%M:%S',
            minute: '%Y-%m-%d<br/>%H:%M',
            hour: '%Y-%m-%d<br/>%H:%M',
            day: '%Y-%m-%d',
            week: '%Y-%m-%d',
            month: '%Y-%m',
            year: '%Y'
        },
        labels: {
            /*formatter: function() {
                console.log(this);                    
            },*/
            rotation: 45,
            align: 'left'                
        },
        title: {
            text: 'Date'
        }
    }

Bear in mind that if you are telling the chart to return the day on the x axis, and your tickInterval is hourly, all of the ticks within that day are going to have identical labels.