Interface for a class Chart
EmitType<IAfterExportEventArgs>
Triggers after the export is completed.
EmitType<IAnimationCompleteEventArgs>
Triggers after the animation for the series is completed.
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.
EmitType<IAxisLabelClickEventArgs>
Triggers when the x-axis label is clicked.
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.
EmitType<IAxisMultiLabelRenderEventArgs>
Triggers before each axis multi-label is rendered. This event allows modification of multi-labels on the axis before they are rendered.
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.
Triggers before the export process begins. This event allows for the customization of export settings before the chart is exported.
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.
EmitType<IBeforeResizeEventArgs>
Triggers before the chart is resized. This event allows for modifications to the chart size before resizing occurs.
Triggers when double-clicking the chart.
Triggers when clicking on the chart.
Triggers on mouse down.
Triggers when the cursor leaves the chart.
Triggers on hovering over the chart.
Triggers on mouse up.
EmitType<IDataEditingEventArgs>
Triggers when the point is being dragged.
EmitType<IDragCompleteEventArgs>
Triggers after the drag selection is completed.
EmitType<IDataEditingEventArgs>
Triggers when the point drag operation ends.
EmitType<IDataEditingEventArgs>
Triggers when the drag operation for a point starts.
EmitType<ILegendClickEventArgs>
Triggers after clicking on a legend item.
EmitType<ILegendRenderEventArgs>
Triggers before the legend is rendered. This allows the customization of legend before rendering on the chart.
Triggers before the chart loads. This event allows for customization and configuration before the chart is rendered.
Triggers after the chart has fully loaded.
EmitType<IMultiLevelLabelClickEventArgs>
Triggers after clicking on a multi-level label.
Triggers when the zoom selection started.
Triggers on point click.
Triggers on point double-click.
Triggers when a data point is hovered.
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.
Triggers after the chart is resized.
Triggers when the scroll position changes.
Triggers after the scroll action ends.
Triggers when the scroll action starts.
EmitType<ISelectionCompleteEventArgs>
Triggers after the selection is completed.
EmitType<ISeriesRenderEventArgs>
Triggers before the series is rendered. This event allows for the customization of series properties before they are rendered on the chart.
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.
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.
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.
EmitType<IZoomCompleteEventArgs>
Triggers after the zoom selection is completed.
Options to improve accessibility for chart elements.
boolean
To enable export feature in blazor chart.
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
selectionModeto be set toDragX,DragY, orDragXYfor this feature to work.
ChartAnnotationSettingsModel[]
Annotations are used to highlight specific data points or areas in the chart, providing additional context and information.
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.
string
The background color of the chart accepts values in hex and rgba formats as valid CSS color strings.
string
The background image of the chart accepts a string value as a URL link or the location of an image.
Options for customizing the appearance of the border in the chart by using the color and width properties in the border.
Configuration options for the chart area’s border and background.
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.
The crosshair displays lines on the chart that follow the mouse cursor and show the axis values of the data points.
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'); string
A description for the chart that provides additional information about its content for screen readers.
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.
boolean
If set to true, the intervals for all the axes will be calculated automatically based on the zoomed range.
boolean
When set to true, the chart will render using a canvas.
boolean
When set to true, it enables exporting the chart to various formats such as JPEG, PNG, SVG, PDF, XLSX, or CSV.
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.
boolean
Enable or disable persisting component’s state between page reloads.
boolean
Enable or disable rendering component in right to left direction.
boolean
This property controls whether columns for different series appear next to each other in a column chart.
string
Customize the focus border color. If not specified, the element will use the default focus border color.
number
Customize the focus border margin. If not specified, the element will use the default focus border margin.
number
Customize the focus border width. If not specified, the element will use the default focus border width.
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.
string
Defines the color used to highlight a data point on mouse hover.
The highlightMode property determines how a series or individual data points are highlighted in the chart.
The available options are:
The highlightPattern property determines how the data points or series are visually highlighted.
The available options are:
Technical indicators assist in evaluating market conditions and identifying trends for making trading decisions.
boolean
When set to true, it allows selecting multiple data points, series, or clusters.
Note that the
selectionModemust be set toPoint,Series, orClusterfor multi-selection to be enabled.
boolean
When set to true, the chart will render in a transposed manner, where the X and Y axes are interchanged.
The legend provides descriptive information about the data series displayed in the chart, helping to understand what each series represents.
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
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.
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.
The primaryXAxis property configures the horizontal axis of the chart, including settings for axis labels, tick marks, grid lines, and axis ranges.
The primaryYAxis property configures the vertical axis of the chart, including settings for axis labels, tick marks, grid lines, and axis ranges.
The rangeColorSettings property specifies a set of rules for applying different colors to points based on their value ranges.
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.
Specifies the point indexes to be selected when a chart is initially loaded.
Note that
selectionModeorhighlightModemust be set toPoint,Series, orClusterfor this feature to work.
<div id='Chart'></div>let chart: Chart = new Chart({
...
selectionMode: 'Point',
selectedDataIndexes: [ { series: 0, point: 1},
{ series: 2, point: 3} ],
...
});
chart.appendTo('#Chart');The selectionMode property determines how data points or series can be highlighted or selected.
The available options are:
The selectionPattern property determines how the selected data points or series are visually represented.
The available options are:
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.
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.
string
The subtitle is positioned below the main title and provides additional details about the data represented in the chart.
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.
number
The tabIndex value determines the order in which the chart container receives focus during keyboard navigation.
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:
string
The title is displayed at the top of the chart to provide information about the plotted data.
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.
Configuration options for the chart’s tooltip, which displays details about the points when hovering over them.
boolean
When set to true, a grouping separator will be used for numbers to separate groups of thousands in the chart.
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.
Options to enable and configure the zooming feature in the chart.