Unions

The following unions are available in the Chart component:

NameValueDescription
AnnotationCoordinateUnit
'Pixel' | 'Point'

Specifies the coordinate unit type for chart annotations. They are:

  • Pixel - Positions annotations using pixel values relative to the chart container.
  • Point - Positions annotations using axis values relative to chart data points.
AxisLabelPosition
'Inside' | 'Outside'

Defines the position of ticks or labels relative to the axis line.

  • Inside - Positions ticks or labels inside the axis line.
  • Outside - Positions ticks or labels outside the axis line.
AxisValueType
'Double' | 'DateTime' | 'Category' | 'Logarithmic'

Represents the data type used for axis values.

  • Double - Represents a numeric axis. Suitable for continuous numerical data.
  • DateTime - Represents a DateTime axis. Used for time-based data.
  • Category - Represents a category axis. Ideal for discrete categories or labels.
  • Logarithmic - Represents a logarithmic axis. Useful for data with exponential scale.
ChartMarkerShape
'Circle' | 'Rectangle' | 'Triangle' | 'Diamond' | 'Cross' | 'Plus' | 'HorizontalLine' | 'VerticalLine' | 'Pentagon' | 'InvertedTriangle' | 'Image' | 'Star' | 'None'

Defines the shapes available for chart markers.

  • Circle - Specifies the marker shape as a circle.
  • Rectangle - Specifies the marker shape as a rectangle.
  • Triangle - Specifies the marker shape as a triangle.
  • Diamond - Specifies the marker shape as a diamond.
  • Cross - Specifies the marker shape as a cross.
  • Plus - Specifies the marker shape as a plus symbol.
  • HorizontalLine - Specifies the marker shape as a horizontal line.
  • VerticalLine - Specifies the marker shape as a vertical line.
  • Pentagon - Specifies the marker shape as a pentagon.
  • InvertedTriangle - Specifies the marker shape as an inverted triangle.
  • Image - Specifies the marker shape as an image.
  • Star - Specifies the marker shape as a star.
  • None - Disables the marker by not rendering any shape.
ChartRangePadding
'Auto' | 'None' | 'Normal' | 'Additional' | 'Round'

Defines the type of padding applied to the chart axis range.

  • Auto - Automatically applies padding: 'Normal' for vertical axes and 'None' for horizontal axes.
  • None - No padding is applied to the axis range.
  • Normal - Applies standard padding based on range calculations.
  • Additional - Adds one interval of the axis as padding to both the minimum and maximum values.
  • Round - Rounds the axis range to the nearest value divisible by the interval.
ChartSeriesType
'Line' | 'MultiColoredLine' | 'Column' | 'Area' | 'Bar' | 'StackingColumn' | 'StackingColumn100' | 'StackingBar' | 'StackingBar100' | 'StepLine' | 'SplineArea' | 'SplineRangeArea' | 'Scatter' | 'Spline' | 'StepArea' | 'Bubble' | 'Candle' | 'Hilo' | 'HiloOpenClose' | 'RangeArea' | 'RangeColumn' | 'StackingArea' | 'StackingArea100'

Specifies the available types of chart series.

  • Line - Represents a line series.
  • MultiColoredLine - Represents a multicolored line series.
  • Column - Represents a column series.
  • Area - Represents an area series.
  • Bar - Represents a bar series.
  • StackingColumn - Represents a stacking column series.
  • StackingColumn100 - Represents a 100% stacking column series.
  • StackingBar - Represents a stacking bar series.
  • StackingBar100 - Represents a 100% stacking Bar series.
  • StepLine - Represents a step line series.
  • SplineArea - Represents a spline area series.
  • Scatter - Represents a scatter series.
  • Spline - Represents a spline series.
  • StepArea - Represents a step area series.
  • Bubble - Represents a bubble series.
  • Candle - Represents a candle series.
  • Hilo - Represents a hilo series.
  • HiloOpenClose - Represents a hiloOpenClose series.
  • RangeArea - Represents a rangeArea series.
  • RangeColumn - Represents a rangeColumn series.
  • StackingArea - Represents a stacking area series.
  • StackingArea100 - Represents a 100% stacking area series.
  • SplineRangeArea - Represents a spline range area series.
CrosshairLineType
'Both' | 'Vertical' | 'Horizontal'

Specifies the display mode for crosshair lines in the chart. They are:

  • Both - Displays both vertical and horizontal crosshair lines.
  • Vertical - Displays only the vertical crosshair line.
  • Horizontal - Displays only the horizontal crosshair line.
DataLabelIntersectMode
'None' | 'Hide' | 'Rotate90'

Defines the actions to take when data labels intersect.

  • None - Displays all labels without modification.
  • Hide - Hides the label when it intersects.
  • Rotate90 - Rotates the label 90 degrees when it intersects.
EdgeLabelPlacement
'None' | 'Hide' | 'Shift'

Specifies how labels at the edges of the axis are handled.

  • None - Displays edge labels without any adjustment.
  • Hide - Hides the labels at the edges of the axis.
  • Shift - Shifts the edge labels to avoid overlap or clipping.
EmptyPointMode
'Gap' | 'Zero' | 'Drop' | 'Average'

Defines how empty data points are handled in the chart.

  • Gap - Displays empty points as gaps in the chart.
  • Zero - Displays empty points with a value of zero.
  • Drop - Ignores empty points during rendering.
  • Average - Displays empty points using the average of the previous and next data points.
ErrorBarType
'Percentage' | 'StandardDeviation' | 'StandardError' | 'Custom'

Specifies the type of error bar to be rendered in the chart. Available options are:

  • Percentage - Renders an error bar based on percentage.
  • StandardDeviation - Renders an error bar using standard deviation.
  • StandardError - Renders an error bar using standard error.
  • Custom - Renders a custom-defined error bar.
IntervalType
'Auto' | 'Years' | 'Months' | 'Days' | 'Hours' | 'Minutes' | 'Seconds'

Specifies the interval type for a datetime axis.

  • Auto - Automatically determines the interval based on the data.
  • Years - Sets the interval in years.
  • Months - Sets the interval in months.
  • Days - Sets the interval in days.
  • Hours - Sets the interval in hours.
  • Minutes - Sets the interval in minutes.
  • Seconds - Sets the interval in seconds.
LabelIntersectMode
'None' | 'Hide' | 'Trim' | 'Wrap' | 'MultipleRows' | 'Rotate45' | 'Rotate90'

Defines the action to take when axis labels intersect.

  • None - Display all labels without any modification.
  • Hide - Hide the label when it intersects.
  • Trim - Trim the label text when it intersects.
  • Wrap - Wrap the label text to the next line when it intersects.
  • MultipleRows - Arrange labels in multiple rows when they intersect.
  • Rotate45 - Rotate the label 45 degrees when it intersects.
  • Rotate90 - Rotate the label 90 degrees when it intersects.
LabelPlacement
'BetweenTicks' | 'OnTicks'

Defines how axis labels are positioned relative to the tick marks.

  • BetweenTicks - Render the label between the tick marks.
  • OnTicks - Render the label directly on the tick marks.
LabelPosition
'Outer' | 'Top' | 'Bottom' | 'Middle' | 'Auto'

Specifies the position options for labels in the chart.

  • Outer - Positions the label outside the data point.
  • Top - Positions the label on top of the data point.
  • Bottom - Positions the label below the data point.
  • Middle - Positions the label at the center of the data point.
  • Auto - Automatically positions the label based on the series type.
LegendShape
'Circle' | 'Rectangle' | 'Triangle' | 'Diamond' | 'Cross' | 'HorizontalLine' | 'VerticalLine' | 'Pentagon' | 'InvertedTriangle' | 'SeriesType' | 'Image'

Defines the shapes available for legend items in the chart.

  • Circle - Renders a circular legend shape.
  • Rectangle - Renders a rectangular legend shape.
  • Triangle - Renders a triangular legend shape.
  • Diamond - Renders a diamond-shaped legend.
  • Cross - Renders a cross-shaped legend.
  • HorizontalLine - Renders a horizontal line as the legend shape.
  • VerticalLine - Renders a vertical line as the legend shape.
  • Pentagon - Renders a pentagon-shaped legend.
  • InvertedTriangle - Renders an inverted triangle shape.
  • SeriesType - Uses the shape based on the series type.
  • Image - Renders a custom image as the legend shape.
SelectionMode
'None' | 'Series' | 'Point' | 'Cluster'

Specifies the selection mode for chart elements.

  • None - Disables selection.
  • Series - Allows selecting an entire series.
  • Point - Allows selecting an individual data point.
  • Cluster - Allows selecting a cluster of points.
SelectionPattern
'None' | 'Chessboard' | 'Dots' | 'DiagonalForward' | 'Crosshatch' | 'Pacman' | 'DiagonalBackward' | 'Grid' | 'Turquoise' | 'Star' | 'Triangle' | 'Circle' | 'Tile' | 'HorizontalDash' | 'VerticalDash' | 'Rectangle' | 'Box' | 'VerticalStripe' | 'HorizontalStripe' | 'Bubble'

Specifies the pattern used for highlighting or selecting chart elements.

  • None - No highlighting or selection pattern.
  • Chessboard - Applies a chessboard pattern.
  • Dots - Applies a dotted pattern.
  • DiagonalForward - Applies a diagonal forward pattern
  • Crosshatch - Applies a crosshatch pattern.
  • Pacman - Applies a pacman-style pattern.
  • Diagonalbackward - Applies a diagonal backward pattern.
  • Grid - Applies a grid pattern.
  • Turquoise - Applies a turquoise pattern.
  • Star - Applies a star pattern.
  • Triangle - Applies a triangle pattern.
  • Circle - Applies a circle pattern.
  • Tile - Applies a tile pattern.
  • Horizontaldash - Applies a vertical dash pattern.
  • Verticaldash - Applies a rectangle pattern.
  • Rectangle - Applies a box pattern.
  • Box - Applies a vertical stripe pattern.
  • Verticalstripe - Applies a vertical stripe pattern.
  • Horizontalstripe - Applies a horizontal stripe pattern.
  • Bubble - Applies a bubble pattern.
SkeletonType
'Date' | 'DateTime' | 'Time'

Specifies the types of skeleton formats available for date and time formatting.

  • Date - Formats only the date.
  • DateTime - Formats both date and time.
  • Time - Formats only the time.
SplineType
'Natural' | 'Monotonic' | 'Cardinal' | 'Clamped'

Specifies the type of spline used for rendering.

  • Natural - Renders a natural spline.
  • Monotonic - Renders a monotonic spline.
  • Cardinal - Renders a cardinal spline.
  • Clamped - Renders a clamped spline.
StepPosition
'Left' | 'Right' | 'Center'

Specifies the position where the step begins in a step line series.

  • Left - Steps begin from the left side of the second data point.
  • Right - Steps begin from the right side of the first data point.
  • Center - Steps begin between the data points.
StripLineSizeUnit
'Auto' | 'Pixel' | 'Years' | 'Months' | 'Days' | 'Hours' | 'Minutes' | 'Seconds'

Defines the unit of strip line size.

  • Auto - In numeric axis, it will consider a number and DateTime axis, it will consider as milliseconds.
  • Pixel - The stripline gets their size in pixel.
  • Years - The stripline size is based on year in the DateTime axis.
  • Months - The stripline size is based on month in the DateTime axis.
  • Days - The stripline size is based on day in the DateTime axis.
  • Hours - The stripline size is based on hour in the DateTime axis.
  • Minutes - The stripline size is based on minutes in the DateTime axis.
ToolbarItems
'ZoomIn' | 'ZoomOut' | 'Pan' | 'Reset'

Defines the set of interactive tools available in the chart's zooming toolbar.

  • ZoomIn - Displays a tool that allows users to zoom into the chart.
  • ZoomOut - Displays a tool that allows users to zoom out of the chart.
  • Pan - Enables panning across the chart by dragging.
  • Reset - Resets the chart view to its original state.
ZIndex
'Over' | 'Behind'

Specifies the order of the strip line.

  • Over - Places the strip line over the series elements.
  • Behind - Places the strip line behind the series elements.
ZoomMode
'XY' | 'X' | 'Y'

Specifies the zooming mode for the chart.

  • XY - Zooms both the horizontal (X) and vertical (Y) axes.
  • X - Zooms only the horizontal (X) axis.
FadeOutMode
'Click' | 'Move'

Defines how tooltips fade out in the chart.

  • Click - Removes the tooltip when the user clicks.
  • Move - Removes the tooltip after a short delay when the pointer moves.
LegendPosition
'Auto' | 'Top' | 'Left' | 'Bottom' | 'Right' | 'Custom'

Specifies the position of the chart legend.

  • Auto - Automatically places the legend based on the chart area type.
  • Top - Displays the legend at the top of the chart.
  • Left - Displays the legend on the left side of the chart.
  • Bottom - Displays the legend at the bottom of the chart.
  • Right - Displays the legend on the right side of the chart.
  • Custom - Positions the legend based on specified x and y coordinates.
TextOverflow
'None' | 'Wrap' | 'Trim'

Defines how chart text should behave when it exceeds the boundaries of its container.

  • None - Displays the full text even if it overlaps with other chart elements.
  • Wrap - Breaks the text into multiple lines to fit within the container.
  • Trim - Cuts off the text and may append ellipsis if it exceeds the container width.
Theme
'Material' | 'MaterialDark'

Defines the built-in themes available for rendering the chart.

  • Material - Renders the chart using the Material theme.
  • MaterialDark - Renders the chart using the Material dark theme.
TitlePosition
'Top' | 'Right' | 'Bottom' | 'Left' | 'Custom'

Specifies the position of the chart title.

  • Top - Places the title at the top of the chart.
  • Right - Places the title on the right side of the chart.
  • Bottom - Places the title at the bottom of the chart.
  • Left - Places the title on the left side of the chart.
  • Custom - Places the title at a custom position based on specified x and y coordinates.