Chart Elements Overview
The Angular Charts Components consist of several basic structural elements that you can configure and customize separately.
All Chart elements have default styles that depend on the used component theme. You can override these defaults by applying a custom configuration.
This article lists only the core elements of the Chart. The component has a rich set of features and many of them are not featured here. Review the rest of the documentation for more details and examples.
Main Chart Elements
-
Chart Area—This is the main panel of the Chart on which everything else is placed, including the PlotArea with the series and axes, Chart title and legend. Using the Chart area allows you to apply properties to the entire Chart, for example, to set the background color of the Chart.
-
Chart Title —The Chart title is the global title of the Chart and you configure it to also show a subtitle.
-
Legend—The Chart legend lists series names (or category names in the case of a Pie Chart) along with a symbol that indicates their color in the Chart. To control the background color, position (left, right, top, or bottom), and visibility of the legend, you can set its properties. Hovering a mouse over or clicking on the series name in the Chart legend will highlight and toggle the visibility of the series.
-
Plot Area—The chart gets rendered in the plot area, which includes the series with their labels plus the axes along with their labels and titles.
Series Elements
-
Series—This is the visualization that is defined by the type of the series. For Bar and Column charts, the series consists of several rectangles that correspond to the series data points; for the Scatter chart, the series is the markers that represents the series data points, and so on.
-
Series Point—This is the unit of data that is passed to the series. A series point represents the value of the chart series:
-
At the given point for numeric series (such as, Scatter, ScatterLine and Bubble).
-
For the given x-axis item for category series (such as, Area, Bar, Column, Line, and so on). For line charts, series points define the spots through which the line passes.
-
-
Series Point Label—This is the text next to each series point that shows the value it holds. You can modify this label with a format string to show a pattern related to this value.
-
Series Point Tooltip—The tooltip is shown only when the mouse hovers over a series point, which is why it is not present in the image above. It consists of a rectangle with the series' color (or the color predefined by the developer) and the point's value (plus format string) inside.
Axis Elements
-
Axis—The actual axis of the Chart. An axis is a single line whose color and width can be changed if the default values do not match the needs of the developer.
-
Ticks—Small marks on the axis that define axis values (or divisions) and are also starting points for the grid lines.
-
Grid Lines—Lines that are parallel to the axes to aid readability of the values. There are two types of grid lines: major (usually thicker and spaced further from each other) and minor (usually thinner and with lighter color and closer together).
-
Axis Label—An axis label is text that corresponds to each division on a category x-axis. An axis label shows a string defined in the data source. In the case of a numeric axis, the values are calculated by the Chart and the developer can set a particular format string to them.
-
Axis Title—An axis title shows the title of the entire axis. A developer uses an axis title to show what the axis corresponds to or the unit of measurement.
