Documentation for classes includes syntax, usage information, and code samples for methods, properties, and event handlers and listeners for those APIs that belong to a specific class in KoolChart Component Layout. The classes are listed alphabetically. If you are not sure to which class a certain method or property belongs, you can look it up in the Index.


 ClassDescription
 AngularAxisRenderer
The AngularAxisRenderer class (<AngularAxisRenderer>) is used to define the rendering method of the category for Radar charts.
 Area2DChart
Area2D charts are much like Line charts but they display different colors in the areas below the lines.
 Area2DSeries
The Area2DSeries class (<Area2DSeries>) is the series of the Area2DChart node (<Area2DChart>).
 Area2DSet
The Area2DSet class (<Area2DSet>) contains multiple Area2DSeries, which operates as a single series.
 Axis2DRenderer
The Axis2DRenderer class (<Axis2DRenderer>) is a rendering method for the axis of 2D charts.
 Axis2DWingRenderer
The Axis2DWingRenderer class (<Axis2DWingRenderer>) is a rendering method for the axis of Column2DWing chart and Bar2DWing chart.
 Axis3DRenderer
The Axis3DRenderer class (<Axis3DRenderer>) is a rendering method for the axis of 3D charts.
 AxisLine
By using AxisLine, you can adjust the color, thickness and label of the axis line.
 AxisMarker
By using AxisMarker, you can draw lines or ranges in the chart.
 AxisRange
By using AxisRange, you can adjust the color and label of the axis range.
 Bar2DChart
Bar2D charts represent data with rectangular bars and their lengths proportional to the values.
 Bar2DSeries
The Bar2DSeries class (<Bar2DSeries>) is the series of the Bar2DChart node (<Bar2DChart>).
 Bar2DSet
The Bar2DSet class (<Bar2DSet>) contains multiple Bar2DSeries, which operates as a single series.
 Bar2DWingChart
Bar2DWing charts represent data with rectangular bars and their lengths proportional to the values.
 Bar2DWingSeries
The Bar2DWingSeries class (<Bar2DWingSeries>) is the series of the Bar2DWingChart node (<Bar2DWingChart>).
 Bar3DChart
Bar3D charts represent data with cubes and their lengths proportional to the values
The presenting types of Bar3D charts are as follows:
  • simple columns
  • clustered columns
  • stacked
  • 100% stacked

One or more Bar3DSeries have to be assigned to the series node.

<Bar3DChart> has the following additional properties compared to <Bar2DChart>.
 Bar3DSeries
The Bar3DSeries class (<Bar3DSeries>) is the series of the Bar3DChart node (<Bar3DChart>).
 Bar3DSet
The Bar3DSet class (<Bar3DSet>) contains multiple Bar3DSeries, which operates as a single series.
 Box
The Box class (<Box>) can contain the Label object (<Label>) or the Image object (<Image>).
 BoxPlotChart
The BoxPlot chart represents groups of numerical data through their quartiles.
 BoxPlotSeries
BoxPlotSeries is the series of BoxPlotChart.
 BrokenAxis
The BrokenAxis class (<BrokenAxis>) is used when a few data points greatly exceed the others.
 BrokenAxis2DRenderer
The BrokenAxis2DRenderer class (<BrokenAxis2DRenderer>) is a rendering method for the broken axis of 2D charts.
 BrokenAxis3DRenderer
The BrokenAxis2DRenderer class (<BrokenAxis2DRenderer>) is a rendering method for the broken axis of 3D charts.
 BrokenAxisLine
The BrokenAxisLine class is to draw the wave pattern for the broken axis.
 Bubble3DChart
Bubble3D charts represent data by using 3 values (x, y, radius).
 Bubble3DSeries
The Bubble3DSeries class (<Bubble3DSeries>) is the series of the Bubble3DChart node (<Bubble3DChart>).
 CandleArea2DSeries
The CandleArea2DSeries class (<CandleArea2DSeries>) is a series of the CandleArea2DChart node (<CandleArea2DChart>).
 CandleLine2DSeries
The CandleLine2DSeries class (<CandleLine2DSeries>) is the series of the CandleLine2DChart node (<CandleLine2DChart>).
 Candlestick2DChart
The Candlestick2D chart is a subset of professional stock charts.
 Candlestick2DSeries
The Candlestick2DSeries class (<Candlestick2DSeries>) is the series of the Candlestick2DChart node (<Candlestick2DChart>).
 CanvasElement
The CanvasElement class (<CanvasElement>) contains objects, such as Label or Image.
 Caption
By using the Caption class (<Caption>), you can draw the title at the top center of charts.
The default font style is {12px, bold, Verdana}.
 CategoryAxis
The CategoryAxis class (<CategoryAxis>) is used to create the string typed axis.
 CategoryLinearAxis
The CategoryLinearAxis class (<CategoryLinearAxis>) is used to create CategoryAxis in Scroll charts.
 CheckableLegendItem
CheckableLegendItem can be set when the useVisibleCheck property of SubLegend is true.
 CircularGauge
The CircularGauge class (<CircularGauge>) provides a way to display data on a circular gauge with a glossy appearance for displaying a finite data value at a point in time.
 ColorAxis
The ColorAxis class (<LinearAxis>) is used to create Legend for colors.
 ColorRangeLegend
ColorRangeLegend is to display the color legend with the color values of in ColorAxis.
 Column2DChart
Column2D charts represent data with rectangular columns and their lengths proportional to the values
The presenting types of Column2D charts are as follows:
  • simple columns
  • clustered columns
  • stacked
  • 100% stacked

One or more Column2DSeries have to be assigned to the series node.

The layout is as follows:

 <KoolChart backgroundColor="0xFFFFEE"  cornerRadius="12" borderStyle="solid">
   <Options>
     <Caption text="Profit/Cost/Revenue (Monthly)"/>
   </Options>
   <Column2DChart showDataTips="true">
     <horizontalAxis>
       <CategoryAxis categoryField="Month" />
     </horizontalAxis>
     <series>
       <Column2DSeries yField="Profit"/>
       <Column2DSeries yField="Cost" />
       <Column2DSeries yField="Revenue" />
     </series>
   </Column2DChart>
 </KoolChart>
 
 Column2DSeries
The Column2DSeries class (<Column2DSeries>) is the series of the Column2DChart node (<Column2DChart>).
 Column2DSet
The Column2DSet class (<Column2DSet>) contains multiple Column2DSeries, which operates as a single series..
 Column2DWingChart
Column2DWing charts represent data with rectangular columns and their lengths proportional to the values.
 Column2DWingSeries
The Column2DWingSeries class (<Column2DWingSeries>) is the series of the Column2DWingChart node (<Column2DWingChart>).
 Column3DChart
Column3D charts represent data with rectangular columns and their lengths proportional to the values
The presenting types of Column3D charts are as follows:
  • simple columns
  • clustered columns
  • stacked
  • 100% stacked

One or more Column3DSeries have to be assigned to the series node.

<Column3DChart> has the following additional properties compared to <Column2DChart>.
 Column3DSeries
The Column3DSeries class (<Column3DSeries>) is the series of the Column3DChart node (<Column3DChart>).
 Column3DSet
The Column3DSet class (<Column3DSet>) contains multiple Column3DSeries, which operates as a single series.
 Combination2DChart
Combination2D charts represent data using a number of bars and/or lines (columns, areas).
 Combination3DChart
Combination3D charts represent data using a number of bars and/or lines (columns, areas).
 CrossRangeZoomer
By using CrossRangeZoomer, you can display crosshairs in charts and zoom in on certain areas.
 CurrencyFormatter
By using the CurrencyFormatter class (<CurrencyFormatter>), you can format a valid number as a currency value.
 DataEditor

The DataEditor class enables you to modify the chart data.

 DateFormatter
The DateFormatter class (<DateFormatter>) returns a formatted date and time string from an input string.
 DateTimeAxis
The DateTimeAxis class (<DateTimeAxis>) is used to represent the time-series data.
 Displayer
The Displayer class (<Displayer>) is a part of the History chart, which displays the data area selected from <Navigator>.
 Displayer3D
The Displayer3D class (<Displayer3D>) is a part of the History chart, which displays the data area selected by <Navigator>.
 DualChart
DualChart is composed of mainChart, subChart and dataSelector and can be configured as follows:
  <KoolChart backgroundColor="0xFFFFFF" cornerRadius="12" borderStyle="solid">
   <DualChart>
    <mainChart>
     <Candlestick2DChart id="chart1" showDataTips="true" width="100%" height="100%">
      <horizontalAxis>
       <CategoryAxis id="mainHAxis" categoryField="Date"/>
      </horizontalAxis>
      <series>
       <Candlestick2DSeries openField="open" closeField="close" highField="high" lowField="low" displayName="Candle">
       </Candlestick2DSeries>
         </series>
     </Candlestick2DChart>
    </mainChart>
    <subChart>
     <Column2DChart id="sub">
      <horizontalAxis>
       <CategoryAxis categoryField="Date" id="naviHAxis"  padding="0"/> 
      </horizontalAxis>
      <verticalAxis>
       <LinearAxis id="vAxis"/>
      </verticalAxis>
      <series>
       <Candle2DSeries name="A" yField="Data1"/>
      </series>
     </Column2DChart>
    </subChart>
    <dataSelector>
     <DualScrollBar visibleItemSize="30"/>
    </dataSelector>
   </DualChart>
  </KoolChart>
   
 DualScrollBar
DualScrollBar needs to be set in dataSelector when the number of data is large in DualChart.

The configuration of DualScrollBar is as follows:

  ...
 GradientEntry
The GradientEntry objects (<GradientEntry>) have to be set as the child nodes of the LinearGradient node (<LinearGradient>) or the RadialGradient node (<RadialGradient>).
 GridLines
By using GridLines, you can draw the grid line inside the chart area.
 HalfCircularGauge
The HalfCircularGauge class (<HalfCircularGauge>) provides a way to display data on a half-circular gauge with a glossy appearance for displaying a finite data value at a point in time.
 HCylinderGauge
The HCylinder class (<HCylinder>) represents the target and actual data as the horizontal cylinder.
 Histogram2DChart
Histogram2DChart is a graphical representation of the distribution of numerical data with the 2D bars.
 Histogram2DSeries
Histogram2DSeries is the series for Histogram2DChart.
 Histogram3DChart
Histogram3DChart is a graphical representation of the distribution of numerical data with the 3D bars.
 Histogram3DSeries
Histogram3DSeries is the series for Histogram3DChart.
 HistoryChart
The History chart is composed of Displayer, Navigator and Selector.
 HistoryRangeSelector
The selector of the History chart.
 HLinearGauge
The HLinear class (<HLinear>) represents the target data and the actual data as the horizontal bar.
 HTarget2DGoalSeries
The HTarget2DGoalSeries class (<HTarget2DGoalSeries>) is used to draw the target values of the Target vs Actual chart (Combination2DChart).
 HTarget2DResultSeries
The HTarget2DResultSeries class (<HTarget2DResultSeries>) is used to draw the actual values of the Target vs Actual chart (Combination2DChart).
 HTarget3DGoalSeries
The HTarget3DGoalSeries class (<HTarget3DGoalSeries>) is used to draw the target values of the Target vs Actual chart.
 HTarget3DResultSeries
The HTarget3DResultSeries class (<HTarget3DResultSeries>) is used to draw the actual values of the Target vs Actual chart.
 HttpMultiServiceRepeater
By using the HttpMultiServiceRepeater class (<HttpMultiServiceRepeater>), you can create the real-time premium chart.
 HttpServiceRepeater
The HttpServiceRepeater class (<HttpServiceRepeater>) inherits from the HttpService class (<HttpService>) and send URL repeatedly at a given interval.
 Image
The Image object (<Image>) can be contained in the Box object (<Box>) or the CanvasElement object (<CanvasElement>).
 ImageChart
Image charts represent data using images.
 ImageSeries
The ImageSeries class (<ImageSeries>) is the series of the ImageChart node (<ImageChart>).
 KoolChart
<KoolChart> is the root node of the layout.
 Label
By using Label, you can add memos into charts.
 Legend
By using the Legend class (<Legend>), you can draw the legend in charts.
 LegendItem

LegendItem is to display the marker and label in the chart legend.

 Line2DChart
Line2D charts represent data by connecting a series of data points together with a line.
 Line2DSeries
The Line2DSeries class (<Line2DSeries>) is the series of the Line2DChart node (<Line2DChart>).
 LinearAxis
The LinearAxis class (<LinearAxis>) is used to represent numeric-type data.
 LinearGradient
The LinearGradient class (<LinearGradient>) lets you specify the fill of a graphical element, where a gradient specifies a gradual color transition in the fill color.
 LogAxis
The LogAxis class (<LogAxis>) is useful when your data values span orders of magnitude.
 Matrix2DChart
Matrix2D charts divide the screen into a grid.
 Matrix2DSeries
Matrix2DSeries.
 MotionBubbleSeries
MotionBubbleSeries is a series for MotionChart, which represents the bubble series in the chart.
 MotionChart
The Motion chart represents data with the moving effect of the data change from the first data to the last data.
 MotionColumnSeries
MotionColumnSeries is a series for MotionChart, which represents the column series in the chart.
 MotionLineSeries
MotionLineSeries is a series for MotionChart, which represents the line series in the chart.
 Navigator
The Navigator class (<Navigator>) is a part of the History chart, which displays the whole items of the History chart and users can select a data region to be displayed in <Displayer>.
 NumberFormatter
The NumberFormatter class (<NumberFormatter>) formats a valid number by adjusting the decimal rounding/precision, the thousands separator and the negative sign.
 Pie2DChart
Pie2D charts are circular charts divided into sectors, illustrating numerical proportion.
 Pie2DSeries
The Pie2DSeries class (<Pie2DSeries>) is the series of the Pie2DChart node (<Pie2DChart>).
 Pie3DChart
Pie3D charts are 3D circular charts divided into sectors, illustrating numerical proportion.
 Pie3DSeries
The Pie3DSeries class (<Pie3DSeries>) is the series of the Pie3DChart node (<Pie3DChart>).
 Plot2DChart
Plot2D charts display numeric coordinates along the X-axis and Y-axis.
 Plot2DSeries
The Plot2DSeries class (<Plot2DSeries>) is the series of the Plot2DChart node (<Plot2DChart>).
 RadarChart
Radar charts display multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes.
The types are as follows:
  • "polygon" - Represents data as the polygon that consists of the same number of points as the number of data.
  • "circle" - Represents data as the circle regardless of the number of data.
  • One or more RadarSeries have to be assigned to the series node.

    The layout is as follows:

     <KoolChart backgroundColor="0xFFFFEE"  cornerRadius="12" borderStyle="solid">
       <Options>
        <Caption text="Radar Chart"/>
      </Options>
       <RadarChart id="chart1"
                  isSeriesOnAxis="false"
                  type="polygon"
         paddingTop="20"
         paddingBottom="20"
                  showDataTips="true">
         <series>
          ...
     RadarGridLines
    By using RadarGridLines, you can draw grid lines in the background of the chart.
     RadarSeries
    The RadarSeries class (<RadarSeries>) is the series of the RadarChart node (<RadarChart>).
     RadialGradient
    The RadialGradient class (<RadialGradient>) lets you specify a gradual color transition in the fill color.
     RealTimeChart
    Real-time charts represent data based on the number of data or the time period.
     RPCItem
    The RPCItem class (<RPCItem>) is used for the Array element of the RPCList property in the HttpMultiServiceRepeater node (<HttpMultiServiceRepeater>).
     ScrollableAxisRenderer
    The ScrollableAxisRenderer class (<ScrollableAxisRenderer>) is used to create scrollable charts.
     SeriesClip
    The SeriesClip effect draws the data points from the first data to the last data.
     SeriesInterpolate
    The SeriesInterpolate effect gradually moves the data points from the start value (0) to the actual values.
     SeriesSlide
    The SeriesSlide class (<SeriesSlide>) offers the sliding effect while data rendering.
     SeriesZoom
    The SeriesZoom effect starts at the reference point in the chart and gradually expands.
     SolidColor

    By using the SolidColor class (<SolidColor>), you can define the representation for the color, including the alpha value.

     Stroke
    By using the Stroke class (<Stroke>), you can define the properties for the line.
     SubCaption
    By using the SubCaption class (<SubCaption>), you can draw the subtitle under the title.
    The default font style is {10px, Verdana}.
     SubLegend
    By using SubLegend, you can draw the legend in charts.
     TreeMapChart

    The TreeMap chart represents the chart data in the table that shows the parent-child relationship of the data with different box sizes.

     TreeMapSeries
    TreeMapSeries is the series for TreeMapChart.
     VCylinderGauge
    The VCylinder class (<VCylinder>) represents the target and actual data as the vertical cylinder.
     Vector2DChart
    The Vector 2D chart represents data with angle and magnitude in lines..
     Vector2DSeries
    Vector2DSeries is the series for Vector2DChart.
     VLinearGauge
    The VLinear class (<VLinear>) represents the target data and the actual data as the vertical bar.
     VTarget2DGoalSeries
    The VTarget2DGoalSeries class (<VTarget2DGoalSeries>) is used to draw the target values of the Target vs Actual chart.
     VTarget2DResultSeries
    The VTarget2DResultSeries class (<VTarget2DResultSeries>) is used to draw the actual values of the Target vs Actual chart.
     VTarget3DGoalSeries
    The VTarget3DGoalSeries class (<VTarget3DGoalSeries>) is used to draw the target values of the Target vs Actual chart (Target3DChart).
     VTarget3DResultSeries
    The VTarget3DResultSeries class (<VTarget3DResultSeries>) is used to draw the actual values of the Target vs Actual chart (Target3DChart).
     WingGridLines
    By using WingGridLines, you can draw the grid line (horizontal, vertical, both) inside the chart area.
     WingSeriesInterpolate
    The WingSeriesInterpolate effect is the animation effect for Wing charts, which gradually moves the data points from the start value (0) to the actual values.
     WingSeriesSlide
    The WingSeriesSlide effect is the animation effect for Wing charts, which offers the sliding effect while data rendering.
     WingSeriesZoom
    The WingSeriesZoom effect is the animation effect for Wing charts, which starts at the reference point in the chart and gradually expands

      
       <showDataEffect>
        <WingSeriesZoom/>
       <showDataEffect>
      
      

     WordCloudChart
    The WordCloud chart is a visual representation of text data and the importance of each text data is shown with font size and color.
     WordCloudSeries
    WordCloudSeries is the series for WordCloudChart.