CODEWITHSUNDEEP
datetimehighchartslabel
Miro
Miro

Reputation: 5337

highcharts xaxis datetime label with minor tick

I'm trying to do a Highcharts chart using the datetime x-axis label to have my main labels at 1 month intervals. I would then like to use a minorTick on the week intervals. My data is 1 point per day. The problem I'm facing is my minorTicks are appearing as grid lines on the chart instead of as sub-ticks. I'd like them to be outside, or at least very small. How can I actually have these minor ticks as ticks, and not grid lines? I otherwise do not want any grid lines at all.

enter image description here

http://jsfiddle.net/590ktt7j/

$('#container').highcharts({

    yAxis: {
        gridLineWidth:0  
    },
    xAxis: {
        minorTickInterval: 7 * 24 * 3600 * 1000,
        minorTickPosition:'outside',
        minorTickLength:10,

        type:'datetime',
        min: Date.UTC(2014, 0, 1),
        max: Date.UTC(2014, 11, 31),
        labels: {
            step: 1,
        },
        dateTimeLabelFormats: {
            month: '%b',
            year: '%Y'
        }
    },

    // sample data, in reality goes 365 days of year
    series: [{
        data: [[1388984399000,100], [1388973600000,200],[1389060000000,300],[1389146400000,400],[1389232800000,500],[1389319200000,400],[1389405600000,200]]
    }]

});

Upvotes: 1

Views: 3501

Answers (1)

Mark
Mark

Reputation: 108567

The grid lines are independent of the ticks. Add these 2 options to your xAxis config:

xAxis: {
    minorTickWidth: 1, // this is by default 0 and is why you don't see ticks
    minorGridLineWidth: 0, // this disables the grid lines

Fixed fiddle.

Upvotes: 2

Related Questions