@progress/kendo-angular-charts
Version:
Kendo UI Charts for Angular - A comprehensive package for creating beautiful and interactive data visualization. Every chart type, stock charts, and sparklines are included.
545 lines (544 loc) • 27.1 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2024 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { drawing } from '@progress/kendo-drawing';
import { SeriesErrorBars } from './series-item/error-bars.interface';
import { SeriesExtremes } from './series-item/extremes.interface';
import { SeriesHighlight } from './series-item/highlight.interface';
import { SeriesLabels } from './series-item/labels.interface';
import { SeriesMarkers } from './series-item/markers.interface';
import { SeriesNotes } from './series-item/notes.interface';
import { SeriesOutliers } from './series-item/outliers.interface';
import { SeriesTooltip } from './series-item/tooltip.interface';
import { Border, BulletTarget, DashType, LabelConnectors, LegendItem, SeriesTrendline } from '../common/property-types';
import { Margin, NegativeBubbleValues, Overlay, SeriesLine, SeriesType, SeriesWhiskers } from '../common/property-types';
import { LineStyle, SeriesStack, SeriesVisualArgs } from '../common/property-types';
import { SeriesMedian } from '../field-types/series-median.interface';
import { SeriesPattern } from '@progress/kendo-charts';
/**
* The configuration options of the series.
*/
export interface Series {
/**
* The aggregate function for the date series.
* The function is used when a category (year, month, or other) contains two or more points.
* The Chart displays the return value of the function instead of the individual points.
* The `aggregate` option is supported for categorical chart axis only.
*
* The supported values are:
* - `"avg"`—The average of all values for the date period.
* - `"count"`—The number of values for the date period.
* - `"max"`—The highest value for the date period.
* - `"min"`—The lowest value for the date period.
* - `"sum"`—The sum of all values for the date period. Defaults to `0` if no data points are defined.
* - `"sumOrNull"`—The sum of all values for the date period. Defaults to `null` if no data points are
* defined.
* - `"first"`—The first value.
* - function (values, series, dataItems, category)—A user-defined aggregate function. Returns a single
* value or a data item.
* - object (compound aggregate)—Applicable to the Candlestick, Box Plot, and OHLC series.
* Specifies the aggregate for each data item field.
*/
aggregate?: any;
/**
* If set to `true`, the Chart automatically scales down to fit the content area.
* Applicable for the Pie and Donut series. ([See example](slug:donut_seriestypes_charts#displaying-labels-in-angular-donut-chart))
*/
autoFit?: boolean;
/**
* The name of the value axis.
* The axis option is supported for Scatter plots. For more information on Scatter plots, refer to
* [`xAxis`]({% slug api_charts_xaxis %}) and [`yAxis`]({% slug api_charts_yaxis %}).
*/
axis?: string;
/**
* The border of the Chart series.
* The border option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to
* `"bar"`, `"column"`, `"donut"`, `"pie"`, `"bubble"`, `"boxPlot"`, `"candlestick"`, or `"ohlc"`.
*/
border?: Border;
/**
* The name of the category axis that will be used for the series.
* If no [`categoryAxis`]({% slug api_charts_categoryaxis %}) is specified, the first axis is used.
*/
categoryAxis?: string;
/**
* The data item field which contains the category name or date.
* If the category is a date, the points are rendered in chronological order.
*/
categoryField?: string;
/**
* The data field that contains the `close` value.
* The `closeField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"candlestick"` or `"ohlc"`.
*/
closeField?: string;
/**
* The series base color.
*
* The supported values are CSS color string (including HEX and RGB) and function (point). The function, which is user-defined and evaluated for each point, assumes the default series color when it returns `undefined`.
*/
color?: any;
/**
* The data item field which contains the series color.
* The `colorField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type)
* is set to `"bar"`, `"column"`, `"rangeBar"`, `"rangeColumn"`, `"bubble"`, `"donut"`, `"pie"`, `"candlestick"`,
* `"ohlc"`, or `"waterfall"`.
*/
colorField?: string;
/**
* The label connectors options.
* The connectors option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"donut"` or `"pie"` and
* [`series.labels.visible`]({% slug api_charts_serieslabels %}#toc-visible) is set to `true`.
*/
connectors?: LabelConnectors;
/**
* The data item field which contains the current value.
* The `currentField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"bullet"` or `"verticalBullet"`.
*/
currentField?: string;
/**
* The dash type of line Chart.
* The `dashType` option is considered only if the [`series.type`]({% slug api_charts_series %}#toc-type) option is set to `"line"`.
*/
dashType?: DashType;
/**
* The array of data items which represent the series data.
*
* You can set it to:
* - Array of objects. Each point is bound to the field specified through the [`series.field`]({% slug api_charts_series %}#toc-field) option.
* - Array of numbers. Supported when the [`series.type`]({% slug api_charts_series %}#toc-type) option is set to `"area"`, `"bar"`, `"column"`, `"donut"`, `"pie"`, `"line"`, or `"waterfall"`.
* - Array of arrays of numbers. Supported when the [`series.type`]({% slug api_charts_series %}#toc-type) option is set to `"bubble"`, `"scatter"`, `"scatterLine"`, `"ohlc"`, `"polar"`, `"rangeBar"`, or `"rangeArea"`.
*
* The Bubble series need arrays of three values—X value, Y value, and Size value—for example, `[1, 1, 10]`.
*
* The Scatter and ScatterLine series need arrays of two values—X value and Y value.
*
* The OHLC and Candlestick series need arrays of four values—open, high, low, and close.
*
* The RangeBar and RangeArea series need arrays of two values—the from and to value.
*/
data?: any[];
/**
* The series color when the open value is greater than the close value.
* The `downColor` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"candlestick"`.
*/
downColor?: string;
/**
* The data field which contains the color that is applied when the `open` value is greater than the `close` value.
* The `downColorField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"candlestick"`.
*/
downColorField?: string;
/**
* The data field which contains the value to use to [drill down]({% slug drilldown_chart_charts %}) into detailed data for the point.
*/
drilldownField?: string;
/**
* The `dynamicHeight` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"funnel"` or `"pyramid"`.
* When set to `false`, all segments become with the same height.
* Otherwise, the height of each segment is based on its value.
*/
dynamicHeight?: boolean;
/**
* The `dynamicSlope` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"funnel"`.
* When set to `true`, the ratio of the bases of each segment is calculated based on the ratio of
* `currentDataItem.value`/`nextDataItem.value`.
* The last element is always created like a rectangle since there is no following element.
*/
dynamicSlope?: boolean;
/**
* The data item field which contains the [`series.errorBars`]({% slug api_charts_series %}#toc-errorbars) high value.
* The `errorHighField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"bar"`, `"column"`, `"line"`, or `"area"`.
*/
errorHighField?: string;
/**
* The data item field which contains the [`series.errorBars`]({% slug api_charts_series %}#toc-errorbars) low value.
* The `errorLowField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"bar"`, `"column"`, `"line"`, or `"area"`.
*/
errorLowField?: string;
/**
* The data item field which contains a Boolean value indicating whether the sector is exploded.
* The `explodeField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"donut"` or `"pie"`.
*/
explodeField?: string;
/**
* The data item field which contains the series value.
*/
field?: string;
/**
* The name of the parent series of the trendline.
*
* The `for` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to
* "`linearTrendline`", "`exponentialTrendline`", "`logarithmicTrendline`", "`powerTrendline`", "`polynomialTrendline`" or "`movingAverageTrendline`".
*/
for?: string;
/**
* The data item field which contains the series from value.
*/
fromField?: string;
/**
* The distance between the categories expressed as a percentage of the bar width.
* See the related spacing setting.
* The `gap` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"bar"`, `"column"`, `"candlestick"`, `"ohlc"`,
* `"radarColumn"`, or `"waterfall"`.
*/
gap?: number;
/**
* The data field which contains the high value.
* The `highField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"candlestick"` or `"ohlc"`.
*/
highField?: string;
/**
* The diameter of the donut hole in pixels.
* The `holeSize` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"donut"`.
*/
holeSize?: number;
/**
* The Chart line configuration options.
* The line option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"area"`, `"candlestick"`, `"ohlc"`, or
* `"waterfall"`.
*/
line?: SeriesLine;
/**
* The data field containing the low value.
* The `lowField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"candlestick"` or `"ohlc"`.
*/
lowField?: string;
/**
* The data item field which contains the series lower value.
* The `lowerField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"boxPlot"`.
*/
lowerField?: string;
/**
* The margin around each donut series (ring). A numeric value sets all margins.
*/
margin?: Margin | number;
/**
* The maximum size of the Chart bubble series marker.
*/
maxSize?: number;
/**
* The configuration of the mean value indicator (line) for [Box Plot series]({% slug boxplot_seriestypes_charts %}).
* The `mean` option is not supported by other series types.
*/
mean?: SeriesMedian;
/**
* The data item field which contains the series mean value.
* The `meanField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"boxPlot"`.
*/
meanField?: string;
/**
* The configuration of the median value indicator (line) for [Box Plot series]({% slug boxplot_seriestypes_charts %}).
* The `median` option is not supported by other series types.
*/
median?: SeriesMedian;
/**
* The data item field which contains the series median value.
* The `medianField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"boxPlot"`.
*/
medianField?: string;
/**
* The minimum size of the Chart bubble series marker.
*/
minSize?: number;
/**
* The behavior for handling missing values.
* The `missingValues` option is available when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"area"`, `"rangeArea"`, `"line"`, `"scatterLine"`,
* `"radarLine"`, `"radarArea"`, `"polarLine"`, or `"polarArea"`.
*
* The supported values are:
* - `"gap"`—The plot stops before the missing point and continues after it.
* - `"interpolate"`—The value is interpolated from neighboring points. Represents the default value for all series except for the `"area"` and stacked series. Area and stacked series default to `"zero"`.
* - `"zero"`—The value is assumed to be zero.
*/
missingValues?: 'gap' | 'interpolate' | 'zero';
/**
* The name of the Chart series which is visible in the legend.
*/
name?: string;
/**
* Specifies the top-base/bottom-base ratio of the whole Funnel Chart. If the `neckRatio` is set to `3`,
* it means the top base is three times smaller than the bottom base.
* The `neckRatio` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"funnel"` and `dynamicSlope` is set to `false`.
*/
neckRatio?: number;
/**
* The color to use for the Bar, Column, or Waterfall series with negative values.
* Accepts a valid CSS color string, including HEX and RGB.
*/
negativeColor?: string;
/**
* The options for displaying the Chart negative bubble values.
*/
negativeValues?: NegativeBubbleValues;
/**
* The data item field which contains the series note text.
*/
noteTextField?: string;
/**
* The opacity of the series. By default, the series are opaque.
*/
opacity?: number;
/**
* The data field which contains the open value.
* The `openField` option is available when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"candlestick"` or `"ohlc"`.
*/
openField?: string;
/**
* The data item field which contains the series outliers value.
* The `outliersField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"boxPlot"`.
*/
outliersField?: string;
/**
* The overlay options of the Chart series.
*/
overlay?: Overlay;
/**
* The padding around the Chart (equal on all sides).
* The padding option is available when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"donut"` or `"pie"`.
*/
padding?: number;
/**
* The data item field which contains the series `q1` value.
* The `q1Field` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"boxPlot"`.
*/
q1Field?: string;
/**
* The data item field which contains the series `q3` value.
* The `q3Field` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"boxPlot"`.
*/
q3Field?: string;
/**
* The space in pixels between the different segments of the Funnel or Pyramid Chart.
* The `segmentSpacing` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"funnel"` or `"pyramid"`.
*/
segmentSpacing?: number;
/**
* The radius of the Chart Donut series in pixels. If not set, the available space is split evenly
* between the series.
*/
size?: number;
/**
* The data field which contains the bubble size value.
*/
sizeField?: string;
/**
* The distance between series points within a category. Expressed as a percentage of the bar width.
* See the related `gap` setting.
* The spacing option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"bar"`, `"column"`, `"candlestick"`, `"ohlc"`, or
* `"radarColumn"`.
*/
spacing?: number;
/**
* A Boolean value which indicates if the series have to be stacked.
* A string value is interpreted as [`series.stack.group`]({% slug api_charts_seriesstack %}#toc-group).
*
* The `stack` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"bar"`, `"column"`, `"line"`, `"area"`,
* `"verticalLine"`, `"verticalArea"`, `"radarLine"`, `"radarArea"`, and `"radarColumn"`.
* If not overridden, the stack settings of the first series are inherited as a default value by the rest of the series.
*/
stack?: boolean | string | SeriesStack;
/**
* The start angle (in degrees) of the first Donut or Pie segment.
* Angles increase clockwise with zero to the left. Negative values are acceptable.
*/
startAngle?: number;
/**
* The `style` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to
* `"line"`, `"scatterLine"`, `"radarLine"`, or `"polarLine"`.
*/
style?: LineStyle;
/**
* The data item field which contains the summary type for the Waterfall series.
* The value (if any) of a data item marked as a summary point will be discarded.
*
* Summary columns are optional and can be one of two types:
*
* `"runningTotal"`—Displays the sum of all items since the last `"runningTotal"` point.
* `"total"`—Displays the sum of all previous items.
*/
summaryField?: string;
/**
* The configuration options of the target.
* The `target` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"bullet"` or `"verticalBullet"`.
*/
target?: BulletTarget;
/**
* The data item field which contains the series to value.
*/
toField?: string;
/**
* The type of the series.
*/
type?: SeriesType;
/**
* The data item field which contains the series upper value.
* The `upperField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"boxPlot"`.
*/
upperField?: string;
/**
* Sets the visible property of a Chart series.
*/
visible?: boolean;
/**
* A value which indicates whether to show the point category (for Funnel, Pyramid, Donut, and Pie series)
* or the series name (for other available series types) in the legend.
*/
visibleInLegend?: boolean;
/**
* The data item field which indicates whether to show the point category name in the legend.
* The `visibleInLegendField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"funnel"`, `"pyramid"`, `"donut"`, or `"pie"`.
*/
visibleInLegendField?: string;
/**
* A function that can be used to create a custom visual for the points. Applicable for the Bar, Column,
* Pie, Donut, Funnel, Pyramid, Range Bar, Range Column, Line, ScatterLine, and Waterfall series.
*
* The available argument fields are:
*
* - `rect`—The geometry [`Rect`]({% slug api_kendo-drawing_geometry_rect %}) that defines where the visual has to be rendered.
* - `options`—The point options.
* - `createVisual`—A function that can be used to get the default visual.
* - `category`—The point category.
* - `dataItem`—The point `dataItem`.
* - `value`—The point value.
* - `stackValue`—The cumulative point value on the stack. Available only for the stackable series.
* - `sender`—The Chart instance.
* - `series`—The point series.
* - `percentage`—The point value represented as a percentage value. Available only for the Donut, Pie, and 100% Stacked Charts.
* - `runningTotal`—The sum of point values since the last `"runningTotal"` summary point. Available for the Waterfall series.
* - `total`—The sum of all previous series values. Available for the Waterfall series.
* - `radius`—The segment radius. Available for the Donut and Pie series.
* - `innerRadius`—The segment inner radius. Available for the Donut series.
* - `startAngle`—The segment start angle. Available for the Donut and Pie series.
* - `endAngle`—The segment end angle. Available for the Donut and Pie series.
* - `center`—The segment center point. Available for the Donut and Pie series.
* - `points`—The segment points. Available for the Funnel and Pyramid series.
*/
visual?: (e: SeriesVisualArgs) => drawing.Element;
/**
* The line width.
* The `width` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"line"`, `"scatterLine"`, `"radarLine"`, or
* `"polarLine"`.
*/
width?: number;
/**
* The name of the X axis.
* The [`xAxis`]({% slug api_charts_xaxis %}) option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"bubble"`, `"scatter"`, `"scatterLine"`, or `"polar"` series.
* For the Polar series, the [`xAxis`]({% slug api_charts_xaxis %}) range is expressed in degrees.
*/
xAxis?: string;
/**
* The data item field which contains the [`series.errorBars`]({% slug api_charts_series %}#toc-errorbars) xAxis high value.
* The `xErrorHighField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"scatter"``, `"scatterLine"`, or
* `"bubble"`.
*/
xErrorHighField?: string;
/**
* The data item field which contains the [`series.errorBars`]({% slug api_charts_series %}#toc-errorbars) xAxis low value.
* The `xErrorLowField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"scatter"`, `"scatterLine"`, or
* `"bubble"`.
*/
xErrorLowField?: string;
/**
* The data item field containing the x value.
* The `xField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"bubble"`, `"scatter"`, `"scatterLine"`, or
* `"polar"` series.
*/
xField?: string;
/**
* The name of the Y axis to use.
* Available for the Bubble, Scatter, Scatter Line, and Polar series.
*/
yAxis?: string;
/**
* The data item field which contains the [`series.errorBars`]({% slug api_charts_series %}#toc-errorbars) yAxis high value.
* The `yErrorHighField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"scatter"`, `"scatterLine"`, or
* `"bubble"`.
*/
yErrorHighField?: string;
/**
* The data item field which contains the [`series.errorBars`]({% slug api_charts_series %}#toc-errorbars) yAxis low value.
* The `yErrorLowField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"scatter"`, `"scatterLine"`, or
* `"bubble"`.
*/
yErrorLowField?: string;
/**
* The data item field containing the y value.
* The `yField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"bubble"`, `"scatter"`, or `"scatterLine"`.
*/
yField?: string;
/**
* An optional Z-index that can be used to change the default stacking order of series.
* The series with the highest Z-index are placed on top.
* Series with no Z-index use the default stacking order based on the series type.
* For example, Line series will be on top with the Bar and Area following after.
*/
zIndex?: number;
/**
* The error bars of the Chart series.
* The `errorBars` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"bar"`, `"column"`, `"line"`, `"area"`,
* `"scatter"`, `"scatterLine"`, or `"bubble"`.
*/
errorBars?: SeriesErrorBars;
/**
* The configuration of the Chart series extremes. Applies to extreme outliers.
* The `extremes` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"boxPlot"`.
*/
extremes?: SeriesExtremes;
/**
* The configuration of the Chart series highlight.
*/
highlight?: SeriesHighlight;
/**
* The configuration of the Chart series label.
* The Chart displays the series labels when the [`series.labels.visible`]({% slug api_charts_serieslabels %}#toc-visible) option is set to `true`.
*/
labels?: SeriesLabels;
/**
* The configuration of the Chart series marker.
* The Chart displays the series labels when the [`series.markers.visible`]({% slug api_charts_seriesmarkers %}#toc-visible) option is set to `true`.
* The markers option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"area"`, `"rangeArea"`, `"line"`, `"scatter"`, `"scatterLine"`,
* `"radarLine"`, `"radarArea"`, `"polarLine"`, `"polarScatter"`, or `"polarArea"`.
*/
markers?: SeriesMarkers;
/**
* The configuration of the Chart legend item.
* By default, the Legend item type and markers are inherited from the series.
*/
legendItem?: LegendItem;
/**
* The configuration of the series notes.
*/
notes?: SeriesNotes;
/**
* The configuration of the Chart series outliers. Applies to mild outliers.
* The `outliers` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"boxPlot"`.
*/
outliers?: SeriesOutliers;
/**
* The configuration options of the Chart series tooltip.
*/
tooltip?: SeriesTooltip;
/**
* The trendline configuration options.
*
* The `trendline` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to
* "`linearTrendline`", "`exponentialTrendline`", "`logarithmicTrendline`", "`powerTrendline`", "`polynomialTrendline`" or "`movingAverageTrendline`".
*/
trendline?: SeriesTrendline;
/**
* The configuration of the whiskers for the Chart series.
* The `whiskers` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"boxPlot"`.
*/
whiskers?: SeriesWhiskers;
/**
* The configuration options of the series pattern.
*/
pattern?: SeriesPattern | ((point: any) => SeriesPattern);
/**
* The data item field which contains the series pattern.
* The `patternField` option is supported when [`series.type`]({% slug api_charts_series %}#toc-type) is set to `"pie"`, `"donut"`, `"funnel"`, `"heatmap"`, or `"pyramid"`.
*/
patternField?: string;
}