LineChart

Demo Page

The LineChart control enables you to render a line chart from one or more series of values. This control is compatible with any browser that supports SVG including Internet Explorer 9 and above. This control can display two types of LineCharts: Basic and Stacked.

Properties

Name	Description
AreaDataLabel	Enables you to set text/label that will be shown in the tooltip and describe an area data value
BaseLineColor	Enables you to set the color of the chart's base lines
CategoriesAxis	Provides a set of values for the category axis to create a line chart
CategoryAxisLineColor	Enables you to set the color of the category axis lines
ChartType	Enables you to render two types of line charts: Basic or Stacked
ClientSeries	Provides a list of series to the client side Remarks: The Series property is required for designer experience support because the editor always prevents the property's capability to provide values to the client side as ExtenderControlProperty at runtime
DisplayValues	Whether or not show series values.
Series	Provides a list of series
TooltipBackgroundColor	Enables you to set a background color of the tooltip box
TooltipBorderColor	Enables you to set a border color of the tooltip box
TooltipFontColor	Enables you to set a font color of the tooltip box
ValueAxisLineColor	Enables you to set a color of a value axis line
ValueAxisLines	Enables you to set interval size for a value axis line

Client properties

Name	Description
areaDataLabel	Enables you to set text/label that will be shown in the tooltip and describe a area data value
baseLineColor	Enables you to set a color of the chart's base lines
categoriesAxis	Provides a set of values for the category axis to create a line chart
categoryAxisLineColor	Enables you to set a color of category axis lines
chartHeight	Enables you to customize chart height
chartTitle	Enables you to set the chart's title
chartTitleColor	Enables you to set a font color of the chart's title
chartType	Enables you to render two types of line charts: Basic or Stacked
chartWidth	Enables you to customize chart width
clientSeries	Provides a list of series
displayValues	Whether or not show series values.
theme	Enables you to control the appearance of a line chart with a CSS file
tooltipBackgroundColor	Enables you to set a background color of the tooltip box
tooltipBorderColor	Enables you to set a border color of the tooltip box
tooltipFontColor	Enables you to set a font color of the tooltip box
valueAxisLineColor	Enables you to set a color of a value axis line
valueAxisLines	Enables you to set interval size for a value axis line

Client methods

Name	Description
calculateInterval()	Calculates a distance interval for the value axis
calculateMinMaxValues(chartType)	Calculates minimum and maximum values of specified data
calculateValueAxis()	Calculates label values for the value axis to display on the chart
drawAxisValues()	Writes horizontal and vertical axis values of the chart
drawBackgroundHorizontalLines()	Draws background horizontal lines of the chart
drawBackgroundVerticalLines()	Draws background vertical lines of the chart
drawBaseLines()	Draws base lines of the chart
drawLegendArea()	Draws legends of the chart
drawLines()	Draws lines on the chart
initializeSVG()	Creates SVG and its initial content

Client properties

areaDataLabel

Enables you to set text/label that will be shown in the tooltip and describe a area data value

Getter name: get_areaDataLabel()
Setter name: set_areaDataLabel(value)

baseLineColor

Enables you to set a color of the chart's base lines

Getter name: get_baseLineColor()
Setter name: set_baseLineColor(value)

categoriesAxis

Provides a set of values for the category axis to create a line chart

Getter name: get_categoriesAxis()
Setter name: set_categoriesAxis(value)

categoryAxisLineColor

Enables you to set a color of category axis lines

Getter name: get_categoryAxisLineColor()
Setter name: set_categoryAxisLineColor(value)

chartHeight

Enables you to customize chart height

Getter name: get_chartHeight()
Setter name: set_chartHeight(value)

chartTitle

Enables you to set the chart's title

Getter name: get_chartTitle()
Setter name: set_chartTitle(value)

chartTitleColor

Enables you to set a font color of the chart's title

Getter name: get_chartTitleColor()
Setter name: set_chartTitleColor(value)

chartType

Enables you to render two types of line charts: Basic or Stacked

Getter name: get_chartType()
Setter name: set_chartType(value)

chartWidth

Enables you to customize chart width

Getter name: get_chartWidth()
Setter name: set_chartWidth(value)

clientSeries

Provides a list of series

Getter name: get_clientSeries()
Setter name: set_clientSeries(value)

displayValues

Whether or not show series values.

Getter name: get_displayValues()
Setter name: set_displayValues(value)

theme

Enables you to control the appearance of a line chart with a CSS file

Getter name: get_theme()
Setter name: set_theme(value)

tooltipBackgroundColor

Enables you to set a background color of the tooltip box

Getter name: get_tooltipBackgroundColor()
Setter name: set_tooltipBackgroundColor(value)

tooltipBorderColor

Enables you to set a border color of the tooltip box

Getter name: get_tooltipBorderColor()
Setter name: set_tooltipBorderColor(value)

tooltipFontColor

Enables you to set a font color of the tooltip box

Getter name: get_tooltipFontColor()
Setter name: set_tooltipFontColor(value)

valueAxisLineColor

Enables you to set a color of a value axis line

Getter name: get_valueAxisLineColor()
Setter name: set_valueAxisLineColor(value)

valueAxisLines

Enables you to set interval size for a value axis line

Getter name: get_valueAxisLines()
Setter name: set_valueAxisLines(value)

Client methods

calculateInterval()

Calculates a distance interval for the value axis

calculateMinMaxValues(chartType)

Calculates minimum and maximum values of specified data

Params:

• chartType
  • Type: Sys.Extended.UI.LineChartType
  • Description: Chart type

calculateValueAxis()

Calculates label values for the value axis to display on the chart

drawAxisValues()

Writes horizontal and vertical axis values of the chart

drawBackgroundHorizontalLines()

Draws background horizontal lines of the chart

drawBackgroundVerticalLines()

Draws background vertical lines of the chart

drawBaseLines()

Draws base lines of the chart

drawLegendArea()

Draws legends of the chart

drawLines()

Draws lines on the chart

initializeSVG()

Creates SVG and its initial content