Components
    • Barcodes
    • Buttons
    • Charts
    • Conversational UI
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filterupdated
    • Ganttupdated
    • Gauges
    • Gridupdated
    • Icons
    • Indicatorsupdated
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Mapbeta
    • Menus
    • Navigationupdated
    • Notification
    • Pager
    • PDF Export
    • PivotGridupdated
    • Popup
    • ProgressBarsupdated
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • ToolBar
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Typography
    • Uploads
    • Utilitiesnew
    Styling & Themes
    Common Features
    Project Setup
    Troubleshooting
New to Kendo UI for Angular? Start a free 30-day trial

XAxisComponent

A collection of one or more X-axis configuration components.

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

@Component({
 selector: 'my-app',
template: `
  <kendo-chart>
    <kendo-chart-x-axis>
      <kendo-chart-x-axis-item
        [background]="'rgba(100, 100, 100, 0.2)'"
        color="red"
        [notes]="notesConfig"
        [crosshair]="crosshairConfig">
      </kendo-chart-x-axis-item>
      <kendo-chart-x-axis-item name="secondAxis">
      </kendo-chart-x-axis-item>
    </kendo-chart-x-axis>
    <kendo-chart-series>
      <kendo-chart-series-item type="scatter" [data]="[[1, 2]]">
      </kendo-chart-series-item>
      <kendo-chart-series-item type="scatter" [data]="[[0.1, 0.2]]"
                               xAxis="secondAxis">
      </kendo-chart-series-item>
    </kendo-chart-series>
  </kendo-chart>
`
})
export class AppComponent {
public notesConfig = {
  data: [{
      value: 0.2,
      text: "foo"
    }, {
      value: 0.8,
      text: "bar"
    }],
  label: {
    content: (args: any) => args.dataItem.text,
    background: 'red',
    color: 'white'
  },
  line: {
    color: 'blue',
    dashType: 'dash',
    length: 150,
    width: 2
  },
  position: 'top'
};

public crosshairConfig = {
  color: 'green',
  opacity: 0.8,
  visible: true,
  width: 3
};
}

Selector

kendo-chart-x-axis

In this article

Not finding the help you need?