How to use a custom icon for Notes in charts

[Steve]

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;
    };

 

 

[T. Tsonev]

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

 

 

[Steve]

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

cheers,

Steve