11 Answers, 1 is accepted
I am not sure from your description where exactly you want to add the subtext. In general, if you want to add content to the Chart, which is not a part of its default elements—legend, title, series, axes, etc., you can draw it as custom content in the Chart render event.
You can see some examples of drawing custom content in the Chart here:
Render Custom Plot Bands
Draw on Scatter Plots Surface
Place Text in Donut Chart Center
The same logic can be used in the Core Chart wrapper. The only difference is in how you attach the event handler:
If you need the full data of the Chart to use in the custom UI, you can access it through the DataSource at any point. Calling chart.dataSource.view() will return the full list of data items that are bound in the Chart.
With regard to adding the text, indeed you can draw a custom Text in the Render event of the Chart like suggested in my previous post, as there is no built-in Chart element to show under the category axis. Here is a quick example:
The RadialGauge and LinearGauge widgets do not have a render event and the needed public APIs to draw on their surface. You would need to add the title as HTML element in the page.
thank for your responses. I have managed to set the text on my bar charts. Could you maybe send a demo of adding centered subtext to a gauge? I have tried it but I don't get the result I wanted.... Thanks in advance and happy holidays!
Since the Kendo UI gauges do not have a render event, you may either add an HTML element that will hold the desired text on the page or use the same approach as my colleague shared with you but referencing the surface instance private property:
There seems to be an issue with the Dojo at the moment, so I prepared this CodePen for your reference:
Hello, I've tried to implement the suggested code. Only, why won't it work? Below are the things I have tried:
Main JS code
These are the things I have tried:
The thing that isn't working:
The text won't display.
After some trying I found something weird:
This is my code:
When I add the ready I get the exact same gauge as in the codepen. When I remove the ready I get my own gauge back.
Is this a bug or...??
I found the error. Only. How can I add 2 sublabels?
If I have 2 implemented it only follows the css of the first item
Yes, the problem in the previous snippet was that the gauge was re-initialized when you tried to customize it. The new snippet does not contain this code, so I assume you also noticed it.
With regard to the current problem, I see you have declared two Layouts with the same bounding rectangle coordinates:
This means that if you add both Layouts to the gauge surface, their content will overlap. If you want to use two layouts, make sure you specify different coordinates (the highlighted code).
Currently, you add both the header and footer text to layoutHeader, so they are rendered one after the other in the same layout and layoutFooter remains empty:
If none of the above explanations helps you fix the appearance of the labels, show us how you expect them to look, as I am not sure about the exact requirement.