I am attempting to customize the markers on a Kendo UI Line chart. The Kendo-Angular bridge I am using can be found here.
I have set up a basic Line chart that pulls data from a JSON file. By utilizing the k-options directive, I am passing in an object with the styles I have created. Everything appears to be functioning correctly except for the series.markers API.
The chart is being created using angular directives:
<div ng-controller="MyCtrl">
<div class="demo-section k-content">
<div class="box-col" style="width: 500px;">
<h4>Hover over some series</h4>
<div kendo-chart="chart"
k-legend="{ position: 'bottom' }"
k-series-defaults="{ type: 'line' }"
k-series="[
{ field: 'id', name: 'ID' },
{ field: 'value', name: 'VALUE' }
]"
k-data-source="electricity"
k-series-hover="onSeriesHover"
k-options="chartOptions"
></div>
</div>
</div>
</div>
Initialization code:
angular.module("KendoDemos", [ "kendo.directives" ]);
function MyCtrl($scope, $interval) {
$scope.chartOptions = {
renderAs: "canvas",
transitions: false,
//Widget styling begins
categoryAxis:{
background: '#551A8B'
},
seriesColors: ["#fa7839"],
series: {
markers: {
type: "triangle",
size: 30
}
}
}
$scope.electricity = new kendo.data.DataSource({
transport: {
read: {
url: "electricity.json",
dataType: "json"
}
},
scheme: {
model: {
fields: {
Id: { type: "number" },
Value: {type: "number"}
}
}
},
change: function (data) {
$scope.chart.redraw()
console.log(data)
console.log("Changed")
}
});
// Refreshes the graph every 150ms
$interval(function(){
$scope.chart.redraw()
}, 150);
}
This implementation follows the examples provided in the API documentation. The categoryAxis and seriesColors properties are functioning properly, however, the series.markers.type and series.markers.size options do not seem to be taking effect.
What could be causing this issue?