# Series

The data series are the main components of the Chart.

The rest of the Chart elements play a supportive role for the user when understanding the plotted series.

## Series Types

The Chart supports various series types, each designed to visualize data in a specific way. Depending on your data and the insights you want to convey, you can choose from the following series types:

<Row>
    <Column count={12}>
        <Component>
            <ComponentTitle>Categorical</ComponentTitle>
        </Component>
    </Column>
</Row>
<Row>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/charts/series-types/area">
      <div>
        <ComponentImage src="/kendo-angular-ui-develop/components/assets/f9d4c076a2b1b3c2e6b025d3b76012dd/area.svg" alt="Angular Area Chart" />
      </div>
      <ComponentTitle>Area</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Area charts and Vertical Area charts are categorical charts, which are suitable for displaying quantitative data by using continuous lines.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/charts/series-types/bar">
      <div>
        <ComponentImage src="/kendo-angular-ui-develop/components/assets/58e37d6694f3ba8c938a20700f08f069/bar.svg" alt="Angular Bar Chart" />
      </div>
      <ComponentTitle>Bar</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Bar charts and Column charts are categorical charts, which display data by using horizontal or vertical bars whose lengths vary according to their value.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/charts/series-types/box-plot">
      <div>
        <ComponentImage src="/kendo-angular-ui-develop/components/assets/a4e2fe49919416957fb6dc9d06fd25c1/box-plot.svg" alt="Angular Box Plot Chart" />
      </div>
      <ComponentTitle>Box Plot</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Box Plot charts are categorical charts, which graphically render groups of numerical data through their quartiles.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/charts/series-types/bullet">
      <div>
        <ComponentImage src="/kendo-angular-ui-develop/components/assets/8cc42e2c745c49867dd683ca6f81c990/bullet.svg" alt="Kendo UI for Angular Bullet 1" />
        <ComponentImage src="/kendo-angular-ui-develop/components/assets/d745d045f593648cce0ac15fb0188503/bullet2.svg" alt="Kendo UI for Angular Bullet 2" />
        <ComponentImage src="/kendo-angular-ui-develop/components/assets/b6394c87a84d4a2f1c4b3bbe9d2f972b/bullet3.svg" alt="Kendo UI for Angular Bullet 3" />
      </div>
      <ComponentTitle>Bullet</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Bullet charts are categorical charts, which are a variation of the Bar charts.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/charts/series-types/heatmap">
      <div>
        <ComponentImage src="/kendo-angular-ui-develop/components/assets/636e60fda5c3601c82dbde3d5259f0dd/heatmap.svg" alt="Angular Heatmap Chart" />
      </div>
      <ComponentTitle>Heatmap</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Heatmap charts use colors to indicate the relative value of data points in two dimensions.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/charts/series-types/line">
      <div>
        <ComponentImage src="/kendo-angular-ui-develop/components/assets/279b254644331791b7fea9b331391107/line.svg" alt="Angular Line Chart" />
      </div>
      <ComponentTitle>Line</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>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.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/charts/series-types/radar">
      <div>
        <ComponentImage src="/kendo-angular-ui-develop/components/assets/d4f0109750e83a430a7ac933b648cf37/radar.svg" alt="Angular Radar Chart" />
      </div>
      <ComponentTitle>Radar</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Radar charts, also known as Spider charts, are categorical charts, which wrap the X axis in a circle or polygon.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/charts/series-types/range-area">
      <div>
        <ComponentImage src="/kendo-angular-ui-develop/components/assets/2e7ec6e6b880ac683c67005fc021f6a7/range-area.svg" alt="Angular Range Area Chart" />
      </div>
      <ComponentTitle>Range Area</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Range Area charts are categorical charts, which represent a variation of the Area charts.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/charts/series-types/range-bar">
      <div>
        <ComponentImage src="/kendo-angular-ui-develop/components/assets/7372ebe05092941178dcd28eae43241f/range-bar.svg" alt="Angular Range Bar Chart" />
      </div>
      <ComponentTitle>Range Bar</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Range Bar charts are categorical charts, which represent a variation of the Bar charts.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/charts/series-types/waterfall">
      <div>
        <ComponentImage src="/kendo-angular-ui-develop/components/assets/8e24a92a8395d66a7befb0db351a803c/waterfall.svg" alt="Angular Waterfall Chart" />
      </div>
      <ComponentTitle>Waterfall</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Waterfall charts are categorical charts, which display the cumulative effect of sequentially introduced positive or negative values.</ComponentDescription>
    </Component>
  </Column>
</Row>

<Row>
    <Column count={12}>
        <Component>
            <ComponentTitle>Circular</ComponentTitle>
        </Component>
    </Column>
</Row>
<Row>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/charts/series-types/donut">
      <div>
        <ComponentImage src="/kendo-angular-ui-develop/components/assets/36c5eb9d62d610d0d70f6c5a5ee3591c/donut.svg" alt="Angular Donut Chart" />
      </div>
      <ComponentTitle>Donut</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Donut charts are circular charts, which represent a variation of the Pie charts and are capable of displaying multiple nested series.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/charts/series-types/pie">
      <div>
        <ComponentImage src="/kendo-angular-ui-develop/components/assets/4f8a9b2013a5e2e99dca274a5e66b86f/pie.svg" alt="Angular Pie Chart" />
      </div>
      <ComponentTitle>Pie</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Pie charts are circular charts, which display data in the form of single-series sectors from a two-dimensional circle and are useful for rendering data as part of a whole.</ComponentDescription>
    </Component>
  </Column>
</Row>

<Row>
    <Column count={12}>
        <Component>
            <ComponentTitle>Freeform</ComponentTitle>
        </Component>
    </Column>
</Row>
<Row>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/charts/series-types/funnel">
      <div>
        <ComponentImage src="/kendo-angular-ui-develop/components/assets/d170523845c931168897174578282f83/funnel.svg" alt="Angular Funnel Chart" />
      </div>
      <ComponentTitle>Funnel</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Funnel charts are freeform charts, which display a single series of data in progressively decreasing or increasing proportions that are organized in segments, where each segment represents the value for the particular item from the series.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/charts/series-types/pyramid">
      <div>
        <ComponentImage src="/kendo-angular-ui-develop/components/assets/9349a56655816baa54c21e8660d1ab22/pyramid.svg" alt="Angular Pyramid Chart" />
      </div>
      <ComponentTitle>Pyramid</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Pyramid charts are freeform charts, which display a single series of data as pyramid segments, where each segment represents the value for the particular item from the series.</ComponentDescription>
    </Component>
  </Column>
</Row>

<Row>
    <Column count={12}>
        <Component>
            <ComponentTitle>Scatter</ComponentTitle>
        </Component>
    </Column>
</Row>
<Row>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/charts/series-types/bubble">
      <div>
        <ComponentImage src="/kendo-angular-ui-develop/components/assets/6fa624e2ae94598521f20254e3632fba/bubble.svg" alt="Angular Bubble Chart" />
      </div>
      <ComponentTitle>Bubble</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Bubble charts are scatter charts, which display data as points with coordinates and sizes that are defined by the value of their items.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/charts/series-types/polar">
      <div>
        <ComponentImage src="/kendo-angular-ui-develop/components/assets/c83a15d3d772ab4faee3245201c35425/polar.svg" alt="Angular Polar Chart" />
      </div>
      <ComponentTitle>Polar</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Polar charts are scatter charts, which display two-dimensional data series in polar coordinates.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,8]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="/charts/series-types/scatter">
      <div>
        <ComponentImage src="/kendo-angular-ui-develop/components/assets/44e04b314c4f60e42439278a47847df4/scatter-plot.svg" alt="Angular Scatter Plot Chart" />
      </div>
      <ComponentTitle>Scatter Plot</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Scatter Plot and Scatter Line charts are the two main variations of scatter charts and are suitable for displaying numerical data.</ComponentDescription>
    </Component>
  </Column>
</Row>

## Basics

Series are declared by using the [kendo-chart-series-item](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent) configuration components and placed in a [kendo-chart-series](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriescomponent) collection.

For more information on how to configure each Chart series, refer to the articles on the [series types](https://www.telerik.com/kendo-angular-ui-develop/components/charts/series-types). For more information on how to bind the series to data, refer to the article on [binding data to series](https://www.telerik.com/kendo-angular-ui-develop/components/charts/data-binding/binding-series).

The following example configures a set of Scatter Line series.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/series/source.txt)

## Default Series Configuration

You can apply a subset of settings to all Chart series by using the [kendo-chart-series-defaults](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesdefaultscomponent) component.

The `kendo-chart-series-defaults` component supports the following child components:

* [`kendo-chart-series-defaults-labels`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesdefaultslabelscomponent)
* [`kendo-chart-series-defaults-notes`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/axisdefaultstitlecomponent)

The following example demonstrates how to set the default series type and labels.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/series/default-config/source.txt)

## Support and Learning Resources

* [Getting Started with the Kendo UI for Angular Chart](https://www.telerik.com/kendo-angular-ui-develop/components/charts/installation/getting-started)
* [API Reference of the Chart](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api)
* [Axes](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/axes)
* [Chart Area](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/chart-area)
* [Crosshairs](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/crosshairs)
* [Error Bars](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/crosshairs)
* [Labels](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/labels)
* [Legend](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/legend)
* [Notes](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/notes)
* [Panes](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/panes)
* [Plot Area](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/plot-area)
* [Plot Bands](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/plot-bands)
* [Selection](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/selection)
* [Title](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/title)
* [Tooltip](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/tooltips)
* [Getting Started with Kendo UI for Angular (Online Guide)](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started)
* [Getting Started with Kendo UI for Angular (Video Tutorial)](https://www.telerik.com/campaigns/kendo-ui/using-kendo-ui-with-angular-video-tutorial)
* [Video Courses](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started/video-onboarding)
* [Chart Forum](https://www.telerik.com/forums/kendo-angular-ui?tagId=256)
* [Before You Start: All Things Angular (Telerik Blog Post)](https://www.telerik.com/blogs/all-things-angular)
* [Knowledge Base](https://www.telerik.com/kendo-angular-ui-develop/components/knowledge-base)

## Additional Resources

* [Angular Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-angular)
* [Angular Videos](https://www.telerik.com/videos/kendo-angular-ui)
* [Kendo UI for Angular Roadmap](https://www.telerik.com/support/whats-new/kendo-angular-ui/roadmap)