SeriesModel

23 Sep 202516 minutes to read

Interface for a class Series

Properties

accessibility SeriesAccessibilityModel

Options to improve accessibility for series elements.

animation AnimationModel

Options for customizing the animation of the series.
By default, animation is enabled with a duration of 1000 milliseconds (about 1 second). It can be disabled by setting enable to false.
The following properties are supported in animation:

  • enable: If set to true, the series is animated on initial loading.
  • duration: The duration of the animation in milliseconds.
  • delay: The delay before the animation starts, in milliseconds.

bearFillColor string

This property is used in financial charts to visualize price movements in stocks.
It defines the color of the candle/point when the opening price is less than the closing price.

binInterval number

The binInterval property controls the width of each bin and the interval between bins for histogram points.

border BorderModel

Options for customizing the border of the series.

Note that this property is applicable only for Column and Bar type series.

boxPlotMode BoxPlotMode

Specifies the box plot mode for the box and whisker chart series.
The available modes are:
Exclusive - Renders the series based on the exclusive mode.
Inclusive - Renders the series based on the inclusive mode.
Normal - Renders the series based on the normal mode.

bullFillColor string

This property is used in financial charts to visualize price movements in stocks.
It defines the color of the candle/point when the opening price is higher than the closing price.

cardinalSplineTension number

Specifies the tension parameter for cardinal splines. This affects the curvature of the spline.

close string

The data source field that contains the close value.
It is applicable for both financial series and technical indicators.

colorName string

The data source field that contains the color mapping value.
It is applicable for range color mapping.

columnFacet ShapeType

Defines the shape of the data in a column and bar chart.
Available shapes are:

  • Rectangle: Displays the data in a column and bar chart with a rectangular shape.
  • Cylinder: Displays the data in a column and bar chart with a cylindrical shape.

columnSpacing number

This property determines the space between columns in a column or bar chart.

Note that it takes a value from 0 to 1.

columnWidth number

The columnWidth property can be used to customize the width of the columns in a column series.

Note that if the series type is histogram, the default value is 1; otherwise, it is 0.7.

columnWidthInPixel number

To render the column series points with a specific column width in pixels.

connector ConnectorModel

Specifies the appearance of the line connecting adjacent points in waterfall charts.

cornerRadius CornerRadiusModel

The cornerRadius property specifies the radius for the corners of the column series points to create a rounded appearance in the chart.

dashArray string

Defines the pattern of dashes and gaps used to stroke the lines in Line type series.

dataSource Object|DataManager

Specifies the data source for the series. It can be an array of JSON objects, or an instance of DataManager.

<div id='Chart'></div>
let dataManager: DataManager = new DataManager({
   url: 'https://services.syncfusion.com/js/production/api/orders'
});
let query: Query = new Query().take(5);
let chart: Chart = new Chart({
...
  series: [{
       type: 'Column',
       dataSource: dataManager,
       xName: 'CustomerID',
       yName: 'Freight',
       query: query
   }],
...
});
chart.appendTo('#Chart');

dragSettings DragSettingsModel

Customize the drag settings for the series with this property to configure drag behavior in the chart.

drawType ChartDrawType

Specifies the type of series to be drawn in radar or polar charts.
The available options are:

  • ‘Line’ - Renders a line series.
  • ‘Column’ - Renders a column series.
  • ‘Area’ - Renders an area series.
  • ‘Scatter’ - Renders a scatter series.
  • ‘Spline’ - Renders a spline series.
  • ‘StackingColumn’ - Renders a stacking column series.
  • ‘StackingArea’ - Renders a stacking area series.
  • ‘RangeColumn’ - Renders a range column series.
  • ‘SplineArea’ - Renders a spline area series.

emptyPointSettings EmptyPointSettingsModel

Customization options for the appearance of empty points in the series.
null or undefined values are considered empty points.

enableComplexProperty boolean

This property is used to improve chart performance through data mapping for the series data source.

enableSolidCandles boolean

This property is applicable for the candle series.
It enables or disables the visual comparison of the current values with previous values in stock charts.

enableTooltip boolean

Controls whether the tooltip for the chart series is enabled or disabled. Set to true to display tooltips on hover, or false to hide them.

errorBar ErrorBarSettingsModel

Options for displaying and customizing error bars for individual points in a series.

fill string

The fill color for the series, which accepts values in hex or rgba as a valid CSS color string.
It also represents the color of the signal lines in technical indicators.
For technical indicators, the default value is ‘blue’, and for series, it is null.

groupName string

Defines the name that specifies the chart series are mutually exclusive and can be overlaid.
Series in the same group share the same baseline and location on the corresponding axis.

high string

The data source field that contains the high value.
It is applicable for both financial series and technical indicators.

intermediateSumIndexes number[]

Defines the collection of indexes for the intermediate summary columns in waterfall charts.

isClosed boolean

Specifies whether to join the start and end points of a line/area series used in a polar/radar chart to form a closed path.

lastValueLabel LastValueLabelSettingsModel

Options for customizing and displaying the last value in the series.

legendImageUrl string

The URL for the image to be displayed as a legend icon.

Note that legendShape must be set to Image.

legendShape LegendShape

Specifies the shape of the legend icon for each series.
Available shapes for legend:

  • Circle - Renders a circular icon.
  • Rectangle - Renders a rectangular icon.
  • Triangle - Renders a triangular icon.
  • Diamond - Renders a diamond-shaped icon.
  • Cross - Renders a cross-shaped icon.
  • HorizontalLine - Renders a horizontal line icon.
  • VerticalLine - Renders a vertical line icon.
  • Pentagon - Renders a pentagon-shaped icon.
  • InvertedTriangle - Renders an inverted triangle-shaped icon.
  • SeriesType - Uses the default icon shape based on the series type.
  • Image - Renders a custom image for the legend icon.

low string

The data source field that contains the low value.
It is applicable for both financial series and technical indicators.

marker MarkerSettingsModel

Options for displaying and customizing markers for individual points in a series.

maxRadius number

Specifies the maximum radius for the data points in the series.

minRadius number

Specifies the minimum radius for the data points in the series.

name string

The name property allows setting a name for the series, which will be displayed in the legend, identifying different series in the chart, especially when multiple series are present.

negativeFillColor string

Defines the visual representation of negative changes in waterfall charts.

noRisers boolean

When set to true, the step series will be rendered without the vertical lines (risers) connecting the horizontal steps.

Note this property is only applicable to step series.

nonHighlightStyle string

The nonHighlightStyle property is used to specify custom CSS styles for the non-highlighted series or points.

opacity number

Sets the opacity of the series, with a value between 0 and 1 where 0 is fully transparent and 1 is fully opaque.

open string

The data source field that contains the open value.
It is applicable for both financial series and technical indicators.

paretoOptions ParetoOptionsModel

Options for customizing the Pareto line series, including its appearance and behavior in the chart.

pointColorMapping string

The data source field that contains the color value of a point.
It is applicable for series.

query Query

Specifies a query to select data from the data source. This property is applicable only when the data source is an ej.DataManager.

segmentAxis Segment

Defines the axis along which the line series will be split.

segments ChartSegmentModel[]

Specifies a collection of regions used to differentiate a line series.

selectionStyle string

The selectionStyle property is used to specify custom CSS styles for the selected series or points.

showMean boolean

If set to true, the mean value for the box and whisker plot will be visible.

showNearestTooltip boolean

Enables or disables the display of tooltips for the nearest data point to the cursor for series.

showNormalDistribution boolean

Specifies whether to display the normal distribution curve for the histogram series.

showOutliers boolean

Specifies whether to display outliers in the Box and Whisker chart.
If set to true, outliers will be displayed as individual points beyond the whiskers, representing data points that significantly differ from the rest of the dataset.
If set to false, outliers will be hidden, and only the box, median, and whiskers will be rendered.

Outliers are typically used to identify extreme values in statistical data representation.

size string

The data source field that contains the size value for the y-axis.

splineType SplineType

Specifies the type of spline used for rendering.
Available options include:

  • Natural - Renders a natural spline.
  • Cardinal - Renders a cardinal spline.
  • Clamped - Renders a clamped spline.
  • Monotonic - Renders a monotonic spline.

stackingGroup string

This property allows the grouping of series in stacked column and stacked bar charts.
Any string value can be assigned to the stackingGroup property.
Series with the same stackingGroup value will be grouped together in the chart.

step StepPosition

The step property can be used to change the position of the steps in step line, step area, and step range area chart types.

  • Left: Steps start from the left side of the 2nd point.
  • Center: Steps start between the data points.
  • Right: Steps start from the right side of the 1st point.

sumIndexes number[]

Defines the collection of indexes for the overall summary columns in waterfall charts.

summaryFillColor string

Defines the visual representation of summaries in waterfall charts.

tooltipFormat string

Use this property to define a custom format for how tooltips are displayed.

<div id='Chart'></div>
let chart: Chart = new Chart({
...
   series: [{
          dataSource: data,
          xName: 'x',
          yName: 'y',
          tooltipFormat: '${point.x} : ${point.y}'
    }],
   tooltip: {
      enable: true
   }
});
chart.appendTo('#Chart');

tooltipMappingName string

The data source field that contains the value to be displayed in the tooltip.

trendlines TrendlineModel[]

Defines the collection of trendlines used to predict the trend.

type ChartSeriesType

The type of the series determines the visual representation of the data.
Available series types include:

  • Line - Draws a line series.
  • Column - Draws a column series.
  • Area - Draws an area series.
  • Bar - Draws a bar series.
  • Histogram - Draws a histogram series.
  • StackingColumn - Draws a stacking column series.
  • StackingArea - Draws a stacking area series.
  • StackingBar - Draws a stacking bar series.
  • StepLine - Draws a step line series.
  • StepArea - Draws a step area series.
  • Scatter - Draws a scatter series.
  • Spline - Draws a spline series.
  • StackingColumn100 - Draws a 100% stacked column series.
  • StackingBar100 - Draws a 100% stacked bar series.
  • StackingArea100 - Draws a 100% stacked area series.
  • RangeColumn - Draws a range column series.
  • Hilo - Draws a Hilo series.
  • HiloOpenClose - Draws a Hilo Open Close series.
  • Waterfall - Draws a waterfall series.
  • RangeArea - Draws a range area series.
  • SplineRangeArea - Draws a spline range area series.
  • Bubble - Draws a bubble series.
  • Candle - Draws a candle series.
  • Polar - Draws a polar series.
  • Radar - Draws a radar series.
  • BoxAndWhisker - Draws a box and whisker series.
  • Pareto - Draws a Pareto series.

unSelectedStyle string

The unSelectedStyle property is used to specify custom CSS styles for the deselected series or points.

visible boolean

If set to true, the series will be visible. If set to false, the series will be hidden.

volume string

Defines the data source field that contains the volume value in candle charts.
It is applicable for both financial series and technical indicators.

width number

The stroke width for the series, applicable only for Line type series.
It also represents the stroke width of the signal lines in technical indicators.

xAxisName string

The name of the horizontal axis associated with the series. It requires axes of the chart.
It is applicable for series and technical indicators.

<div id='Chart'></div>
let chart: Chart = new Chart({
...
    columns: [{ width: '50%' },
              { width: '50%' }],
    axes: [{
               name: 'xAxis 1',
               columnIndex: 1
           }],
    series: [{
               dataSource: data,
               xName: 'x', yName: 'y',
               xAxisName: 'xAxis 1'
    }],
});
chart.appendTo('#Chart');

xName string

The data source field that contains the x value.
It is applicable to both series and technical indicators.

yAxisName string

The name of the vertical axis associated with the series. It requires axes of the chart.
It is applicable for series and technical indicators.

<div id='Chart'></div>
let chart: Chart = new Chart({
...
    rows: [{ height: '50%' },
           { height: '50%' }],
    axes: [{
               name: 'yAxis 1',
               rowIndex: 1
           }],
    series: [{
               dataSource: data,
               xName: 'x', yName: 'y',
               yAxisName: 'yAxis 1'
    }],
});
chart.appendTo('#Chart');

yName string

The data source field that contains the y value.

zOrder number

The z-order of the series, which controls the stack order of the series. Higher values are drawn on top of lower values.

Methods

addPoint

Adds a data point to the data source.

Parameter Type Description
dataPoint Object The data point to be added.
duration (optional) number The duration for the animation.

Returns void

removePoint

Removes a data point from the series data source at the specified index.

Parameter Type Description
index number The index of the data point to be removed.
duration (optional) number The duration for the animation.

Returns void

setData

Sets the data source with the provided data.

Parameter Type Description
data Object[] An array of objects representing the data points.
duration (optional) number The duration for the animation.

Returns void