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:

  • rect—The geometry Rect that defines where the visual has to be rendered.
  • options—The marker options.
  • createVisual—A function that can be used to get the default visual.
  • category—The category of the marker point.
  • dataItem—The dataItem of the marker point.
  • value—The value of the marker point.
  • sender—The Chart instance.
  • series—The 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.