It is currently Thu Aug 16, 2018 6:37 am Advanced search

Polar chart - lining up the y-axis labels

Technical support, bug reports and more.

Polar chart - lining up the y-axis labels

Postby ZZ_Craig » Mon May 14, 2018 4:32 pm

Hi,

I've got a polar chart set up as shown in the attached screenshot.

However, I'm struggling to line the y-axis labels up. I'd like to have them sit in between each band, but they're all over the place at the moment (1 should appear in the middle of the lightest red on the outside and so on).

Any ideas please? I've been through the documentation but can't find anything that works.

Thanks.
Attachments
2018-05-14 15_30_33.png
2018-05-14 15_30_33.png (43.09 KiB) Viewed 113 times
ZZ_Craig
 
Posts: 6
Joined: Wed Apr 18, 2018 10:20 am

Re: Polar chart - lining up the y-axis labels

Postby daniel_s » Mon May 14, 2018 6:08 pm

hi ZZ_Craig,

Welcome on our forum and appreciate you contacting us.
It's hard to guess what exactly can cause that problem without looking on your code, so please provide me with minimal working copy (e.g JSFiddle) of your project, then I would be able to debug it faster.

Best regards!
Daniel Studencki,
Highcharts Developer
daniel_s
 
Posts: 737
Joined: Fri Sep 01, 2017 1:01 pm

Re: Polar chart - lining up the y-axis labels

Postby ZZ_Craig » Wed May 16, 2018 3:52 pm

Hi Daniel,

This is coming from the following JSON config which we load automatically:

Code: Select all
{
    "chart": {
        "type": "line",
        "polar": true
    },
    "xAxis": {
        "tickmarkPlacement": "on",
        "lineWidth": 0,
        "gridLineColor": "#575756",
        "title": {
            "style": {
                "fontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", Verdana, Arial, Helvetica, sans-serif",
                "color": "#666666",
                "fontSize": "30px",
                "fontWeight": "normal",
                "fontStyle": "normal"
            }
        }
    },
    "yAxis": {       
        "plotBands": [{
          "from": 1,
          "to": 1,
          "color": "#fdebea",
          "outerRadius": "105%",
          "thickness": "50%"
        },{
          "from": 1,
          "to": 1,
          "color": "#fdebea",
          "outerRadius": "105%",
          "thickness": "50%"
        }, {
          "from": 1,
          "to": 2,
          "color": "#f8c4c0",
          "outerRadius": "105%",
          "thickness": "50%"
        }, {
          "from": 2,
          "to": 3,
          "color": "#f39d96",
          "outerRadius": "105%",
          "thickness": "50%"
        }, {
            "from": 3,
            "to": 4,
            "color": "#ee766d",
            "outerRadius": "105%",
            "thickness": "50%"
          }, {
            "from": 4,
            "to": 5,
            "color": "#eb584d",
            "outerRadius": "105%",
            "thickness": "50%"
          }],
        "reversed": true,
        "min": 1,       
        "max": 5,
        "allowDecimals": false,
        "tickInterval": 1,
        "tickAmount": 6,
        "tickLength": 10,
        "gridLineInterpolation": "polygon",
        "gridLineColor": "",
        "lineWidth": 0,
        "tickmarkPlacement": "between",
        "tickPixelInterval": 100,
        "tickPosition": "outside",
        "labels": {
            "enabled": false,
            "format": "Level {value}",
            "y": 45
        }
    },
    "title": {
        "text": "APM Spiderweb"
    },
    "exporting": {},
    "plotOptions": {
        "series": {
            "animation": true,
            "lineWidth": 4,
            "marker": {
                "radius": 8,
                "symbol": "circle"
            },
            "_colorIndex": 0,
            "_symbolIndex": 0
        }
    },
    "data": {
        "csv": "QuestionCategoryName,FinalLevel\r\nClarify Objectives,1\r\nPropose Initiates,1\r\nPrioritise & Select,1\r\nTrack Performance,2\r\nReview Portfolio,1\r\n",
        "googleSpreadsheetKey": false,
        "googleSpreadsheetWorksheet": false
    },
    "credits": {
        "enabled": false
    },
    "colors": [
        "#7cb5ec",
        "#90ed7d",
        "#f7a35c",
        "#8085e9",
        "#f15c80",
        "#e4d354",
        "#2b908f",
        "#f45b5b",
        "#91e8e1"
    ]
}


Thank you :)
ZZ_Craig
 
Posts: 6
Joined: Wed Apr 18, 2018 10:20 am

Re: Polar chart - lining up the y-axis labels

Postby daniel_s » Thu May 17, 2018 10:13 am

hi ZZ_Craig,

I reproduced your example, and now I'm able to see the issue described above.
(1 should appear in the middle of the lightest red on the outside and so on).

I can't agree with that, because the label represents the appropriate value on the axis, not the range between two axis ticks, but in fact that, what you're talking about is called plot band's label, which you can set manually by defining it in each plot band configuration. However, in my opinion it will break the logic of the chart. Here is the proposition of how it should looks like: https://jsfiddle.net/mc8bqtmz/.

There is one thing which I can agree with, namely - the axis labels positions are certainly incorrectly calculated, because when I set the yAxis.gridLineIntetrpolation equal to 'circle' everything looks correct. Positions should be calculated in other way, when the interpolation is set to 'polygon'. I will report it, and will let you know about it.

Best regards!
Daniel Studencki,
Highcharts Developer
daniel_s
 
Posts: 737
Joined: Fri Sep 01, 2017 1:01 pm

Re: Polar chart - lining up the y-axis labels

Postby ZZ_Craig » Thu May 17, 2018 10:30 am

Hi Daniel,

Thank you for your response. The plot band labels are working fine if the chart stays the same size, but unfortunately they shift as soon as you increase/reduce the size of the chart (I have a full-screen option for this chart). Is there any fix for this?

Alternatively, is there any way I can just add the plot band labels as a legend somewhere instead?

Thank you.
ZZ_Craig
 
Posts: 6
Joined: Wed Apr 18, 2018 10:20 am

Re: Polar chart - lining up the y-axis labels

Postby daniel_s » Thu May 17, 2018 1:04 pm

hi ZZ_Craig,

You can also use a small workaround to achieve the effect that you need. FIrst you need to delete the plotBands labels defined before, then set the yAxis.labels.enabled to true (In fact, we get back to the start point). Now, you need to set the xAxis.min and xAxis.max parameters, and manually define the categories, just like that:
Code: Select all
xAxis: {
  categories: ['Clarify Objectives', 'Propose Initiates', 'Prioritise & Select', 'Track Performance', 'Review Portfolio', '']
  min: 0.5
  max: 5.5
}

As you can see there is an empty category on the last position of array. It's defined in this way, because we need to reset the index of next category which would be visible on the chart. Since we set it to an empty string, it would be hidden. However if you don't want to define it manually, always you can provide the chart with the empty category by csv.
No you just need to set the distance of xAxis.labels to avoid the overlapping of labels. I prepared the example of how to achieve it. You can find it below.

Live example: https://jsfiddle.net/gam4zjzq/

API Reference:
https://api.highcharts.com/highcharts/xAxis.categories
https://api.highcharts.com/highcharts/xAxis.labels.distance

[EDIT]
Here is the mentioned link to reported issue: https://github.com/highcharts/highcharts/issues/8350

Best regards!
Daniel Studencki,
Highcharts Developer
daniel_s
 
Posts: 737
Joined: Fri Sep 01, 2017 1:01 pm

Re: Polar chart - lining up the y-axis labels

Postby ZZ_Craig » Mon May 21, 2018 11:52 am

Hi Daniel,

Thanks again, that's almost there now! :)

Sorry to be a pain, but now that I've added a 6th category I'm seeing some issues with the padding between each label, so they're slightly off again.

https://jsfiddle.net/gam4zjzq/3/

Thanks,
Craig.
ZZ_Craig
 
Posts: 6
Joined: Wed Apr 18, 2018 10:20 am

Re: Polar chart - lining up the y-axis labels

Postby daniel_s » Mon May 21, 2018 1:32 pm

hi ZZ_Craig,

It occurs, because you didn't correctly set the xAxis.min, xAxis.max values. You need to set those values by adding 0.5 to each of them. In case of 6 categories, that should looks like that:
Code: Select all
xAxis: {
  min: 0.5,
  max: 6.5
}

Also don't forget to delete the padding from yAxis labels:
Code: Select all
"labels": {
      "enabled": true,
      "style": {
         "fontWeight": "bold"
      },
      //"y": 25
}


Live example: https://jsfiddle.net/24zrbqpL/

Best regards!
Daniel Studencki,
Highcharts Developer
daniel_s
 
Posts: 737
Joined: Fri Sep 01, 2017 1:01 pm

Re: Polar chart - lining up the y-axis labels

Postby ZZ_Craig » Tue May 22, 2018 2:57 pm

Hi Daniel,

Thank you for your continued help on this! :)

I was looking to have the polar rotated so the top and bottom are flat edges of the chart. It's not a major issue if I can't, but it would be preferable.

Thanks,
Craig.
ZZ_Craig
 
Posts: 6
Joined: Wed Apr 18, 2018 10:20 am

Re: Polar chart - lining up the y-axis labels

Postby daniel_s » Tue May 22, 2018 4:06 pm

hi Craig,

I realise that should look as is described above, but as I said before I reported it as the new GitHub issue and you need to calmly wait for fix. At this moment, the one way out of that is to configure the chart just as I mentioned before.

Best regards!
Daniel Studencki,
Highcharts Developer
daniel_s
 
Posts: 737
Joined: Fri Sep 01, 2017 1:01 pm

Re: Polar chart - lining up the y-axis labels

Postby ZZ_Craig » Tue May 22, 2018 4:17 pm

Hi Daniel,

Thank you. I hadn't seen the GitHub link in your edit. I will use the configuration you have suggested.

Thanks again for your continued help and effort on this!

Craig.
ZZ_Craig
 
Posts: 6
Joined: Wed Apr 18, 2018 10:20 am


Return to Highcharts Usage

Who is online

Users browsing this forum: Bing [Bot] and 2 guests

cron