kzoon
Posts: 281
Joined: Wed Aug 10, 2011 8:22 am

Dependency wheel labels orientation

Mon Nov 18, 2019 9:32 am

Highcharts examples use textPath on Datalabels to position the data label on the dependency wheel segments. For example here: https://www.highcharts.com/demo/dependency-wheel

Is there a simple way to make the labels render at angles to the segments like here https://www.highcharts.com/demo/dependency-wheel?
If so, would the chart scale automatically to allow room for these labels?

mateuszkornecki
Posts: 1222
Joined: Mon Oct 28, 2019 10:29 am

Re: Dependency wheel labels orientation

Mon Nov 18, 2019 2:55 pm

Hello, kzoon!

Thank you for contacting us!

I'm not sure if I understood you correctly. Do you want to use textPath to achieve a similar effect to the one from our dependency-wheel demo on a different chart type? Right now you can use textPath only on dependency-wheel, networkGraph and packedBubble charts. This feature might be available on other charts in future release of the Highcharts. Could you specify more detail about the effect that you want to achieve, and about the type of chart that you want to work on?

Let me know if you have any further questions.

Best regards!
Mateusz Kornecki
Highcharts Developer

kzoon
Posts: 281
Joined: Wed Aug 10, 2011 8:22 am

Re: Dependency wheel labels orientation

Tue Nov 19, 2019 9:57 am

No, I want the dependency wheel to display the labels like this: https://www.highcharts.com/demo/dependency-wheel

Is there a simple way to do this?

mateuszkornecki
Posts: 1222
Joined: Mon Oct 28, 2019 10:29 am

Re: Dependency wheel labels orientation

Tue Nov 19, 2019 11:28 am

The simplest way to create a similar chart is to set dataLabels.textPath.enabled to true. After that you can manipulate it by using textPath.attributes, for example, you can use textPath.attributes.dy to manipulate the vertical position of the labels.
You can find more information about textPath here: https://api.highcharts.com/class-refere ... ionsObject

Have you tried to create it based on our demo chart? And if so have you come across any specific problem with textPath which I could help you with?

Let me know if you have any further questions.

Best regards!
Mateusz Kornecki
Highcharts Developer

kzoon
Posts: 281
Joined: Wed Aug 10, 2011 8:22 am

Re: Dependency wheel labels orientation

Tue Nov 19, 2019 12:56 pm

I can't event get 'rotation' to work properly: https://jsfiddle.net/kzoon/0wmtgyjr/

Even when that works. it's not what I want: each label should have a different rotation.

Is it fair to say that there is no simple way in Highchart to achieve this positioning of labels like https://www.highcharts.com/demo/dependency-wheel?

KacperMadej
Posts: 4624
Joined: Mon Sep 15, 2014 12:43 pm

Re: Dependency wheel labels orientation

Tue Nov 19, 2019 2:52 pm

This is not only a rotation change but also a slight bend - the text is following the set path that is a part of a circle.
You are saying that there is no easy way to get this positioning of labels in Highcharts by referring to a demo of Highcharts were this positioning of labels is done easily by using available API, so I don't understand what is the problem or what is the required chart you want to have.
The text on path is rather basic SVG feature. You only need to define the path and this could be tricky in a complex SVG image that is a Highcharts chart, but we have provided the code for this internally and have provided the text path option in API, so it's easy for a chart designer or a Highcharts user to set the labels like in the chart you have referenced because you just need to set some API options and it's done.

Maybe you have a link to the problematic chart you have that you could share?
Kacper Madej
Highcharts Developer

kzoon
Posts: 281
Joined: Wed Aug 10, 2011 8:22 am

Re: Dependency wheel labels orientation

Wed Nov 20, 2019 8:15 am

There are 2 reasons for my question:
1) The built-in way of displaying labels results very soon in clipped labels. For example http://jsfiddle.net/kzoon/xzd1s5e2/. In the mean-time I found this GitHub ticked that reports the same issue: https://github.com/highcharts/highcharts/issues/11115
2) I expect that some of my customers prefer the radial label style. I am trying to find out if I can provide that style when they ask for it.

My knowledge of SVG is limited, so I will have a hard time to create radial-style labels myself.

So that is the background of my question.

KacperMadej
Posts: 4624
Joined: Mon Sep 15, 2014 12:43 pm

Re: Dependency wheel labels orientation

Wed Nov 20, 2019 12:45 pm

Radial style dataLabels are not that hard to create - here's a simple demo: http://jsfiddle.net/BlackLabel/qsx37gpv/
In general, the path for the text is required and the text label that will use the path.

About the GitHub issue: if you have any comments about the issue please continue with the topic on the GitHub issue, so our developers will have all the relevant info in one place and will be able to reply to you directly.

It is possible to adjust the text following path using attributes of the textPath - in the Highcharts API the supported options will allow to e.g. start the text aligned to one side, so if there is not enough space for the full text then at least the beginning of it will be visible.
Demo: http://jsfiddle.net/BlackLabel/qd264g17/
Revelant code:

Code: Select all

         attributes: {
          dy: 5,
          startOffset: '0%',
          textAnchor: 'start'
        }
Best Regards,
Kacper Madej
Highcharts Developer

jbbpatel94
Posts: 1
Joined: Fri Nov 08, 2019 7:02 am

Re: Dependency wheel labels orientation

Tue Dec 03, 2019 8:02 am

i want labels orientation like below attached image
Attachments
Screenshot 2019-12-03 at 1.26.25 PM.png
Screenshot 2019-12-03 at 1.26.25 PM.png (85.35 KiB) Viewed 1521 times

rafalS
Posts: 2657
Joined: Thu Jun 14, 2018 11:40 am

Re: Dependency wheel labels orientation

Wed Dec 04, 2019 9:17 am

Hi,

Welcome to our forum. For this moment, it is not implemented in Highcharts. You can request for this feature on our UserVoice channel here: https://highcharts.uservoice.com

Best regards!
Rafal Sebestjanski,
Highcharts Developer

Return to “Highcharts Usage”