ChartModel

23 Sep 202515 minutes to read

Interface for a class Chart

Properties

afterExport EmitType<IAfterExportEventArgs>

Triggers after the export is completed.

animationComplete EmitType<IAnimationCompleteEventArgs>

Triggers after the animation for the series is completed.

annotationRender EmitType<IAnnotationRenderEventArgs>

Triggers before the annotation gets rendered. This event allows for modifications of the annotation content and its location before it is rendered on the chart.

axisLabelClick EmitType<IAxisLabelClickEventArgs>

Triggers when the x-axis label is clicked.

axisLabelRender EmitType<IAxisLabelRenderEventArgs>

Triggers before each axis label is rendered. This event allows for the customization of axis label and its font style before rendering on the chart.

axisMultiLabelRender EmitType<IAxisMultiLabelRenderEventArgs>

Triggers before each axis multi-label is rendered. This event allows modification of multi-labels on the axis before they are rendered.

axisRangeCalculated EmitType<IAxisRangeCalculatedEventArgs>

Triggers before each axis range is rendered. This event allows modification of the axis range and interval that are calculated based on data.

beforeExport EmitType<IExportEventArgs>

Triggers before the export process begins. This event allows for the customization of export settings before the chart is exported.

beforePrint EmitType<IPrintEventArgs>

Triggers before the printing process starts. This event allows for the modification of the chart’s HTML content before it is sent to the printer.

beforeResize EmitType<IBeforeResizeEventArgs>

Triggers before the chart is resized. This event allows for modifications to the chart size before resizing occurs.

chartDoubleClick EmitType<IMouseEventArgs>

Triggers when double-clicking the chart.

chartMouseClick EmitType<IMouseEventArgs>

Triggers when clicking on the chart.

chartMouseDown EmitType<IMouseEventArgs>

Triggers on mouse down.

chartMouseLeave EmitType<IMouseEventArgs>

Triggers when the cursor leaves the chart.

chartMouseMove EmitType<IMouseEventArgs>

Triggers on hovering over the chart.

chartMouseUp EmitType<IMouseEventArgs>

Triggers on mouse up.

drag EmitType<IDataEditingEventArgs>

Triggers when the point is being dragged.

dragComplete EmitType<IDragCompleteEventArgs>

Triggers after the drag selection is completed.

dragEnd EmitType<IDataEditingEventArgs>

Triggers when the point drag operation ends.

dragStart EmitType<IDataEditingEventArgs>

Triggers when the drag operation for a point starts.

legendClick EmitType<ILegendClickEventArgs>

Triggers after clicking on a legend item.

legendRender EmitType<ILegendRenderEventArgs>

Triggers before the legend is rendered. This allows the customization of legend before rendering on the chart.

load EmitType<ILoadedEventArgs>

Triggers before the chart loads. This event allows for customization and configuration before the chart is rendered.

loaded EmitType<ILoadedEventArgs>

Triggers after the chart has fully loaded.

multiLevelLabelClick EmitType<IMultiLevelLabelClickEventArgs>

Triggers after clicking on a multi-level label.

onZooming EmitType<IZoomingEventArgs>

Triggers when the zoom selection started.

pointClick EmitType<IPointEventArgs>

Triggers on point click.

pointDoubleClick EmitType<IPointEventArgs>

Triggers on point double-click.

pointMove EmitType<IPointEventArgs>

Triggers when a data point is hovered.

pointRender EmitType<IPointRenderEventArgs>

Triggers before each point in the series is rendered. This allows for the customization of each data point before it is rendered on the chart.

resized EmitType<IResizeEventArgs>

Triggers after the chart is resized.

scrollChanged EmitType<IScrollEventArgs>

Triggers when the scroll position changes.

scrollEnd EmitType<IScrollEventArgs>

Triggers after the scroll action ends.

scrollStart EmitType<IScrollEventArgs>

Triggers when the scroll action starts.

selectionComplete EmitType<ISelectionCompleteEventArgs>

Triggers after the selection is completed.

seriesRender EmitType<ISeriesRenderEventArgs>

Triggers before the series is rendered. This event allows for the customization of series properties before they are rendered on the chart.

sharedTooltipRender EmitType<ISharedTooltipRenderEventArgs>

Triggers before the shared tooltip for the series is rendered. This event allows customization of the shared tooltip properties such as text, style, and template before it is rendered on the chart.

textRender EmitType<ITextRenderEventArgs>

Triggers before the data label for the series is rendered. This allows customization of data labels before they are rendered on the chart.

tooltipRender EmitType<ITooltipRenderEventArgs>

Triggers before the tooltip for the series is rendered. This event allows customization of the tooltip properties such as text, style, and template before it is rendered on the chart.

zoomComplete EmitType<IZoomCompleteEventArgs>

Triggers after the zoom selection is completed.

accessibility AccessibilityModel

Options to improve accessibility for chart elements.

allowExport boolean

To enable export feature in blazor chart.

allowMultiSelection boolean

If set to true, enables multi-drag selection in the chart.
This feature allows selecting multiple data points by dragging a selection box.

Note that the selectionMode to be set to DragX, DragY, or DragXY for this feature to work.

annotations ChartAnnotationSettingsModel[]

Annotations are used to highlight specific data points or areas in the chart, providing additional context and information.

axes AxisModel[]

Configuration options for the secondary axis in the chart.
Each object in the collection represents an additional axis, allowing for the plotting of multiple data series with different scales.

background string

The background color of the chart accepts values in hex and rgba formats as valid CSS color strings.

backgroundImage string

The background image of the chart accepts a string value as a URL link or the location of an image.

border BorderModel

Options for customizing the appearance of the border in the chart by using the color and width properties in the border.

chartArea ChartAreaModel

Configuration options for the chart area’s border and background.

columns ColumnModel[]

Options to split the chart into multiple plotting areas vertically.
Each object in the collection represents a separate plotting area (column) in the chart, allowing multiple data series to be displayed in distinct vertical sections.

crosshair CrosshairSettingsModel

The crosshair displays lines on the chart that follow the mouse cursor and show the axis values of the data points.

dataSource Object|DataManager

Specifies the data source 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: 'https://services.syncfusion.com/js/production/api/orders'
});
let query: Query = new Query().take(5);
let chart: Chart = new Chart({
...
dataSource: dataManager,
  series: [{
       type: 'Column',
       xName: 'CustomerID',
       yName: 'Freight',
       query: query
   }],
...
});
chart.appendTo('#Chart');

description string

A description for the chart that provides additional information about its content for screen readers.

enableAnimation boolean

If set to true, animation effects will be enabled for chart elements such as axis labels, gridlines, series, markers, and data labels when the legend is clicked, or the data source is updated.

enableAutoIntervalOnBothAxis boolean

If set to true, the intervals for all the axes will be calculated automatically based on the zoomed range.

enableCanvas boolean

When set to true, the chart will render using a canvas.

enableExport boolean

When set to true, it enables exporting the chart to various formats such as JPEG, PNG, SVG, PDF, XLSX, or CSV.

enableHtmlSanitizer boolean

Specifies whether to display or remove the untrusted HTML values in the Chart component.
If ‘enableHtmlSanitizer’ set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.

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

This property controls whether columns for different series appear next to each other in a column chart.

focusBorderColor string

Customize the focus border color.
If not specified, the element will use the default focus border color.

focusBorderMargin number

Customize the focus border margin.
If not specified, the element will use the default focus border margin.

focusBorderWidth number

Customize the focus border width.
If not specified, the element will use the default focus border width.

height string

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

highlightColor string

Defines the color used to highlight a data point on mouse hover.

highlightMode HighlightMode

The highlightMode property determines how a series or individual data points are highlighted in the chart.
The available options are:

  • ‘None’: Disables highlighting.
  • ‘Series’: Highlights an entire series of data points.
  • ‘Point’: Highlights a single data point.
  • ‘Cluster’: Highlights a group of data points that belong to the same cluster.

highlightPattern SelectionPattern

The highlightPattern property determines how the data points or series are visually highlighted.
The available options are:

  • ‘None’: No highlighting pattern.
  • ‘Chessboard’: Applies a chessboard pattern for highlighting.
  • ‘Dots’: Applies a dot pattern for highlighting.
  • ‘DiagonalForward’: Applies a forward diagonal line pattern for highlighting.
  • ‘Crosshatch’: Applies a crosshatch pattern for highlighting.
  • ‘Pacman’: Applies a Pacman pattern for highlighting.
  • ‘DiagonalBackward’: Applies a backward diagonal line pattern for highlighting.
  • ‘Grid’: Applies a grid pattern for highlighting.
  • ‘Turquoise’: Applies a turquoise pattern for highlighting.
  • ‘Star’: Applies a star pattern for highlighting.
  • ‘Triangle’: Applies a triangle pattern for highlighting.
  • ‘Circle’: Applies a circle pattern for highlighting.
  • ‘Tile’: Applies a tile pattern for highlighting.
  • ‘HorizontalDash’: Applies a horizontal dash pattern for highlighting.
  • ‘VerticalDash’: Applies a vertical dash pattern for highlighting.
  • ‘Rectangle’: Applies a rectangle pattern for highlighting.
  • ‘Box’: Applies a box pattern for highlighting.
  • ‘VerticalStripe’: Applies a vertical stripe pattern for highlighting.
  • ‘HorizontalStripe’: Applies a horizontal stripe pattern for highlighting.
  • ‘Bubble’: Applies a bubble pattern for highlighting.

indicators TechnicalIndicatorModel[]

Technical indicators assist in evaluating market conditions and identifying trends for making trading decisions.

isMultiSelect boolean

When set to true, it allows selecting multiple data points, series, or clusters.

Note that the selectionMode must be set to Point, Series, or Cluster for multi-selection to be enabled.

isTransposed boolean

When set to true, the chart will render in a transposed manner, where the X and Y axes are interchanged.

legendSettings LegendSettingsModel

The legend provides descriptive information about the data series displayed in the chart, helping to understand what each series represents.

locale string

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

margin MarginModel

Options to customize the margins around the chart, including the left, right, top, and bottom margins.
These margins refer to the space between the outer edge of the chart and its chart area.

noDataTemplate string|Function

Specifies the template to be displayed when the chart has no data.
This property enables the users to display customized messages, images, or other UI elements in place of an empty chart.
It provides a better user experience by offering context when no data points are available.

palettes string[]

The palettes array defines a set of colors used for rendering the chart’s series. Each color in the array is applied to the series in order.

primaryXAxis AxisModel

The primaryXAxis property configures the horizontal axis of the chart, including settings for axis labels, tick marks, grid lines, and axis ranges.

primaryYAxis AxisModel

The primaryYAxis property configures the vertical axis of the chart, including settings for axis labels, tick marks, grid lines, and axis ranges.

rangeColorSettings RangeColorSettingModel[]

The rangeColorSettings property specifies a set of rules for applying different colors to points based on their value ranges.

rows RowModel[]

Options to split the chart into multiple plotting areas horizontally.
Each object in the collection represents a separate plotting area (row) in the chart, allowing multiple data series to be displayed in distinct horizontal sections.

selectedDataIndexes IndexesModel[]

Specifies the point indexes to be selected when a chart is initially loaded.

Note that selectionMode or highlightMode must be set to Point, Series, or Cluster for this feature to work.
```html

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

selectionMode SelectionMode

The selectionMode property determines how data points or series can be highlighted or selected.
The available options are:

  • ‘None’: Disables any form of highlight or selection.
  • ‘Series’: Highlights or selects an entire series of data points.
  • ‘Point’: Highlights or selects a single data point.
  • ‘Cluster’: Highlights or selects a group of data points that belong to the same cluster.
  • ‘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

The selectionPattern property determines how the selected data points or series are visually represented.
The available options are:

  • ‘None’: No selection pattern is applied.
  • ‘Chessboard’: Applies a chessboard pattern as the selection effect.
  • ‘Dots’: Applies a dot pattern as the selection effect.
  • ‘DiagonalForward’: Applies a forward diagonal line pattern as the selection effect.
  • ‘Crosshatch’: Applies a crosshatch pattern as the selection effect.
  • ‘Pacman’: Applies a Pacman pattern as the selection effect.
  • ‘DiagonalBackward’: Applies a backward diagonal line pattern as the selection effect.
  • ‘Grid’: Applies a grid pattern as the selection effect.
  • ‘Turquoise’: Applies a turquoise pattern as the selection effect.
  • ‘Star’: Applies a star pattern as the selection effect.
  • ‘Triangle’: Applies a triangle pattern as the selection effect.
  • ‘Circle’: Applies a circle pattern as the selection effect.
  • ‘Tile’: Applies a tile pattern as the selection effect.
  • ‘HorizontalDash’: Applies a horizontal dash pattern as the selection effect.
  • ‘VerticalDash’: Applies a vertical dash pattern as the selection effect.
  • ‘Rectangle’: Applies a rectangle pattern as the selection effect.
  • ‘Box’: Applies a box pattern as the selection effect.
  • ‘VerticalStripe’: Applies a vertical stripe pattern as the selection effect.
  • ‘HorizontalStripe’: Applies a horizontal stripe pattern as the selection effect.
  • ‘Bubble’: Applies a bubble pattern as the selection effect.

series SeriesModel[]

Configuration options for the chart’s series.
Each object in the series collection represents a distinct data series displayed in the chart. Customize various aspects of each series such as data, type, and appearance.

stackLabels StackLabelSettingsModel

Configuration options for stack labels in the chart.
Stack labels display the total value for stacked series, including customization options for appearance and positioning, and other visual elements to enhance chart readability.
This property allows users to modify how stack labels are rendered in a stacked chart.

subTitle string

The subtitle is positioned below the main title and provides additional details about the data represented in the chart.

subTitleStyle titleSettingsModel

Options for customizing the appearance of the subtitle, which displays information about the plotted data below the main title.
Use the fontFamily, size, fontStyle, fontWeight, and color properties in titleSettings to adjust the subtitle’s appearance.

tabIndex number

The tabIndex value determines the order in which the chart container receives focus during keyboard navigation.

theme ChartTheme

The theme applied to the chart for visual styling.
Choose from predefined themes to change the overall look and feel of the chart.
The available themes are:

  • Fabric
  • FabricDark
  • Bootstrap4
  • Bootstrap
  • BootstrapDark
  • HighContrastLight
  • HighContrast
  • Tailwind
  • TailwindDark
  • Bootstrap5
  • Bootstrap5Dark
  • Fluent
  • FluentDark
  • Fluent2
  • Fluent2Dark
  • Fluent2HighContrast
  • Material3
  • Material3Dark
  • Material
  • MaterialDark

title string

The title is displayed at the top of the chart to provide information about the plotted data.

titleStyle titleSettingsModel

Options for customizing the appearance of the title, which displays information about the plotted data.
Use the fontFamily, size, fontStyle, fontWeight, and color properties in titleSettings to adjust the title’s appearance.

tooltip TooltipSettingsModel

Configuration options for the chart’s tooltip, which displays details about the points when hovering over them.

useGroupingSeparator boolean

When set to true, a grouping separator will be used for numbers to separate groups of thousands in the chart.

width string

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

zoomSettings ZoomSettingsModel

Options to enable and configure the zooming feature in the chart.