kendo jquery chart style specific text in labels template

6 posts, 0 answers
  1. David
    David avatar
    3 posts
    Member since:
    Oct 2016

    Posted 08 Jun Link to this post

    In the template I want the 30 to be bold and blue. And the rest of template text not blue or bold.

    labels: {
                    visible: true,
                    margin: {
                        left: 55
                    },
                    color: "#1246BB",
                    format: "{0}",
                    template: "#= value # \n <b>30</b>"
                },
  2. Stefan
    Admin
    Stefan avatar
    1886 posts

    Posted 11 Jun Link to this post

    Hello, David,

    Thank you for the details.

    This could be achieved using the function for the labels color and the font as currently, placing HTML tag inside the template is not supported.

    More details and an example can be found here:

    https://stackoverflow.com/questions/35124802/kendo-chart-template-with-label-show-html-tag-inside

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. David
    David avatar
    3 posts
    Member since:
    Oct 2016

    Posted 11 Jun in reply to Stefan Link to this post

    However the return value of the function would modify the whole template. i should be more clear. I want only parts of the template to be styled, specifically what is between the <b> tags. everything else I want to receive no styling
  4. Stefan
    Admin
    Stefan avatar
    1886 posts

    Posted 12 Jun Link to this post

    Hello, David,

    Thank you for the clarification.

    This could require using a custom visual function to be used:

    https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/categoryaxis.labels#categoryAxis.labels.visual

    The text can be split and then based on the value to set a specific color to the element:

    https://dojo.telerik.com/OZUpiZOT

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. David
    David avatar
    3 posts
    Member since:
    Oct 2016

    Posted 13 Jun in reply to Stefan Link to this post

    However this would change font for all text in the template. I need something that will only bold a specific part 

    It seems like the tool tip's template can support html tags. https://dojo.telerik.com/oWadIRoh

    The tool tip uses <b> tags. I pretty much want to bold a specific text in the template. 

  6. Stefan
    Admin
    Stefan avatar
    1886 posts

    Posted 14 Jun Link to this post

    Hello, David,

    The category and value axis do not support HTML templates. They did support it before but due to security reasons, the support was removed.

    Also, the previously suggested approach with labels.visual is using the Text drawing element which can accept font properties to achieve the bold effect:

    https://docs.telerik.com/kendo-ui/api/javascript/drawing/text/configuration/font

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top