How to use a custom icon for Notes in charts

3 posts, 1 answers
  1. Steve
    Steve avatar
    4 posts
    Member since:
    Sep 2015

    Posted 19 May Link to this post

    Is there a way to use a custom icon (preferably from an icon font like Awseome Fonts) for the notes on a chart ?

     

    Below the generic code we use for creating a note, so we would want to change the icon type to be a custom shape/icon/svg instead of one of the four predefined options of "square", "cross", ...

    If that is not an option at all, any other way of how this can be achieved ? E.g. I've seen markers on maps can be customized for example.

    Attached an example of how the notes currently look in the chart, having such a limited set of icon shapes does not really work for our use case.

    var newNote = function (value, type, text, date, background) {
            var note = {
                value: value,
                color: '#606060',
                label: {
                    text: text + ': ' + date,
                    visible: false
                },
                icon: {
                    type: type
                }
            };
            if (background) {
                note.icon.background = background;
            }
            return note;
        };

     

     

  2. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2771 posts

    Posted 23 May Link to this post

    Hello,


    In your case you might be able to render the Font Awesome symbols directly in place (or as part of) the label template. See this snippet.

    We allow overriding the rendering of the series notes using the Drawing API. See the reference on notes.visual.

    I hope this helps.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Steve
    Steve avatar
    4 posts
    Member since:
    Sep 2015

    Posted 31 May in reply to T. Tsonev Link to this post

    Thank you! The dojo snippet helped a lot in understanding how to use a font library to set a custom icon.

    cheers,

    Steve

Back to Top