Ajax Control Toolkit
LineChart Demonstration

Basic Type:

Stacked Type:

LineChart Description

The LineChart control enables you to render a line chart from one or more series of values. This control is compatible with any browser which supports SVG including Internet Explorer 9 and above.


This control can display two types of LineCharts: Basic and Stacked.

LineChart Properties

The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:LineChart ID="LineChart1" runat="server" 
ChartWidth="450" ChartHeight="300" ChartType="Basic" 
ChartTitle="United States versus European Widget Production" 
CategoriesAxis="2007,2008,2009,2010,2011,2012" 
ChartTitleColor="#0E426C" CategoryAxisLineColor="#D08AD9" 
ValueAxisLineColor="#D08AD9" BaseLineColor="#A156AB">
<Series>
    <ajaxToolkit:LineChartSeries Name="United States" 
    LineColor="#6C1E83" Data="110, 189, 255, 95, 107, 140" />
    <ajaxToolkit:LineChartSeries Name="Europe"  
    LineColor="#D08AD9" Data="49, 77, 95, 68, 70, 79" />
</Series>
</ajaxToolkit:LineChart>
    
LineChart Properties
  • ChartHeight - This property enables you to customize the height of the chart.
  • ChartWidth - This property enables you to customize the width of the chart.
  • ChartTitle - This property enables you to set the title of the chart.
  • CategoryAxis - This is a required property. You need to provide a set of values for the category axis to create a line chart.
  • ChartType - This property enables you to render two types of line charts 1. Basic 2. Stacked.
  • Theme - This property enables you to control the appearance of the line chart with a Cascading Style Sheet file.
  • ValueAxisLines - This property enables you to set the interval size for the value axis line.
  • ChartTitleColor - This property enables you to set the font color of the chart title.
  • CategoryAxisLineColor - This property enables you to set the color of the category axis lines.
  • ValueAxisLineColor - This property enables you to set the the color of the value axis lines.
  • BaseLineColor - This property enables you to set the color of the base lines of the chart.
  • TooltipBackgroundColor - This property enables you to set the background color of the tooltip box.
  • TooltipFontColor - This property enables you to set the font color of the tooltip box.
  • TooltipBorderColor - This property enables you to set the border color of the tooltip box.
  • AreaDataLabel - This property enables you to set the text/label that will be shown in the tooltip and describe about area data value.

LineChartSeries Properties:
  • Name - This property is required.
  • Data - This property is required and provides data for a particular series.
  • LineColor - This property enables you to set the color of line for a particular series.

Copyright © 2006-2013 Microsoft Corporation. All Rights Reserved.