RuneS
Posts: 6
Joined: Tue Nov 28, 2017 3:24 pm

xAxis labels not showing proper values

Wed Nov 29, 2017 9:12 am

Hi

I'm new to Higcharts Cloud, and I have a few difficulties getting started. I have a column chart with percentages on the yAxis and category-style variables on the xAxis. As a default, Highcharts Cloud correctly shows the values as xAxis labels. However, when changing the yAxis format by adding " %" at the end, the xAxis labels suddenly changes to index numbers instead of text values. If I change the yAxis label format through custom code instead of point and click, I can change the yAxis label format without affecting the xAxis label format. I then get the chart to look the way I want it to in Highcharts Cloud (https://cloud.highcharts.com/show/Bkwn5ZjgM).

However, when inserting the inject code into our cms-system (Episerver), the xAxis labels is again replaced by index numers. I tried exporting the code to JSFiddle (https://jsfiddle.net/RuneS/6khjv78n/) and don't get the proper labels to show there either. I can change the format of the labels in the sense that I can, say, add something to the end. So I guess thes syntax is not all wrong, but that I need to figure out why values are not retrieved?

daniel_s
Posts: 737
Joined: Fri Sep 01, 2017 11:01 am

Re: xAxis labels not showing proper values

Mon Dec 04, 2017 9:58 am

hi RuneS,

Values of xAxis aren't displayed in the way you expect, because you didn't define xAxis type of your chart, so its returned values are just index numbers by default. You've to specify your xAxis.type equal to 'category', and it should solve your problem. Take a look at code below:

Code: Select all

"xAxis": [{
    "type": "category",
    "labels": {
        "format": "{value}"
     }
}]
Live example: https://jsfiddle.net/c75p9h36/

API Reference: https://api.highcharts.com/highcharts/xAxis.type

Best regards!
Daniel Studencki,
Highcharts Developer

RuneS
Posts: 6
Joined: Tue Nov 28, 2017 3:24 pm

Re: xAxis labels not showing proper values

Wed Dec 06, 2017 10:06 am

Great, that solved it. Thanks a lot:-)

Return to “Highcharts Cloud”