Important version information!

You are browsing a class reference for Version 2 of the JavaScript Charts. If you are using Version 3 (current), please click here.

AmGraph

AmGraph class displays all types of graphs - line, column, step line, smoothed line, ohlc and candlestick. Example:

var chart = new AmCharts.AmSerialChart();
var graph = new AmCharts.AmGraph();
graph.valueField = 'value';
graph.type = 'column';
graph.fillAlphas = 1;
chart.addGraph(graph);

Properties

PropertyTypeDefaultDescription
alphaFieldString Name of the alpha field in your dataProvider.
balloonColorString Value balloon color. Will use graph or data item color if not set.
balloonTextString[[value]]Balloon text. You can use tags like [[value]], [[description]], [[percents]], [[open]], [[category]]
baloonFunctionFunctionIf you set some function, the graph will call it and pass GraphDataItem and AmGraph object to it. This function should return a string which will be displayed in a balloon.
behindColumnsBooleanfalseSpecifies if the line graph should be placed behind column graphs
bulletStringnoneType of the bullets. Possible values are: "none", "round", "square", "triangleUp", "triangleDown", "bubble", "custom".
bulletAlphaNumber1Opacity of bullets. Value range is 0 - 1.
bulletBorderAlphaNumber1Bullet border opacity.
bulletBorderColorString Bullet border color. Will use lineColor if not set.
bulletBorderThicknessNumber2Bullet border thickness.
bulletColorString Bullet color. Will use lineColor if not set.
bulletFieldString Name of the bullet field in your dataProvider.
bulletOffsetNumber0Bullet offset. Distance from the actual data point to the bullet. Can be used to place custom bullets above the columns.
bulletSizeNumber8Bullet size.
bulletSizeFieldString Name of the bullet size field in your dataProvider.
closeFieldString Name of the close field (used by candlesticks and ohlc) in your dataProvider.
colorString Color of value labels. Will use chart's color if not set.
colorFieldString Name of the color field in your dataProvider.
connectBooleantrueSpecifies whether to connect data points if data is missing. The default value is true.
cornerRadiusTopNumber0Corner radius of column. It can be set both in pixels or in percents. The chart's depth and angle styles must be set to 0. The default value is 0. Note, cornerRadiusTop will be applied for all corners of the column, JavaScript charts do not have a possibility to set separate corner radius for top and bottom. As we want all the property names to be the same both on JS and Flex, we didn't change this too.
cursorBulletAlphaNumber1If bulletsEnabled of ChartCurosor is true, a bullet on each graph follows the cursor. You can set opacity of each graphs bullet. In case you want to disable these bullets for a certain graph, set opacity to 0.
customBulletString Path to the image of custom bullet.
customBulletFieldString Name of the custom bullet field in your dataProvider.
dashLengthNumber0Dash length. If you set it to a value greater than 0, the graph line will be dashed.
descriptionFieldString Name of the description field in your dataProvider.
fillAlphasNumber0Opacity of fill. Plural form is used to keep the same property names as our Flex charts'. Flex charts can accept array of numbers to generate gradients. Although you can set array here, only first value of this array will be used.
fillColorsString/Array Fill color. Will use lineColor if not set.
fillColorsFieldString Name of the fill colors field in your dataProvider.
fillToGraphAmGraphYou can set another graph here and if fillAlpha is >0, the area from this graph to fillToGraph will be filled (instead of filling the area to the X axis).
fontSizeNumber Size of value labels text. Will use chart's fontSize if not set.
gradientOrientationStringverticalOrientation of the gradient fills (only for "column" graph type). Possible values are "vertical" and "horizontal".
hiddenBooleanfalseSpecifies whether the graph is hidden. Do not use this to show/hide the graph, use hideGraph(graph) and showGraph(graph) methods instead.
hideBulletsCountNumber0If there are more data points than hideBulletsCount, the bullets will not be shown. 0 means the bullets will always be visible.
highFieldString Name of the high field (used by candlesticks and ohlc) in your dataProvider.
includeInMinMaxBooleantrueWhether to include this graph when calculating min and max value of the axis.
labelColorFieldStringName of label color field in data provider.
labelPositionStringtopPosition of value label. Possible values are: "bottom", "top", "right", "left", "inside", "middle". Sometimes position is changed by the chart, depending on a graph type, rotation, etc.
labelTextString Value label text. You can use tags like [[value]], [[description]], [[percents]], [[open]], [[category]].
legendAlphaNumber Legend marker opacity. Will use lineAlpha if not set. Value range is 0 - 1.
legendColorString Legend marker color. Will use lineColor if not set.
legendValueTextString Legend value text. You can use tags like [[value]], [[description]], [[percents]], [[open]], [[category]] You can also use custom fields from your dataProvider. If not set, uses Legend's valueText.
lineAlphaNumber1Opacity of the line (or column border). Value range is 0 - 1.
lineColorString Color of the line (or column border). If you do not set any, the color from [[AmCoordinateChart
lineColorFieldString Name of the line color field (used by columns and candlesticks only) in your dataProvider.
lineThicknessNumber1Specifies thickness of the graph line (or column border).
lowFieldString Name of the low field (used by candlesticks and ohlc) in your dataProvider.
markerTypeString Legend marker type. You can set legend marker (key) type for individual graphs. Possible values are: "square", "circle", "line", "dashedLine", "triangleUp", "triangleDown", "bubble".
maxBulletSizeNumber50Specifies size of the bullet which value is the biggest (XY chart).
minBulletSizeNumber0Specifies minimum size of the bullet (XY chart).
negativeBaseNumber0If you use different colors for your negative values, a graph below zero line is filled with negativeColor. With this property you can define a different base value at which colors should be changed to negative colors.
negativeFillAlphasNumber Fill opacity of negative part of the graph. Will use fillAlphas if not set.
negativeFillColorsString/Array Fill color of negative part of the graph. Will use fillColors if not set.
negativeLineColorString Color of the line (or column) when the values are negative. In case the graph type is candlestick or ohlc, negativeLineColor is used when close value is less then open value.
numberFormatterObject Example: {precision:-1, decimalSeparator:'.', thousandsSeparator:','}. The graph uses this object's values to format the numbers. Uses chart's numberFormatter if not defined.
openFieldString Name of the open field (used by floating columns, candlesticks and ohlc) in your dataProvider.
pointPositionStringmiddleSpecifies where data points should be placed - on the beginning of the period (day, hour, etc) or in the middle (only when parseDates property of categoryAxis is set to true). This setting affects Serial chart only. Possible values are "start" and "middle".
showAllValueLabelsBooleanfalseIf graph's type is column and labelText is set, graph hides labels which do not fit into the column's space. If you don't want these labels to be hidden, set this to true.
showBalloonBooleantrueSpecifies whether the value balloon of this graph is shown when mouse is over data item or chart's indicator is over some series.
showBalloonAtStringcloseSpecifies graphs value at which cursor is showed. This is only important for candlestick and ohlc charts, also if column chart has "open" value. Possible values are: "open", "close", "high", "low".
showHandOnHoverBooleanfalseIf you want mouse pointer to change to hand when hovering the graph, set this property to true.
stackableBooleantrueIf the value axis of this graph has stack types like "regular" or "100%" You can exclude this graph from stacking.
titleString Graph title.
typeStringlineType of the graph. Possible values are: "line", "column", "step", "smoothedLine", "candlestick", "ohlc". XY and Radar charts can only display "line" type graphs.
urlFieldString Name of the url field in your dataProvider.
urlTargetString Target to open URLs in, i.e. _blank, _top, etc.
valueAxisValueAxis Specifies which value axis the graph will use. Will use the first value axis if not set.
valueFieldString Name of the value field in your dataProvider.
visibleInLegendBooleantrueSpecifies whether this graph should be shown in the Legend.
xAxisValueAxis XY chart only. A horizontal value axis object to attach graph to.
xFieldString XY chart only. Name of the x field in your dataProvider.
yAxisValueAxis XY chart only. A vertical value axis object to attach graph to.
yFieldString XY chart only. Name of the y field in your dataProvider.

Methods

NameParametersReturnsDescription
hideBullets()Hides graph's bullets.
showBullets()Shows graph's bullets.

Events

AmGraph class does not have any events.