I have a candlestick chart with a categorical x-axis. The labels for this access are long and I would like the text to wrap to multiple lines. Right now, the charts display what is can and then ellipses for the rest of the text. This does not word when several of the categories begin with the same word.
Hello, And welcome to the community!
I suggest you to take a look at the following resource, where it is described how to Create Multi-Line Chart Labels: http://help.infragistics.com/Help/Doc/ASPNET/2014.2/CLR4.0/html/WinChart_Create_Multi-Line_Chart_Labels.html
Additionally, if this is not a good enough option for you there is another alternative. As you are currently using most of available conventional options to work with long labels, in order to minimize the long labels it is also possible to use a tooltip to be shown and containing all the data for each label item. A similar approach is suggested and implemented here OR here. Please let me know if this is an option for you.
I am using the ignite UI Jquery controls, so everything is in JavaScript. I did attempt to insert line breaks, but the chart ignores the character. I have tried "\n", "\r\n", "\n\r" and "\r". All characters are ignored.
Hello,
It is not possible to do this with the existing API. However, it is possible to not using the inbuilt labeling and apply own labeling using custom markerTemplate. If you are interested in doing this manually, you could refer to the following forum thread, where chart .zip sample illustrating this is included in Maya’s response.
http://ko.infragistics.com/community/forums/t/87223.aspx
I can get the entire label to display after increasing the labelExtend. A few of the labels are long and would require me to increase the labelExtend to a large number. Basically, half of the charting area would be taken up by labels. This is why I am looking to wrap the text to multiple lines. This would compress the text to a small area while maintaining the complete label. Is rendering of the label in a multiple-line format possible?
Thanks!
Hello Chad,
Thank you for the code attachment.
Apart from using wrapText function, I had no trouble setting labelExtend: 180, which seems enough for the labels to fit. However, because of the labelAngle used, the first one is trimmed at the beginning (not visible in the canvas). This is why I suggest using labelAngle: -90, for example, in order to align the text vertically. When the labels are too long and the candles are close enough, it really makes sense to use vertical labels, when the requirement is to visualize the whole label.
In case you would prefer to stick with the -45 degrees labelAngle, I suggest adding labelExtend for the Y-axis as well, so the first X-axis label is formatted well and visible. I have used labelExtend: 100 and it seems the min required with this length of labels.
Other Options: Of course the labels interval could be increased, so not all labels are visible and yet I don’t believe it could be considered user friendly in most cases. If the data is however predictable and the user could easily recognize what the candles are for (opened/closed values etc.), setting different than interval: 1, is an option.
I am attaching the modified sample for reference.
Hi Ivaylo,
I did try adjusting the labelExtend property with no luck. I have attached some sample code where I would like the label to wrap to multiple lines. In the code, I am using formatLabel to add line breaks to the content.
Thanks
Chad
Excuse me for the misunderstanding. Could you actually share the code from your current approach? It will help narrow this issue more easily. In general it is possible to use some of the existing API options in order to further format the labels. For example, you could skip some of the labels, if the area for display these is not sufficient like setting an interval:http://help.infragistics.com/jQuery/2014.2/ui.igDataChart#options:axes.interval - labelAngle - Specifies the angle that labels on the axis should be rotated. - labelExtend - Specifies the extent of the area dedicated to the labels for this axis. If unspecified, this value is auto-calculated. It is also possible to format the label in order to display each label with different/distinguishable beginning using some custom logic and formatLabel option. Additionally, the default css used for styling the igDataChart could be found at: http://help.infragistics.com/jQuery/2014.2/ui.igDataChart#theming .It includes the styles used for the labels as well.