CODEWITHSUNDEEP
javascriptjqueryhighcharts
DooDoo
DooDoo

Reputation: 13487

Highchart data labels appear in middle if xAxis ticks

Please consider this code:

plotOptions: {
    series: {
        label: {
            connectorAllowed: false
        },
        pointStart: 2010
    }
},

Demo 1

When xAxis category is numeric (years) data labels align with xAxis tick, but when I change categories and set the to some string, data labels align in the middle of xAxis ticks.

categories:["aaa", "bbb", "ccc", "ddd", "eee", "fff", "ggg", "hhh"]

Demo 2

How I can align values on exact top of the xAxis ticks?

Thanks

Upvotes: 1

Views: 197

Answers (1)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

You can use the tickmarkPlacement: 'on' (API) setting to correct this. API-description:

For categorized axes only. If on the tick mark is placed in the center of the category, if between the tick mark is placed between categories. The default is between if the tickInterval is 1, else on.

For example:

xAxis: {
    categories:["aaa", "bbb", "ccc", "ddd", "eee", "fff", "ggg", "hhh"],
    tickmarkPlacement: 'on'
}

See this JSFiddle demonstration of it in use.

Upvotes: 1

Related Questions