All Components

Line

Line Charts and Vertical Line Charts are categorical charts which display continuous data as lines that pass through points defined by the values of their items.

They are useful for rendering trends at equal intervals or over time and comparing sets of similar data.

Vertical Line Charts are functionally equivalent to Line Charts, but transpose the axes—the category axis is vertical and the value axis is horizontal.

Basic Usage

The following example demonstrates the Line Chart in action.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-title text="Units sold"></kendo-chart-title>
      <kendo-chart-category-axis>
          <kendo-chart-category-axis-item
              [categories]="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']"
              [title]="{ text: 'Months' }">
          </kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
      <kendo-chart-series>
        <kendo-chart-series-item type="line" [data]="[123, 276, 310, 212, 240, 156, 98]">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="line" [data]="[165, 210, 287, 144, 190, 167, 212]">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="line" [data]="[56, 140, 195, 46, 123, 78, 95]">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
export class AppComponent { }

The following example demonstrates the Vertical Line Chart in action.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-category-axis>
          <kendo-chart-category-axis-item
              [categories]="['Jan', 'Feb', 'Mar', 'Apr']">
          </kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
      <kendo-chart-series>
        <kendo-chart-series-item type="verticalLine" [data]="[ 1, 2, 3, 5 ]">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="verticalLine" [data]="[ -1, -2, -3, -5 ]">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
export class AppComponent { }

Selecting Line over Scatter Charts

Line Charts and Scatter Line Charts look visually the same because the data points in the plot area are connected with lines. However, they differ significantly in the way each series type plots the data it presents in the plot area.

In Line Charts, the vertical axis is a value axis and the horizontal axis is a category axis. This means that the category axis displays groupings of data and not numerical values. That is why the data points the Line Charts display are distributed as evenly-spaced coordinates.

The fundamental differences between the two series types make each a more suitable solution in particular scenarios. Line Charts need to be used when your project requires you to:

  • Use text labels along the horizontal axis.
  • Use a few numerical labels along the horizontal axis.
  • Use time scales along the horizontal axis.
In this article