SeriesBase API in JavaScript Chart API control

Defines the common behavior for series and technical indicators.

Properties

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.

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.

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 ”

enableComplexProperty

boolean

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

Defaults to false

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

high

string

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

Defaults to ”

low

string

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

Defaults to ”

open

string

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

Defaults to ”

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.

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