Series API in Vue Chart API component

The Series class is used to configure individual series in a chart.

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.

Defaults to null

binInterval

number

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

Defaults to null

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.

Defaults to ‘Normal’

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.

Defaults to null

cardinalSplineTension

number

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

Defaults to 0.5

close

string

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

Defaults to ”

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.

Defaults to ‘Rectangle’

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.

Defaults to 0

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.

Defaults to null

columnWidthInPixel

number

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

Defaults to null

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.

Defaults to ”

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');

Defaults to ”

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.

Defaults to ‘Line’

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.

Defaults to false

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.

Defaults to false

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.

Defaults to true

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.

Defaults to 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.

Defaults to ”

high

string

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

Defaults to ”

intermediateSumIndexes

number[]

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

Defaults to []

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.

Defaults to true

legendImageUrl

string

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

Note that legendShape must be set to Image.

Defaults to ”

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.

Defaults to ‘SeriesType’

low

string

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

Defaults to ”

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.

Defaults to 3

minRadius

number

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

Defaults to 1

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.

Defaults to ”

negativeFillColor

string

Defines the visual representation of negative changes in waterfall charts.

Defaults to ‘#C64E4A’

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.

Defaults to false

nonHighlightStyle

string

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

Defaults to null

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.

Defaults to 1

open

string

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

Defaults to ”

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.

Defaults to ”

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.

Defaults to ”

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.

Defaults to null

showMean

boolean

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

Defaults to true

showNearestTooltip

boolean

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

Defaults to true

showNormalDistribution

boolean

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

Defaults to false

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.

Defaults to true

size

string

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

Defaults to ”

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.

Defaults to ‘Natural’

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.

Defaults to ”

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.

Defaults to ‘Left’

sumIndexes

number[]

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

Defaults to []

summaryFillColor

string

Defines the visual representation of summaries in waterfall charts.

Defaults to ‘#4E81BC’

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');

Defaults to ”

tooltipMappingName

string

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

Defaults to ”

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.

Defaults to ‘Line’

unSelectedStyle

string

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

Defaults to null

visible

boolean

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

Defaults to true

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.

Defaults to ”

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.

Defaults to 1

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');

Defaults to null

xName

string

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

Defaults to ”

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');

Defaults to null

yName

string

The data source field that contains the y value.

Defaults to ”

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.

Defaults to 0

Methods

addPoint

Adds a data point to the data source.

Returns void

formatAccessibilityDescription

Formats the accessibility description for a chart series.

Returns string

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