Vue Chart - FullStackedAreaSeries.label
Each series point can be accompanied by a text label that represents data related to the point. These are called series point labels. Use the label object's properties to set label options for all chart series at once.
Specify the label object's properties within the commonSeriesSettings configuration object to set label options for all chart series at once.
If you have several series of a single type, you can set label options to the values specific to this series type using the corresponding object (area, line, etc.) within the commonSeriesSettings configuration object. The values that are set within series-type-specific configuration objects override the corresponding common values.
If you need to set a label option for an individual series, use the label object within the series object of the series array. The values that are set individually override the corresponding common values.
alignment
When using the widget as an ASP.NET MVC Control, specify this option using the HorizontalAlignment
enum. This enum accepts the following values: Left
, Center
and Right
.
argumentFormat
Formats the point argument before it is displayed in the point label. To format the point value, use the format option.
A point label displays only the point value by default. Using the label.customizeText option, you can instruct the label to display the point argument as well. The argumentFormat option applies in this case only. This option accepts an object whose fields are described in the format section.
See Also
- format - provides a comprehensive overview of formatting capabilities.
- Data Formatting - shows how to apply formatting to various widget elements.
argumentPrecision
Use the series.label.argumentFormat.precision instead.
backgroundColor
This option supports the following colors:
- Hexadecimal colors
- RGB colors
- RGBA colors
- Predefined/cross-browser color names
- Predefined SVG colors
You can remove the label's background by setting this option to "none". In this case, the label's text is the same color as the point.
customizeText
This option accepts a function whose parameter exposes the following fields.
Field | Description |
---|---|
originalValue | The raw value of the point. |
value | The originalValue after type cast. |
valueText | The value with an applied format and converted to string. |
originalArgument | The raw argument of the point. |
argument | The originalArgument after type cast. |
argumentText | The argument with an applied format and converted to string. |
percent | The percentage value of the point. |
percentText | The percent with an applied format and converted to string. |
total | The sum of all values in the stack. |
totalText | The total with an applied format and converted to string. |
point | The Point object. |
seriesName | The name of the series to which the point belongs. |
this
keyword.See Also
format
This option accepts an object whose fields are described in the format section. However, there is one more field, called percentPrecision, which is available only to full-stacked-like series, where one point always has an absolute and a percentage value. The percentPrecision field specifies how many digits after the decimal point to save in the percentage value. See an example in the following code.
format: { type: "fixedPoint", // the format of absolute values precision: 1, // the precision of absolute values (123.456 --> 123.4) percentPrecision: 2 // the precision of percentage values (12.3456 % --> 12.34 %) }
See Also
- format - provides a comprehensive overview of formatting capabilities.
- Data Formatting - shows how to apply formatting to various widget elements.
percentPrecision
Use the series.label.format.percentPrecision instead.
Specifies a precision for the percentage values displayed in the labels of a full-stacked-like series.
If you have technical questions, please create a support ticket in the DevExpress Support Center.