Introduction
Licensing
Knowledge Base
Controls / Chart (HTML5) / How To / Create Line Chart With Multiple Colors
New to Telerik UI for ASP.NET AJAX? Start a free 30-day trial

Create Line Chart With Multiple Colors

This help article addresses the challenge that the line series of the ASP.NET AJAX Chart offers only a common color for the whole series and suggests a solution for adding multiple colors to the line series.

Unlike the bar/column series where each item (i.e., the bar) can be easily targeted and colored, the line series consist of points that are connected with lines, which makes the coloring harder. For example, which part of the item is supposed to be colored - the line between points of two adjacent categories or the two lines connecting the point within a single category?

Example 1 illustrates a possible approach for defining different colors for the lines between adjacent points of line series via the visual template that is exposed by the column series. You can see the output in Figure 1.

Figure 1: Chart with three line series that have different colors.

line-chart-multiple-colors

Example 1: Create multiple colors for a line series with a visual template.

JavaScript
//script.js
; (function (global) {
var myInd = new Array();
var oldPos = new Array();
var numSeries = getSeriesCount();

for (var i = 0; i < numSeries; i++) {
	myInd.push(0);
	oldPos.push(0);
}

var telerikDemo = global.telerikDemo = {

	seriesVisual: function (e) {

		var serisIndex = e.series.index;
		myInd[serisIndex]++;

		if (myInd[serisIndex] == e.options.data.length + 1) {
			myInd[serisIndex] = 1;
		}

		var rect = e.rect;

		var origin = { x: rect.topLeft().x + (rect.topRight().x - rect.topLeft().x) / 2, y: 0 };
		if (e.value > 0) {
			origin.y = rect.topLeft().y;
		}
		else {
			origin.y = rect.bottomLeft().y;
		}

		if (myInd[serisIndex] == 1) {
			oldPos[serisIndex] = origin;
			return "";
		}
		var myColor = e.dataItem["colorField" + (serisIndex + 1)];

		var drawing = kendo.drawing;

		var path = new drawing.Path({
			stroke: {
				color: myColor
			}
		}).moveTo(oldPos[serisIndex].x, oldPos[serisIndex].y)
		.lineTo(origin.x, origin.y);
		oldPos[serisIndex] = origin;

		var group = new drawing.Group();
		group.append(path);
		return group;
	}
}
})(window)

See Also

In this article
See Also
Not finding the help you need?
Contact Support