9

I have the following highchart output: enter image description here

I just want to see the Feb-10 instead of Feb-10 18:00 in x-axis label. So all the xaxis label will be like Feb-10, Feb-12, and so on. But The tooltip will be the same as the output screen. How can I format the xaxis so that I will get Feb-10, Feb-12, and so on instead of Feb-10 18:00, Feb-12 20:00, and so on.

$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'xy',
            spacingRight: 20
        },
        credits: {
            enabled: false
        },
        title: {
            text: ''
        },
        xAxis: {
            type: 'datetime',
            labels: {
                overflow: 'justify'
            },
            startOnTick: true,
            showFirstLabel: true,
            endOnTick: true,
            showLastLabel: true,
            categories: dateAndTimeArray,
            tickInterval: 10,
            labels: {
                rotation: 0.1,
                align: 'left',
                step: 10,
                enabled: true
            },
            style: {
                fontSize: '8px'
            }
        },
        yAxis: {
            title: {
                text: 'Measurement value'
            }
        },
        tooltip: {
            xDateFormat: '%Y-%m-%d %H:%M',
            shared: true
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            area: {
                fillColor: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: [
                        [0, Highcharts.getOptions().colors[0]],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                    ]
                },
                lineWidth: 1,
                marker: {
                    enabled: false
                },
                shadow: false,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                //  threshold: null
            }
        },
        series: [{
            type: 'line',
            name: 'Value',
            data: chartData,
            marker: {
                enabled: false
            }
        }]
    });
});
wergeld
  • 14,332
  • 8
  • 51
  • 81
Novis
  • 630
  • 4
  • 13
  • 28
  • What do your `dateAndTimeArray` and `chartData` arrays look like? If you could make a fiddle out of your code, that would help tremendously – Blundering Philosopher Feb 17 '14 at 22:48
  • dateAndTimeArray contains all the date and time in the format of Feb-10 18:00, Feb-12 20:00, and so on. chartData is another array that contains numeric values. For example, dateAndTimeArray = [Feb-10 18:00, Feb-10 20:00, Feb-10 22:00, ...., Feb-12 20:00], and chartData = [93.12, 94.18, 98.72,...., 91.24]. I got the dateAndTimeArray and chartData using ui:repeat and that is a jsf code. – Novis Feb 18 '14 at 00:55
  • see the fiddle: http://jsfiddle.net/tn6Kw/8/ – Novis Feb 18 '14 at 01:02
  • @Novis xAxis is ploting only first element of array – brk Dec 01 '15 at 12:14

1 Answers1

27

Cool, try this:

Add this formatter to your xAxis labels object:

xAxis {
    ...
    labels: {
        ...
        formatter: function() {
            return this.value.toString().substring(0, 6);
        },
    }
}

Link: http://jsfiddle.net/tn6Kw/9/

Blundering Philosopher
  • 6,245
  • 2
  • 43
  • 59