Knowledge Base

CSS class names of visual chart elements

Since version 3.12.0 you can enable CSS class names on virtually any internal chart or map object: line, fill, column, bullet, plot area, balloon, legend label, you name it.

You just need to set the addClassNames property to true.

This enables you to manipulate the appearance of virtually any chart item by apply CSS styles.

Below table reflects the names and hierarchy of the classes that are applied to objects.

Class name Element & Comment Type Docs
amcharts-bg background <path> backgroundColor
amcharts-title title <text> titles
amcharts-title-[id] title with title id, if it is set <text> titles
amcharts-label label <text> allLabels
amcharts-label-[id] label with label id, if it is set <text> allLabels
amcharts-main-div div which contains both chart and legend <div> write or makeChart
amcharts-chart-div div which contains chart <div> write or makeChart
amcharts-plot-area background of plot area <path> backgroundColor
amcharts-plot-area-left left side of plot area (only if chart is 3D) <path> backgroundColor
amcharts-plot-area-bottom bottom side of plot area (only if chart is 3D) <path> backgroundColor
amcharts-zoom-out-bg background of zoom-out button <path> zoomOutButtonColor
amcharts-zoom-out-label label of zoom-out button <text> zoomOutText
amcharts-zoom-out-image image of zoom-out button <image> zoomOutButtonImage
amcharts-legend-div div which contains legend <div> divId
amcharts-legend-bg background <path> backgroundColor
amcharts-legend-title title of a legend (used in stock chart only) <text> labelText
amcharts-legend-item-[id] legend item, added if graph has id. It contains all the other elements of legend item. <g> labelText
[custom-class] legend item, added if slice or graph has customClass set. It contains all the other elements of legend item. <g> labelText
amcharts-legend-marker marker of a legend <path>, <circle>, <image> or <rect> markerType
amcharts-legend-label label of a legend item <text> labelText
amcharts-legend-value value text of a legend item <text> valueText
amcharts-legend-switch marker switch which shows if an item is turned on or off <path> switchType
amcharts-pie-item pie item which holds all elements of a slice, set if a classNameField is set on chart and data provider has class names <g> Slice
[custom-class] pie item which holds all elements of a slice, set if a classNameField is set on chart and data provider has class names <g> Slice
amcharts-pie-slice slice of a pie <path> Slice
amcharts-pie-label label of a pie <text> labelText
amcharts-pie-tick tick from slice to label <path> labelTickAlpha
amcharts-funnel-item funnel item which holds all elements of a slice, set if a classNameField is set on chart and data provider has class names <g> Slice
[custom-class] funnel item which holds all elements of a slice, set if a classNameField is set on chart and data provider has class names <g> Slice
amcharts-funnel-slice slice of a funnel <path> Slice
amcharts-funnel-label label of a funnel <text> labelText
amcharts-funnel-tick tick from slice to label <path> labelTickAlpha
amcharts-gauge-arrow gauge arrow. It contains both elements of an arrow – arrow itself and a “nail” at the root of an arrow <g> GaugeArrow
amcharts-gauge-arrow-[id] gauge arrow. It contains both elements of an arrow – arrow itself and a “nail” at the root of an arrow <g> GaugeArrow
amcharts-nail circle at the root of an arrow <circle> nailAlpha
amcharts-arrow arrow of gauge <path> GaugeArrow
amcharts-gauge-axis gauge axis. It contains all elements of an axis <g> GaugeAxis
amcharts-gauge-axis-[id] gauge axis. It contains all elements of an axis <g> GaugeAxis
amcharts-axis-line line (arc) of an axis <path> axisAlpha
amcharts-axis-top-label top label of gauge axis <text> topText
amcharts-axis-bottom-label bottom label of gauge axis <text> bottomText
amcharts-axis-label value label of gauge axis <text> labelFunction
amcharts-axis-band color band of gauge axis <path> GaugeBand
amcharts-axis-band-[id] color band of gauge axis <path> GaugeBand
amcharts-axis-tick tick of gauge axis <path> tickAlpha
amcharts-axis-tick-minor minor tick of gauge axis <path> minorTickInterval
amcharts-category-axis category axis container which contains all elements of axis, including guides <g> CategoryAxis
amcharts-value-axis value axis container which contains all elements of value axis, including value axis guides <g> ValueAxis
amcharts-value-axis-[id] value axis container which contains all elements of value axis, including value axis guides <g> ValueAxis
amcharts-axis-grid axis grid line <path> gridAlpha
amcharts-axis-tick axis tick <path> tickLength
amcharts-axis-fill fill between grid lines <path> fillAlpha
amcharts-axis-label axis label <text> labelsEnabled
amcharts-axis-title axis title <text> title
amcharts-zero-grid rectangular charts only. Grid line at zero value <path> baseValue
amcharts-zero-grid-[id] rectangular charts only. Grid line at zero value. id is id of an axis. <path> baseValue
[custom-class] custom class will be added to all elements of a axis item – tick, label, grid and fill, if it’s serial chart with non-date-based data and classNameField is set for category axis and you have class name specified in your data. <path> or <text> AxisBase
amcharts-guide-fill fill between guides <path> Guide
amcharts-guide-fill-[id] fill between guides, id is id of a guide. <path> Guide
amcharts-guide added to all elements of a guide – tick, grid, label (together with default tick, grid and label classes) <path> or <text> Guide
amcharts-guide-[id] added to all elements of a guide – tick, grid, label (together with default tick, grid and label classes). id is id of a guide. <path> or <text> Guide
amcharts-trend-line trend line <path> TrendLine
amcharts-trend-line-[id] trend line, id is id of a trend line <path> TrendLine
amcharts-balloon-bg background of a balloon <path> AmBalloon
amcharts-balloon-bg-[id] background of a balloon, id is id of a graph or axis <path> AmBalloon
amcharts-balloon-div balloon content div <div> AmBalloon
amcharts-balloon-div-[id] balloon content div, id is id of a graph or axis <div> AmBalloon
amcharts-cursor-line line of a cursor <path> ChartCursor
amcharts-cursor-fill fill of a cursor (when fullWidth is true) <path> ChartCursor
amcharts-cursor-value-line value line of a cursor <path> cursorAlpha
amcharts-cursor-selection selected rectangle <path> selectionAlpha
amcharts-scrollbar-horizontal Group of horizontal chart scrollbar <g> ChartScrollbar
amcharts-scrollbar-vertical Group of vertical chart scrollbar <g> ChartScrollbar
amcharts-scrollbar-bg background of a scrollbar <g> ChartScrollbar
amcharts-scrollbar-grip-left image of left grip <image> hideResizeGrips
amcharts-scrollbar-grip-right image of right grip <image> hideResizeGrips
amcharts-graph-[type] container of all graph elements <g> AmGraph
amcharts-graph-[id] container of all graph elements <g> AmGraph
amcharts-graph-stroke stroke element of line, smoothedLine, step and ohlc vertical part. <path> lineAlpha
amcharts-graph-fill fill of area graphs. Note, graph.fillAlphas must be set to >0 in order this element to be drawn <path> fillAlphas
amcharts-graph-stroke-negative negative part of line, smoothedLine and step graphs, drawn only if graph.negativeLineColor is set. <path> negativeLineAlpha
amcharts-graph-fill-negative negative part of area graphs, drawn only if graph.negativeLineColor is set. <path> negativeFillAlphas
amcharts-graph-column-element all elements from which column is made (both 2D and 3D), used by column and candlestick graphs <path> AmGraph
amcharts-graph-column-front front side of column (the only one if the chart is 2D) <path> AmGraph
amcharts-graph-column-back back side of column <path> AmGraph
amcharts-graph-column-top top side of column <path> AmGraph
amcharts-graph-column-bottom bottom side of column <path> AmGraph
amcharts-graph-column-left left side of column <path> AmGraph
amcharts-graph-column-right right side of column <path> AmGraph
amcharts-graph-stroke-open open line of ohlc graph <path> AmGraph
amcharts-graph-stroke-close close line of ohlc graph <path> AmGraph
amcharts-graph-stroke-high high line of candlestick graph <path> AmGraph
amcharts-graph-stroke-low low line of candlestick graph <path> AmGraph
amcharts-graph-bullet bullet of a graph <path> bullet
amcharts-graph-label label of a graph <text> labelText
amcharts-graph-label-total total label of a graph <text> totalText
[custom-class] custom class will be added to a bullet if classNameField is set for this graph and you have class name specified in your data. <path> AmGraph
amcharts-stock-div div which holds all the elements of stock chart <div> AmStockChart
amcharts-left-div div which holds all left-side elements <div> AmStockChart
amcharts-right-div div which holds all right-side elements <div> AmStockChart
amcharts-center-div div which holds all center elements – panels and scrollbar chart <div> AmStockChart
amcharts-scrollbar-chart-div div which holdsscrollbar chart <div> AmStockChart
amcharts-panels-div div which holds all panels <div> StockPanel
amcharts-stock-panel-div div of a panel <div> StockPanel
amcharts-stock-panel-div-[id] div of a panel <div> StockPanel
amcharts-data-set-selector-div div of data set selector <div> DataSetSelector
amcharts-data-set-select data set select <select> DataSetSelector
amcharts-data-set-select-option data set select option <option> DataSetSelector
amcharts-compare-div data set compare div <div> DataSetSelector
amcharts-compare-item-div data set compare div’s single element <div> DataSetSelector
amcharts-period-selector-div div of period selector <div> PeriodSelector
amcharts-start-date-input input field of start date <input> PeriodSelector
amcharts-end-date-input input field of end date <input> PeriodSelector
amcharts-period-input predefined period button <input> PeriodSelector
amcharts-period-input-selected predefined period button selected state <input> PeriodSelector
amcharts-drawing-tools container which holds drawing icons <g> StockPanel
amcharts-pencil pencil image of drawing icons <image> StockPanel
amcharts-pencil-selected pencil image of drawing icons, selected state <image> StockPanel
amcharts-eraser eraser image of drawing icons <image> StockPanel
amcharts-eraser-selected eraser image of drawing icons, selected state <image> StockPanel
amcharts-map-area-unlisted map area not listed in data provider <path> MapObject
amcharts-map-area map area <path> MapArea
amcharts-map-area-[id] map area <path> MapArea
amcharts-map-line map line <path> MapLine
amcharts-map-line-[id] map line <path> MapLine
amcharts-map-image map image <path> MapImage
amcharts-map-image-[id] map image <path> MapImage
amcharts-map-image-label map image label <text> MapImage
amcharts-map-image-label-[id] map image label <text> MapImage
amcharts-zoom-control container which holds zoom control and pan control elements <g> ZoomControl
amcharts-zoom-control-zoom container which holds zoom control elements <g> ZoomControl
amcharts-zoom-bg background of zoom-control <rect> ZoomControl
amcharts-zoom-grid grid lines of zoom-control <path> ZoomControl
amcharts-zoom-out zoom-out button <g> ZoomControl
amcharts-zoom-in zoom-in button <g> ZoomControl
amcharts-zoom-dragger dragger of a zoom control <g> ZoomControl
amcharts-zoom-control-pan container which holds pan control elements <g> ZoomControl
amcharts-pan-left left button <g> ZoomControl
amcharts-pan-right right button <g> ZoomControl
amcharts-pan-top top button <g> ZoomControl
amcharts-pan-bottom bottom button <g> ZoomControl
amcharts-pan-home home button <g> ZoomControl
amcharts-small-map container which holds small map elements <g> SmallMap
amcharts-small-map-bg background of small map <rect> SmallMap
amcharts-small-map-image map of small map <g> SmallMap
amcharts-small-map-rectangle rectangle, showing selected area on small map <rect> SmallMap
amcharts-small-map-down button to minimize small map <g> SmallMap
amcharts-small-map-up button to maximize small map <g> SmallMap
amcharts-value-legend container which holds value legend elements <g> AmLegend
amcharts-value-legend-min-label value legend minimum label <text> AmLegend
amcharts-value-legend-max-label value legend maximum label <text> AmLegend
amcharts-value-legend-color color element of value legend <rect> AmLegend
amcharts-value-legend-color-[num] color element of value legend <rect> AmLegend
amcharts-value-legend-gradient color gradient of value legend <rect> AmLegend
amcharts-object-list-div div which holds object list <div> ObjectList
amcharts-object-list-ul ul element of object list <ul> ObjectList
amcharts-object-list-li li element of object list <li> ObjectList
amcharts-object-list-a a element of object list <a> ObjectList
amcharts-description-div div which holds description window <div> description
amcharts-description-close-img close button image <div> description
amcharts-description-title-div description window title div <div> description
amcharts-description-text-div description window text (content) div <div> description