ChartModel API in JavaScript Chart API control

Interface for a class Chart

Properties

afterExport

EmitType<IAfterExportEventArgs>

Triggers after the export completed.

animationComplete

EmitType<IAnimationCompleteEventArgs>

Triggers after animation is completed for the series.

annotationRender

EmitType<IAnnotationRenderEventArgs>

Triggers before the annotation gets rendered.

axisLabelClick

EmitType<IAxisLabelClickEventArgs>

Triggers when x axis label clicked.

axisLabelRender

EmitType<IAxisLabelRenderEventArgs>

Triggers before each axis label is rendered.

axisMultiLabelRender

EmitType<IAxisMultiLabelRenderEventArgs>

Triggers before each axis multi label is rendered.

axisRangeCalculated

EmitType<IAxisRangeCalculatedEventArgs>

Triggers before each axis range is rendered.

beforeExport

EmitType<IExportEventArgs>

Triggers before the export gets started.

beforePrint

EmitType<IPrintEventArgs>

Triggers before the prints gets started.

beforeResize

EmitType<IBeforeResizeEventArgs>

Triggers before resizing of chart

chartDoubleClick

EmitType<IMouseEventArgs>

Triggers on double clicking the chart.

chartMouseClick

EmitType<IMouseEventArgs>

Triggers on clicking the chart.

chartMouseDown

EmitType<IMouseEventArgs>

Triggers on mouse down.

chartMouseLeave

EmitType<IMouseEventArgs>

Triggers when cursor leaves the chart.

chartMouseMove

EmitType<IMouseEventArgs>

Triggers on hovering the chart.

chartMouseUp

EmitType<IMouseEventArgs>

Triggers on mouse up.

drag

EmitType<IDataEditingEventArgs>

Triggers when the point is dragging.

dragComplete

EmitType<IDragCompleteEventArgs>

Triggers after the drag selection is completed.

dragEnd

EmitType<IDataEditingEventArgs>

Triggers when the point drag end.

dragStart

EmitType<IDataEditingEventArgs>

Triggers when the point drag start.

legendClick

EmitType<ILegendClickEventArgs>

Triggers after click on legend.

legendRender

EmitType<ILegendRenderEventArgs>

Triggers before the legend is rendered.

load

EmitType<ILoadedEventArgs>

Triggers before chart load.

loaded

EmitType<ILoadedEventArgs>

Triggers after chart load.

multiLevelLabelClick

EmitType<IMultiLevelLabelClickEventArgs>

Triggers after click on multiLevelLabelClick.

onZooming

EmitType<IZoomingEventArgs>

Triggers after the zoom selection is triggered.

pointClick

EmitType<IPointEventArgs>

Triggers on point click.

pointDoubleClick

EmitType<IPointEventArgs>

Triggers on point double click.

pointMove

EmitType<IPointEventArgs>

Triggers on point move.

pointRender

EmitType<IPointRenderEventArgs>

Triggers before each points for the series is rendered.

resized

EmitType<IResizeEventArgs>

Triggers after resizing of chart.

scrollChanged

EmitType<IScrollEventArgs>

Triggers when change the scroll.

scrollEnd

EmitType<IScrollEventArgs>

Triggers after the scroll end.

scrollStart

EmitType<IScrollEventArgs>

Triggers when start the scroll.

selectionComplete

EmitType<ISelectionCompleteEventArgs>

Triggers after the selection is completed.

seriesRender

EmitType<ISeriesRenderEventArgs>

Triggers before the series is rendered.

sharedTooltipRender

EmitType<ISharedTooltipRenderEventArgs>

Triggers before the shared tooltip for series is rendered.

textRender

EmitType<ITextRenderEventArgs>

Triggers before the data label for series is rendered.

tooltipRender

EmitType<ITooltipRenderEventArgs>

Triggers before the tooltip for series is rendered.

zoomComplete

EmitType<IZoomCompleteEventArgs>

Triggers after the zoom selection is completed.

allowExport

boolean

To enable export feature in blazor chart.

allowMultiSelection

boolean

If set true, enables the multi drag selection in chart. It requires selectionMode to be Dragx | DragY | or DragXY.

annotations

ChartAnnotationSettingsModel[]

The configuration for annotation in chart.

axes

AxisModel[]

Secondary axis collection for the chart.

background

string

The background color of the chart that accepts value in hex and rgba as a valid CSS color string.

backgroundImage

string

The background image of the chart that accepts value in string as url link or location of an image.

border

BorderModel

Options for customizing the color and width of the chart border.

chartArea

ChartAreaModel

Options for configuring the border and background of the chart area.

columns

ColumnModel[]

Options to split chart into multiple plotting areas vertically. Each object in the collection represents a plotting area in the chart.

crosshair

CrosshairSettingsModel

Options for customizing the crosshair of the chart.

dataSource

Object | DataManager

Specifies the DataSource for the chart. 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({
...
 dataSource:dataManager,
  series: [{
       xName: 'Id',
       yName: 'Estimate',
       query: query
   }],
...
});
chart.appendTo('#Chart');

description

string

Description for chart.

enableAnimation

boolean

If set true, Animation process will be executed.

enableAutoIntervalOnBothAxis

boolean

If set to true, both axis interval will be calculated automatically with respect to the zoomed range.

enableCanvas

boolean

It specifies whether the chart should be rendered in canvas mode.

enableExport

boolean

To enable export feature in chart.

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

enableRtl

boolean

Enable or disable rendering component in right to left direction.

enableSideBySidePlacement

boolean

To enable the side by side placing the points for column type series.

height

string

The height of the chart as a string accepts input both as ‘100px’ or ‘100%‘. If specified as ‘100%, chart renders to the full height of its parent element.

highlightColor

string

Define the color for the data point on highlight.

highlightMode

HighlightMode

Specifies whether series or data point has to be selected. They are,

• none: Disables the highlight.
• series: highlight a series.
• point: highlight a point.
• cluster: highlight a cluster of point

highlightPattern

SelectionPattern

Specifies whether series or data point has to be selected. They are,

• none: sets none as highlighting pattern.
• chessboard: sets chess board as highlighting pattern.
• dots: sets dots as highlighting pattern.
• diagonalForward: sets diagonal forward as highlighting pattern.
• crosshatch: sets crosshatch as highlighting pattern.
• pacman: sets pacman highlighting pattern.
• diagonalbackward: sets diagonal backward as highlighting pattern.
• grid: sets grid as highlighting pattern.
• turquoise: sets turquoise as highlighting pattern.
• star: sets star as highlighting pattern.
• triangle: sets triangle as highlighting pattern.
• circle: sets circle as highlighting pattern.
• tile: sets tile as highlighting pattern.
• horizontaldash: sets horizontal dash as highlighting pattern.
• verticaldash: sets vertical dash as highlighting pattern.
• rectangle: sets rectangle as highlighting pattern.
• box: sets box as highlighting pattern.
• verticalstripe: sets vertical stripe as highlighting pattern.
• horizontalstripe: sets horizontal stripe as highlighting pattern.
• bubble: sets bubble as highlighting pattern.

indicators

TechnicalIndicatorModel[]

Defines the collection of technical indicators, that are used in financial markets.

isMultiSelect

boolean

If set true, enables the multi selection in chart. It requires selectionMode to be Point | Series | or Cluster.

isTransposed

boolean

It specifies whether the chart should be render in transposed manner or not.

legendSettings

LegendSettingsModel

Options for customizing the legend of the chart.

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

margin

MarginModel

Options to customize left, right, top and bottom margins of the chart.

palettes

string[]

Palette for the chart series.

primaryXAxis

AxisModel

Options to configure the horizontal axis.

primaryYAxis

AxisModel

Options to configure the vertical axis.

rangeColorSettings

RangeColorSettingModel[]

Options for customizing the points fill color based on condition.

rows

RowModel[]

Options to split Chart into multiple plotting areas horizontally. Each object in the collection represents a plotting area in the Chart.

selectedDataIndexes

IndexesModel[]

Specifies the point indexes to be selected while loading a chart. It requires selectionMode or highlightMode to be Point | Series | or Cluster.

<div id='Chart'></div>

let chart: Chart = new Chart({
...
  selectionMode: 'Point',
  selectedDataIndexes: [ { series: 0, point: 1},
                         { series: 2, point: 3} ],
...
});
chart.appendTo('#Chart');

selectionMode

SelectionMode

Specifies whether series or data point has to be selected. They are,

• none: Disables the selection.
• series: selects a series.
• point: selects a point.
• cluster: selects a cluster of point
• dragXY: selects points by dragging with respect to both horizontal and vertical axes
• dragX: selects points by dragging with respect to horizontal axis.
• dragY: selects points by dragging with respect to vertical axis.
• lasso: selects points by dragging with respect to free form.

selectionPattern

SelectionPattern

Specifies whether series or data point has to be selected. They are,

• none: sets none as selecting pattern.
• chessboard: sets chess board as selecting pattern.
• dots: sets dots as selecting pattern.
• diagonalForward: sets diagonal forward as selecting pattern.
• crosshatch: sets crosshatch as selecting pattern.
• pacman: sets pacman selecting pattern.
• diagonalbackward: sets diagonal backward as selecting pattern.
• grid: sets grid as selecting pattern.
• turquoise: sets turquoise as selecting pattern.
• star: sets star as selecting pattern.
• triangle: sets triangle as selecting pattern.
• circle: sets circle as selecting pattern.
• tile: sets tile as selecting pattern.
• horizontaldash: sets horizontal dash as selecting pattern.
• verticaldash: sets vertical dash as selecting pattern.
• rectangle: sets rectangle as selecting pattern.
• box: sets box as selecting pattern.
• verticalstripe: sets vertical stripe as selecting pattern.
• horizontalstripe: sets horizontal stripe as selecting pattern.
• bubble: sets bubble as selecting pattern.

series

SeriesModel[]

The configuration for series in the chart.

subTitle

string

SubTitle of the chart.

subTitleStyle

titleSettingsModel

Options for customizing the Subtitle of the Chart.

tabIndex

number

TabIndex value for the chart.

theme

ChartTheme

Specifies the theme for the chart.

title

string

Title of the chart

titleStyle

titleSettingsModel

Options for customizing the title of the Chart.

tooltip

TooltipSettingsModel

Options for customizing the tooltip of the chart.

useGroupingSeparator

boolean

Specifies whether a grouping separator should be used for a number.

width

string

The width of the chart as a string accepts input as both like ‘100px’ or ‘100%‘. If specified as ‘100%, chart renders to the full width of its parent element.

zoomSettings

ZoomSettingsModel

Options to enable the zooming feature in the chart.