How to use a custom icon for Notes in charts

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

    Posted 19 May 2016 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
    T. Tsonev avatar
    2791 posts

    Posted 23 May 2016 Link to this post


    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.

    T. Tsonev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Steve
    Steve avatar
    8 posts
    Member since:
    Sep 2015

    Posted 31 May 2016 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.



Back to Top