CODEWITHSUNDEEP
javascriptsvghighcharts
Hiero
Hiero

Reputation: 2205

Highcharts/stock xAxis display only year

I'm building some charts with highstocks.

My data looks like:

[1133308800, 1.95492806759836],
[1135987200, 2.01739233585526],
[1138665600, 2.0725059567737],
[1141084800, 1.89533596472326],

And my xAxis settings:

            xAxis: {

                labels: {
                    style: {
                        textTransform: 'uppercase',
                        color: '#a7b9c7',
                        fontFamily: 'Helvetica Neue, Helvetica',
                        fontSize: '11px'
                    }
                },
                lineWidth: 0,
                minorGridLineWidth: 0,
                lineColor: 'transparent',
                minorTickLength: 0,
                tickLength: 0,
                plotLines: [{
                    color: '#3b3c40',
                    dashStyle: 'dot',
                    value: .5,
                    width: 1
                }]
            },

The problem is that the labels on xAxis are like 14. Jan etc. I want to be just the year from my data.

    $.getJSON(name + '.json', function(data) {

        seriesOptions[i] = {
            name: name,
            data: data,
            color: colors[i]
        };

        seriesCounter += 1;

        if (seriesCounter === names.length) {
            createChart();
        }
    });

Can someone explain me how to display only the year on the xAxis?

enter image description here

Upvotes: 1

Views: 62

Answers (1)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

You can configure datetime labels by dateTimeLabelFormats

{
    millisecond: '%H:%M:%S.%L',
    second: '%H:%M:%S',
    minute: '%H:%M',
    hour: '%H:%M',
    day: '%e. %b',
    week: '%e. %b',
    month: '%b \'%y',
    year: '%Y'
}

Upvotes: 1

Related Questions