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,
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.
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
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.