CODEWITHSUNDEEP
highcharts
Linoy
Linoy

Reputation: 1395

How to increase the tickLength of specific x ticks in highcharts

___________________________xAxis
| 10 ' 20 ' 30 | 40 ' 50 ' 60 | 70

As shown above, I would like to increase the tickLength of the x-axis at the start of 10 ,40 and 70.

I found the tickLength property of Xaxis, which can have a numeric value but it updates the length to all of the ticks along the axis.

Is there way to accomplish my goal?

Upvotes: 2

Views: 713

Answers (1)

Kacper Madej
Kacper Madej

Reputation: 7886

You can add additional x axis that will be linked to the main one and will have longer selected ticks. In example below, ticks are placed using tickPositions, but you can use tickPositioner if positions of longer ticks need to be calculated first.

JSFiddle: http://jsfiddle.net/qL550pmh/1/

/* Expect to increse the tick length infront of 2013, 2014 & 2015 */

//  |2013 |   |   |    | 2014 |    |    |    |2015
//  |                  |                     |

$(function () {

    var currentYear = '';
    var isMonthCombined = false;

    $('#container').highcharts({
        credits: {
            enabled: false
        },
        chart: {
            type: 'spline',
            style: {
                fontFamily: '"Open Sans", "Helvetica Neue", Helvetica, Arial',
                fontSize: 14
            },
            marginLeft: 78
        },
        title: {
            text: null
        },
        legend: {
            x: 40
        },
        xAxis: [{
            linkedTo: 1,
            categories: [],
            tickLength: 25,
            labels: {
                format: ' '
            },
            tickPositions: [3, 7]
        }, {
            gridLineColor: '#e0e0e0',
            gridLineWidth: 1,
            lineColor: '#e0e0e0',
            tickColor: '#e0e0e0',
            categories: ["Jan 2013 - Mar 2013",
                "Apr 2013 - Jun 2013",
                "Jul 2013 - Sep 2013",
                "Oct 2013 - Dec 2013",
                "Jan 2014 - Mar 2014",
                "Apr 2014 - Jun 2014",
                "Jul 2014 - Sep 2014",
                "Oct 2014 - Dec 2014",
                "Jan 2015"],
            labels: {
                formatter: function () {

                    var year = this.value.slice(-4);
                    if (currentYear != year) {
                        currentYear = year;
                        return currentYear;
                    }
                    return '';
                }
            }
        }],
        yAxis: {
            gridLineColor: '#e0e0e0',
            gridLineWidth: 1,
            lineColor: '#e0e0e0',
            title: {
                text: 'Views'
            },
            min: 0
        },
        plotOptions: {
            series: {
                allowPointSelect: true
            }
        },
        series: [{
            xAxis: 1,
            name: 'Views and Downloads',
            lineWidth: 6,
            color: '#f29400',
            marker: {
                symbol: 'circle',
                fillColor: '#FFFFFF',
                radius: 7,
                lineWidth: 5,
                lineColor: null
            },
            data: [21410,
            9413,
            3982,
            1000,
            0,
            5,
            176,
            104,
            3]
        }]
    });
});

Upvotes: 2

Related Questions