New to Kendo UI for Angular? Start a free 30-day trial

SeriesMarkersComponent

The configuration of the Chart series marker.

import { Component } from '@angular/core';

@Component({
      selector: 'my-app',
  template: `
      <kendo-chart [categoryAxis]="{ categories: categories }">
          <kendo-chart-title text="Gross domestic product growth /GDP annual %/"></kendo-chart-title>
          <kendo-chart-legend position="bottom" orientation="horizontal"></kendo-chart-legend>
          <kendo-chart-tooltip format="{0}%"></kendo-chart-tooltip>
          <kendo-chart-series>
              <kendo-chart-series-item *ngFor="let item of series"
                  type="line"
                  style="smooth"
                  [data]="item.data"
                  [name]="item.name"
                  [markers]="item.markers">
              </kendo-chart-series-item>
          </kendo-chart-series>
      </kendo-chart>
  `
})
export class AppComponent {
public series: any[] = [{
  name: "India",
  data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855],
  markers: {
    background: 'red',
    size: 20,
    type: 'circle'
  }
}, {
  name: "Russian Federation",
  data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3],
  markers: {
    background: 'yellow',
    size: 10,
    type: 'square',
    rotation: 45
  }
}, {
  name: "Germany",
  data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995],
  markers: {
    background: 'green',
    size: 20,
    type: 'triangle'
  }
},{
  name: "World",
  data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727],
  markers: {
    background: 'blue',
    size: 10,
    type: 'cross'
  }
}];
public categories: number[] = [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011];
}

Selector

kendo-chart-series-item-markers

Inputs

background

string

The background color of the series markers.

border

Border

The border of the markers.

from

SeriesMarkers

The Chart series marker configuration for the from point. Supported for the RangeArea and VerticalRangeArea series.

rotation

number

The rotation angle of the markers.

size

number

The marker size in pixels.

to

SeriesMarkers

The Chart series marker configuration for the to point. Supported for the RangeArea and VerticalRangeArea series.

type

MarkerType

The shape of the series markers.

The supported values are:

  • "circle"The marker shape is a circle.
  • "square"The marker shape is a square.
  • "triangle"The marker shape is a triangle.
  • "cross"The marker shape is a cross.

visible

boolean

If set to true, the Chart displays the series markers. By default, the Chart series markers are displayed.

visual

(e: MarkersVisualArgs) => Element

A function for creating a custom visual for the markers.

The available argument fields are:

  • rectThe geometry Rect that defines where the visual has to be rendered.
  • optionsThe marker options.
  • createVisualA function that can be used to get the default visual.
  • categoryThe category of the marker point.
  • dataItemThe dataItem of the marker point.
  • valueThe value of the marker point.
  • senderThe Chart instance.
  • seriesThe series of the marker point.

Methods

notifyChanges

Updates the component fields with the specified values and refreshes the Chart.

Use this method when the configuration values cannot be set through the template.

item.notifyChanges({ visible: true });

Parameters

changes

any

An object containing the updated input fields.