ChartSeriesItem
Directive
kendo-chart-series-item
Parent Components
Props
aggregate String | Function
The aggregate function that will apply for the date series. The aggregate
function is used when a category, such as a year, month, or other, contains two or more points. The returned value of the function is displayed instead of the individual points.
The supported values are:
avg
—The average of all values for the date period.count
—The number of values for the date period.max
—Te highest value for the date period.min
—The lowest value for the date period.sum
—The sum of all values for the date period. If no data points are defined, defaults to0
.sumOrNull
—The sum of all values for the date period. If no data points are defined, defaults tonull
.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 tocandlestick
,boxPlot
, and ohlcseries
. Specifies the aggregate for each data item field.
axis String
The name of the value axis that will be used.
border-color String | Function
The color of the border. Accepts any valid CSS color string, including hex and rgb. By default, border-color
is set to color of the current series.
border-dash-type String | Function
The dash type of the border.
The supported dash types are:
dash
—A line that consists of dashes.dashDot
—A line that consists of a repeating dash-dot pattern.dot
—A line that consists of dots.longDash
—A line that consists of a repeating long-dash pattern.longDashDot
—A line that consists of a repeating long-dash-dot pattern.longDashDotDot
—A line that consists of a repeating long-dash-dot-dot.solid
—A solid line.
border-opacity Number | Function
The opacity of the border. By default, the border is opaque.
border-width Number | Function
The width (in pixels) of the border.
category-axis String
The name of the category axis that will be uses for the series. If no categoryAxis
is specified, the first axis will be used.
category-field String
The data item field which contains the category name or date.
close-field String
The data field which contains the close
value.
color String | Function
The series base color.
The supported values are:
- A CSS color string, including hex and rgb.
- A function (point)—A user-defined function that will be evaluated for each point. If the return value is
undefined
, it will assume the default series color.
color-field String
The data item field which contains the series color.
connectors-color String | Function
The color of the connector. Accepts any valid CSS color string, including hex and rgb.
connectors-padding Number
The padding between the connector line and the label, and the connector line and the Donut Chart.
connectors-width Number
The width of the connector line.
current-field String
The data item field which contains the current value.
dash-type String
The dash type of the Line Chart.
The supported dash types are:
dash
—A line that consists of dashes.dashDot
—A line that consists of a repeating dash-dot pattern.dot
—A line that consists of dots.longDash
—A line that consists of a repeating long-dash pattern.longDashDot
—A line that consists of a repeating long-dash-dot pattern.longDashDotDot
—A line that consists of a repeating long-dash-dot-dot.solid
—A solid line.
data Array
The array of data items which represent the series data.
The supported settings are:
- An array of objects—each point is bound to the field which is specified through the
series.field
option. - An array of numbers—Supported when the
series.type
option is set toarea
,bar
,column
,donut
,pie
,line
, orwaterfall
. - An array of arrays of numbers—Supported when the
series.type
option is set tobubble
,scatter
,scatterLine
,ohlc
,rangeBar
,rangeArea
, or polar series. Bubble series need arrays of an X value, a Y value and aSize
value—for example,[1, 1, 10]
. Scatter and Scatter Line series need arrays of an X value and a Y values. OHLC and Candlestick series need arrays of an open, high, low, andcloseRangeBar
. Range Area series need arrays of afrom
andto
value.
down-color String | Function
The series color when the open
value is greater than the close
value.
down-color-field String
The data field which contains the color that is applied when the open
value is greater than the close
value.
segment-spacing Number
The space (in pixels) between the different segments of the Funnel Chart.
summary-field String
The data item field which contains the summary type for the Waterfall series. The summary columns are optional.
The supported types are:
runningTotal
—Displays the sum of all items since the lastrunningTotal
point.total
—Displays the sum of all previous items.
neck-ratio Number
Specifies the ratio between the top base and the bottom base of the whole Chart. For example, if neckRatio
is set to 3
, the top base is three times smaller than the bottom base.
dynamic-slope Boolean
When dynamic-slope
is set to true
, the ratio of the bases of each segment is calculated based on the currentDataItem.value
/nextDataItem.value
ration. The last element is always created as a rectangle since no element follows.
dynamic-height Boolean
When dynamic-height
is set to false
, all segments acquire the same height. Otherwise, the height of each segment is based on its value.
error-bars-value String | Number | Array | Function
The value of the error bars.
The supported value types are:
stderr
—The standard error of the series values will be used to calculate the low and high value of the point.stddev(n)
—The standard deviation of the series values will be used to calculate the low and high value of the point. Between the parentheses, you can specify a number that will be multiplied by the calculated standard deviation.percentage(n)
—A percentage of the point value.- A number that will be subtracted or added to the point value.
- An array that holds the difference between the low and high values of the point.
- A function that returns the point value of the
errorBars
.
error-bars-visual Function
A function that can be used to create a custom visual for the error bars.
The supported argument fields are:
rect
—Thekendo.geometry.Rect
that defines where the visual will be rendered.options
—The label options.createVisual
—A function that can be used to get the default visual.low
—The low value of the error bar.high
—The high value of the error barsender
—The Chart instance (may be undefined).
error-bars-x-value String | Number | Array | Function
The value of the xAxis
error bars. For a list of the supported value types, refer to the series.errorBars.value
option.
error-bars-y-value String | Number | Array | Function
The value of the yAxis
error bars. For a list of the supported value types, refer to the series.errorBars.value
option.
error-bars-end-caps Boolean
If error-bars-end-caps
is set to false
, the error bars caps will not be displayed. By default, the caps are visible.
error-bars-color String
The color of the error bars. Accepts any valid CSS color string, including hex and rgb.
error-bars-line-width Number
The width of the line.
error-bars-line-dash-type String
The dash type of the error bars line.
The supported dash types are:
dash
—A line that consists of dashes.dashDot
—A line that consists of a repeating dash-dot pattern.dot
—A line that consists of dots.longDash
—A line that consists of a repeating long-dash pattern.longDashDot
—A line that consists of a repeating long-dash-dot pattern.longDashDotDot
—A line that consists of a repeating long-dash-dot-dot.solid
—A solid line.
error-low-field String
The data item field which contains the low value of the series.errorBars
.
error-high-field String
The data item field which contains the high value of the series.errorBars
.
x-error-low-field String
The data item field which contains the low value of the xAxis series.errorBars
.
x-error-high-field String
The data item field which contains the high value of the xAxis series.errorBars
.
y-error-low-field String
The data item field which contains the low value of the yAxis series.errorBars
.
y-error-high-field String
The data item field which contains the high value of the yAxis series.errorBars
.
explode-field String
The data item field which contains a Boolean value that indicates whether the sector is exploded.
field String
The data item field which contains the series value. The field name will be any valid JavaScript identifier and has to contain only alphanumeric or $
or _
characters and must not start with a digit.
from-field String
The data item field which contains the from
series value.
to-field String
The data item field which contains the to
series value.
note-text-field String
The data item field which contains the note
series text.
lower-field String
The data item field which contains the lower
series value.
q1-field String
The data item field which contains the q1
series value.
median-field String
The data item field which contains the median
series value.
q3-field String
The data item field which contains the q3
series value.
upper-field String
The data item field which contains the upper
series value.
mean-field String
The data item field which contains the mean
series value.
outliers-field String
The data item field which contains the outliers
series value.
gap Number
The distance between categories expressed as a percentage of the bar width. For more information, refer to the related spacing
setting.
high-field String
The data field which contains the high value.
highlight-border-color String
The color of the border. Accepts any valid CSS color string, including hex and rgb.
highlight-border-opacity Number
The opacity of the border. By default, the border is opaque.
highlight-border-width Number
The width (in pixels) of the border. By default, the border width is set to zero which means that the border will not appear.
highlight-color String
The highlight color. Accepts any valid CSS color string, including hex and rgb.
highlight-line-dash-type String
The dash type of the highlight line.
The supported dash types are:
dash
—A line that consists of dashes.dashDot
—A line that consists of a repeating dash-dot pattern.dot
—A line that consists of dots.longDash
—A line that consists of a repeating long-dash pattern.longDashDot
—A line that consists of a repeating long-dash-dot pattern.longDashDotDot
—A line that consists of a repeating long-dash-dot-dot.solid
—A solid line.
highlight-line-color String
The line color. Accepts any valid CSS color string, including hex and rgb.
highlight-line-opacity Number
The opacity of the line. By default, the border is opaque.
highlight-line-width Number
The width of the line.
highlight-opacity Number
The opacity of the highlighted points.
highlight-toggle Function
A function that can be used to handle the toggling of the points highlight.
The supported argument fields are:
preventDefault
—A function that prevents the showing of the default highlight overlay.show
—A Boolean value which indicates whether the highlight will be shown.visual
—The visual element that will be highlighted.category
—The point category.dataItem
—ThedataItem
of the point.value
—The value of the point.series
—The point series.
highlight-visible Boolean
If highlight-visible
is set to true
, the Chart will highlight the series when the user hovers over it with the mouse. By default, the Chart series highlighting is enabled.
highlight-visual Function
A function that sets custom visual for the point highlight.
The supported argument fields are:
createVisual
—A function that gets the default visual.rect
—Thekendo.geometry.Rect
that defines where the visual will be rendered.visual
—The visual element that will be highlighted.options
—The point options.category
—The point category.dataItem
—The data item of the point.value
—The point value.sender
—The Chart instance (may be undefined).series
—The point series.stackValue
—The cumulative point value on the stack. Available only for Stackable series.percentage
—The point value which is represented as a percentage value. Available only for the Donut, Pie, and 100% Stacked Charts.runningTotal
—The sum of point values since the lastrunningTotal
summary point. Available for the Waterfall series.total
—The sum of all previous series values. Available for the Waterfall series.from
—Thefrom
point highlight visual options. Available for the Range Area and Vertical Range Area series.to
—Theto
point highlight visual options. Available for the Range Area and Vertical Range Area series.
hole-size Number
The diameter (in pixels) of the donut hole.
labels-align String
The label alignment when series.type
is set to donut
, funnel
, or pie
.
The supported values for donut
and pie
are:
circle
—The labels are positioned in a circle around the Chart.column
—The labels are positioned in columns to the left and right of the Chart.
The supported values for funnel
are:
center
—The labels are positioned in the center over the funnel segment.right
—The labels are positioned on the right side of the Chart and, if the space is enough, do not overlap the funnel segments.left
—The labels are positioned on the left side of the Chart and, if the space is enough, do not overlap the funnel segments.
labels-background String | Function
The background color of the labels. Accepts any valid CSS color string, including hex and rgb.
labels-border-color String | Function
The color of the border. Accepts any valid CSS color string, including hex and rgb.
labels-border-dash-type String | Function
The dash type of the border.
The supported dash types are:
dash
—A line that consists of dashes.dashDot
—A line that consists of a repeating dash-dot pattern.dot
—A line that consists of dots.longDash
—A line that consists of a repeating long-dash pattern.longDashDot
—A line that consists of a repeating long-dash-dot pattern.longDashDotDot
—A line that consists of a repeating long-dash-dot-dot.solid
—A solid line.
labels-border-width Number | Function
The width (in pixels) of the border. By default, the border width is set to zero which means that the border will not appear.
labels-color String | Function
The text color of the labels. Accepts any valid CSS color string, including hex and rgb.
labels-distance Number
The distance of the labels when series.type
is set to donut
or pie
.
labels-font String | Function
The font style of the labels.
labels-format String | Function
The format of the labels. Uses kendo.format
.
labels-margin Number
The margin of the labels. A numeric value will set all margins.
labels-margin-bottom Number
The bottom margin of the labels.
labels-margin-left Number
The left margin of the labels.
labels-margin-right Number
The right margin of the labels.
labels-margin-top Number
The top margin of the labels.
labels-padding Number
The padding of the labels. A numeric value will set all paddings.
labels-padding-bottom Number
The bottom padding of the labels.
labels-padding-left Number
The left padding of the labels.
labels-padding-right Number
The right padding of the labels.
labels-padding-top Number
The top padding of the labels.
labels-position String | Function
The position of the labels.
The supported values are:
above
—The label is positioned at the top of the marker. Applicable for series that render points, including Bubble.below
—The label is positioned at the bottom of the marker. Applicable for series that render points, including Bubble.center
—The label is positioned at the point center. Applicable for the Bar, Column, Donut, Pie, Funnel, Radar Column, and Waterfall series.insideBase
—The label is positioned inside, near the base of the bar. Applicable for Bar, Column, Waterfall series.insideEnd
—The label is positioned inside, near the end of the point. Applicable for Bar, Column, Donut, Pie, Radar Column, and Waterfall series.left
—The label is positioned to the left of the marker. Applicable for series that render points, including Bubble.outsideEnd
—The label is positioned outside, near the end of the point. Applicable for Bar, Column, Donut, Pie, Radar Column, and Waterfall series. Not applicable for Stacked series.right
—The label is positioned to the right of the marker. Applicable for series that render points, including Bubble.top
—The label is positioned at the top of the segment. Applicable for the Funnel series.bottom
—The label is positioned at the bottom of the segment. Applicable for the Funnel series.auto
—Thefrom
andto
labels area positioned at the top or bottom of the Range Area series or to the left or right in the Vertical Range Area series so that they are outside the filled area. Applicable for the Range Area and Vertical Range Area series.
labels-rotation String | Number
The rotation angle of the labels. By default, the labels are not rotated.
labels-template String | Function
The template which renders the chart series label.
The template supports the following fields:
category
—The category name. Available for the Area, Bar, Column, Bubble, Donut, Line, Pie, and Waterfall series.dataItem
—The original data item used to construct the point. Will benull
if binding to array.percentage
—The point value which is represented as a percentage value. Available only for the Donut, Pie, and 100% Stacked charts.series
—The data series.stackValue
—The cumulative point value on the stack. Available only for the stackable series.value
—The point value. Can be a number or object which contains each bound field.runningTotal
—The sum of point values since the lastrunningTotal
summary point. Available for the Waterfall series.total
—The sum of all previous series values. Available for the Waterfall series.
labels-visible Boolean | Function
If labels-visible
is set to true
, the Chart will display the series labels. By default, chart series labels are not displayed.
labels-visual Function
A function that creates a custom visual for the labels.
The supported argument fields are:
text
—The label text.rect
—Thekendo.geometry.Rect
that defines where the visual will be rendered.options
—The label options.createVisual
—A function that gets the default visual.sender
—The Chart instance (may be undefined).value
—The point value.category
—The point category.stackValue
—The cumulative point value on the stack. Available only for the stackable series.dataItem
—The point data item.series
—The point series.percentage
—The point value which is represented as a percentage value. Available only for the Donut, Pie, and 100% Stacked charts.runningTotal
—The sum of point values since the lastrunningTotal
summary point. Available for the Waterfall series.total
—The sum of all previous series values. Available for the Waterfall series.
labels-from-background String | Function
The background color of the from
labels. Accepts any valid CSS color string, including hex and rgb.
labels-from-border-color String | Function
The color of the border. Accepts any valid CSS color string, including hex and rgb.
labels-from-border-dash-type String | Function
The dash type of the border.
The supported dash types are:
dash
—A line that consists of dashes.dashDot
—A line that consists of a repeating dash-dot pattern.dot
—A line that consists of dots.longDash