Modifying Kendo UI chart markers using Angular

Question

I need to change the styling (background & size) of a Kendo UI line chart markers dynamically using Angular. I know this is possible with a function like this:

markers: {
      background:function(e) {
        return 'blue';
      }

This works great when I use it on my controller, or anywhere else outside the html file after

$("#chart").kendoChart(...);

I am working with Angular, so the series options is inside my html tag with k-serias directive. When I try to add a function there I get an error.

Error: [$parse:lexerr] Lexer Error: Unexpected next character  at columns 237-237 [#] in expression [[

Here is the directive I put:

k-series="[{
                type: 'line',
                field: 'score',
                markers: {
                    type: 'square',
                    background: function(e) { return #ffffff; }
                }
          }]"

All I want to do is to set a function for both background and size attributes inside the k-serias directive.

Thanks!

Answer 1

You can bind the directive k-series to your angular $scope.series.

In the HTML file: k-series="series"

In JS file

$scope.series = [{
   type: 'line',
   field: 'score',
   markers: {
       type: 'square',
       background: function(e) { return "#ffffff"; }
   }
}];