SeriesModel API in React Chart API component

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.

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.

Returns void

removePoint

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

Returns void

setData

Sets the data source with the provided data.

Returns void