CODEWITHSUNDEEP
javascriptangularjschartskendo-ui
Nasco Bozhkov
Nasco Bozhkov

Reputation: 477

Kendo UI Charts - Changing marker styling

I am trying to style the markers on a Kendo UI Line chart. I am using the Kendo-Angular bridge which can be found here.

I've got a simple Line chart which loads data from a JSON file. Using the k-options directive I am passing in an object with the styles what I've created. Everything seems to work except the series.markers API

Creating the chart with the angular directives:

<div ng-controller="MyCtrl">
    <div class="demo-section k-content">
        <div class="box-col" style="width: 500px;">
            <h4>Hover 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>

Initializing it: 

angular.module("KendoDemos", [ "kendo.directives" ]);
function MyCtrl($scope, $interval) {

    $scope.chartOptions = {
        renderAs: "canvas",
        transitions: false,
        //Start widget styling
        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")
        }
    });
    // Refresh the graph every 150ms
    $interval(function(){
        $scope.chart.redraw()
        }, 150);


}

This code seems to adhere to the examples shown in the API docs. The categoryAxis and seriesColors work, but the series.markers.type and series.markers.size do not seem to have any effect. What's wrong with it?

Upvotes: 0

Views: 3776

Answers (1)

Petur Subev
Petur Subev

Reputation: 20193

Series is array option, you should specify those 'markers' option for each separate series. In your case you have specified it as an option of the series as an object (not array). First option -try to specify it explicitly inside any of the objects inside the array with series.

e.g.

k-series="[
            { field: 'id', name: 'ID',
              markers: {
                 type: 'triangle',
                 size: 30
              } 
             },
            { field: 'value', name: 'VALUE' }
          ]"

Another option to try is to put that inside the seriesDefault.

Also as explicitly noted in the documentation you have to use series type such as "area", "line", "scatter", "scatterLine", "radarLine", "radarArea", "polarLine", "polarScatter" or "polarArea" in order to have markers. By default the series is of type 'column'.

Upvotes: 1

Related Questions