Search results

SeriesBaseModel API in Vue Chart API component

Interface for a class SeriesBase

Properties

animation

AnimationModel

Options to customizing animation for the series.

close

string

The DataSource field that contains the close value of y It is applicable for series and technical indicators

colorName

string

The Data Source field that contains the color mapping value. It is applicable for range color mapping properly.

dashArray

string

Defines the pattern of dashes and gaps 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: 'http://mvc.syncfusion.com/Services/Northwnd.svc/Tasks/'
});
let query: Query = new Query().take(50).where('Estimate', 'greaterThan', 0, false);
let chart: Chart = new Chart({
...
    series: [{
       dataSource: dataManager,
       xName: 'Id',
       yName: 'Estimate',
       query: query
   }],
...
});
chart.appendTo('#Chart');

enableComplexProperty

boolean

This property used to improve chart performance via data mapping for series dataSource.

fill

string

The fill color for the series, which can accept 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 has null.

high

string

The DataSource field that contains the high value of y It is applicable for series and technical indicators

low

string

The DataSource field that contains the low value of y It is applicable for series and technical indicators

open

string

The DataSource field that contains the open value of y It is applicable for series and technical indicators

pointColorMapping

string

The DataSource field that contains the color value of point. It is applicable for series.

query

Query

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

segmentAxis

Segment

Defines the axis, based on which the line series will be split.

segments

ChartSegmentModel[]

Defines the collection of regions that helps to differentiate a line series.

visible

boolean

Specifies the visibility of the series.

volume

string

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

width

number

The stroke width for the series that is 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 DataSource field that contains the x value. It is applicable for 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');