Telerik UI for Windows 8 HTML

Line series visualize data as a continuous line on a Cartesian coordinate system. Categories are laid out on the X-axis, while values go on the Y-axis.

chart-line-series

Defining a Line Series Declaratively

To define a Line series in HTML, add an object with type property set to "line" to the series array.

HTML Copy imageCopy
<div id="declarativeLineSeriesChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [
        { type: 'line', name: 'World', data: [16.7, 20, 15.7, 26.6, 23.5] }
    ]
}">
</div>

Defining Line Series Programmatically

To programmatically add a Line series to the chart, create a new Telerik.UI.Chart.LineSeries object and add it to the Telerik.UI.RadChart.series array. Finally, call refresh() to have the changes take effect.

JavaScript Copy imageCopy
var lineSeriesChartCtrl = new Telerik.UI.RadChart(document.getElementById("lineSeriesChart"));
var lineSeries = new Telerik.UI.Chart.LineSeries();
lineSeries.data = [16.7, 20, 15.7, 26.6, 23.5];
lineSeriesChartCtrl.series.push(lineSeries);
lineSeriesChartCtrl.refresh();

Configuring Line Series

Apart from the common configuration settings listed in this article, there a few more specific ones that you can use to customize the look and behavior of the Line series.

Assigning a Value Axis

When you have multiple value axes, you can assign the Line series to one of them, using the axis option. The property defaults to the primary axis.

Assigning a Value Axis Example Copy imageCopy
<div id="valueAxisChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
     title: {
          text: 'Average temperature and humidity'
     },
     legend: {
          position: 'bottom'
     },
     series: [{
          type: 'line',
          name: 'Temperature',
          data: [32, 25, 20, 15, 5],
          axis: 'temperature',
          color: '#1E98E4'
     }, {
          type: 'line',
          name: 'Humidity',
          data: [45, 50, 80, 78, 76],
          axis: 'humidity',
          color: '#f99'
     }
     ],
     categoryAxis: {
          categories: ['Aug', 'Sep', 'Oct', 'Nov', 'Dec']
     },
     valueAxis: [{
          name: 'temperature',
          labels: {
          format: '{0}C'
     }
     }, {
          name: 'humidity',
          labels: {
          format: '{0}%'
     }
     }]
}">
</div>

The resulting chart will look like this:

Multiple axes

Setting a Line Style

Use the style property to specify one of three possible line styles. The available values are "normal", "smooth" and "step" with "normal" being the default property value.

Customizing Markers

You can set a few options that change what a data point looks like in a Line series by setting the markers property. They include: background, border settings, size, type (circle, square or triangle) and visible.

Example:

Customizing Markers Example Copy imageCopy
<div id="customizedMarkersChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{
        type: 'line',
        name: 'Profit',
        data: [2200, 2500, 1800, 2400, 2300, 3000, 2900, 3100],
        markers: {
            type: 'square',
            background: 'yellow'
        }
    }]
}">
</div>
Customizing markers

Handling Missing Values

There are three different options to handle missing values in your chart when using a Line series. They are presented by the missingValues property, which accepts the following values:

  • gap: The line stops before missing point and continues after it (default value).

  • interpolate: The value is interpolated from neighboring points

  • zero: The value is assumed to be zero.

In the example below, where the missing value is assumed to be zero:

Handling Missing Values Example Copy imageCopy
<div id="missingValuesChart" data-win-control="Telerik.UI.RadChart" data-win-options="{
    series: [{
        type: 'line',
        name: 'Profit',
        data: [2200, 2500, 1800, 2400, 2300, null, 2900, 3100],
        missingValues: 'zero'
    }]
}">
</div>

And this is the resulting chart:

Handling missing values

See Also

Other Resources