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 |