Vue Chart API
The Chart is a UI component that visualizes data from a local or remote storage using a great variety of series types along with different interactive elements, such as tooltips, crosshair pointer, legend, etc.
See Also
jQuery
Angular
Vue
React
Props
This section describes properties that configure the contents, behavior and appearance of the Chart UI component.
| Name | Description |
|---|---|
| adaptiveLayout |
Specifies adaptive layout properties. |
| adjustOnZoom |
Specifies whether to adjust the value axis's visualRange when the argument axis is being zoomed or panned. |
| animation |
Specifies animation properties. |
| annotations |
Specifies the annotation collection. |
| argumentAxis |
Configures the argument axis. |
| autoHidePointMarkers |
Specifies whether to hide series point markers automatically to reduce visual clutter. |
| barGroupPadding |
Controls the padding and consequently the width of a group of bars with the same argument using relative units. Ignored if the barGroupWidth property is set. |
| barGroupWidth |
Specifies a fixed width for groups of bars with the same argument, measured in pixels. Takes precedence over the barGroupPadding property. |
| commonAnnotationSettings |
Specifies settings common for all annotations in the chart. |
| commonAxisSettings |
Defines common settings for both the argument and value axis in a chart. |
| commonPaneSettings |
Defines common settings for all panes in a chart. |
| commonSeriesSettings |
Specifies settings common for all series in the chart. |
| containerBackgroundColor |
Specifies background color of the chart container. |
| crosshair |
Configures the crosshair feature. |
| customizeAnnotation |
Customizes an individual annotation. |
| customizeLabel |
Customizes the appearance of an individual point label. |
| customizePoint |
Customizes the appearance of an individual series point. |
| dataPrepareSettings |
Processes data before visualizing it. |
| dataSource |
Binds the UI component to data. |
| defaultPane |
Specifies which pane should be used by default. |
| disabled |
Specifies whether the UI component responds to user interaction. |
| elementAttr |
Specifies the global attributes to be attached to the UI component's container element. |
| export |
Configures the exporting and printing features. |
| legend |
Specifies the properties of a chart's legend. |
| loadingIndicator |
Configures the loading indicator. |
| margin |
Generates space around the UI component. |
| maxBubbleSize |
Specifies a coefficient determining the diameter of the largest bubble. |
| minBubbleSize |
Specifies the diameter of the smallest bubble measured in pixels. |
| negativesAsZeroes |
Forces the UI component to treat negative values as zeroes. Applies to stacked-like series only. |
| onArgumentAxisClick |
A function that is executed when a label on the argument axis is clicked or tapped. |
| onDisposing |
A function that is executed before the UI component is disposed of. |
| onDone |
A function that is executed when all series are ready. |
| onDrawn |
A function that is executed when the UI component's rendering has finished. |
| onExported |
A function that is executed after the UI component is exported. |
| onExporting |
A function that is executed before the UI component is exported. |
| onFileSaving |
A function that is executed before a file with exported UI component is saved to the user's local storage. |
| onIncidentOccurred |
A function that is executed when an error or warning occurs. |
| onInitialized |
A function used in JavaScript frameworks to save the UI component instance. |
| onLegendClick |
A function that is executed when a legend item is clicked or tapped. |
| onOptionChanged |
A function that is executed after a UI component property is changed. |
| onPointClick |
A function that is executed when a series point is clicked or tapped. |
| onPointHoverChanged |
A function that is executed after the pointer enters or leaves a series point. |
| onPointSelectionChanged |
A function that is executed when a series point is selected or selection is canceled. |
| onSeriesClick |
A function that is executed when a series is clicked or tapped. |
| onSeriesHoverChanged |
A function that is executed after the pointer enters or leaves a series. |
| onSeriesSelectionChanged |
A function that is executed when a series is selected or selection is canceled. |
| onTooltipHidden |
A function that is executed when a tooltip becomes hidden. |
| onTooltipShown |
A function that is executed when a tooltip appears. |
| onZoomEnd |
A function that is executed when zooming or panning ends. |
| onZoomStart |
A function that is executed when zooming or panning begins. |
| palette |
Sets the palette to be used for colorizing series and their elements. |
| paletteExtensionMode |
Specifies what to do with colors in the palette when their number is less than the number of series (in the Chart UI component) or points in a series (in the PieChart UI component). |
| panes |
Declares a collection of panes. |
| pathModified |
Notifies the UI component that it is embedded into an HTML page that uses a tag modifying the path. |
| pointSelectionMode |
Specifies whether a single point or multiple points can be selected in the chart. |
| redrawOnResize |
Specifies whether to redraw the UI component when the size of the container changes or a mobile device rotates. |
| resizePanesOnZoom |
Specifies whether panes can be resized if other chart elements require more space after zooming or panning. |
| resolveLabelOverlapping |
Specifies how the chart must behave when series point labels overlap. |
| rotated |
Swaps the axes around making the value axis horizontal and the argument axis vertical. |
| rtlEnabled |
Switches the UI component to a right-to-left representation. |
| scrollBar |
Specifies the settings of the scroll bar. |
| series |
Specifies properties for Chart UI component series. |
| seriesSelectionMode |
Specifies whether a single series or multiple series can be selected in the chart. |
| seriesTemplate |
Defines properties for the series template. |
| size |
Specifies the UI component's size in pixels. |
| stickyHovering |
Specifies whether a point should remain in the hover state when the mouse pointer moves away. |
| synchronizeMultiAxes |
Indicates whether or not to synchronize value axes when they are displayed on a single pane. |
| theme |
Sets the name of the theme the UI component uses. |
| title |
Configures the UI component's title. |
| tooltip | |
| valueAxis |
Configures the value axis. |
| zoomAndPan |
Configures zooming and panning. |
See Also
Methods
| Name | Description |
|---|---|
| beginUpdate() |
Postpones rendering that can negatively affect performance until the endUpdate() method is called. |
| clearSelection() |
Deselects the chart's selected series. The series is displayed in an initial style. |
| dispose() |
Disposes of all the resources allocated to the Chart instance. |
| element() |
Gets the root UI component element. |
| endUpdate() |
Refreshes the UI component after a call of the beginUpdate() method. |
| exportTo(fileName, format) |
Exports the UI component. |
| getAllSeries() |
Gets all the series. |
| getArgumentAxis() |
Gets the argument axis. |
| getDataSource() |
Gets the DataSource instance. |
| getInstance(element) |
Gets the instance of a UI component found using its DOM node. |
| getSeriesByName(seriesName) |
Gets a series with a specific name. |
| getSeriesByPos(seriesIndex) |
Gets a series with a specific index. |
| getSize() |
Gets the current UI component size. |
| getValueAxis() |
Gets a value axis. |
| getValueAxis(name) |
Gets a value axis with the specified name. |
| hideLoadingIndicator() |
Hides the loading indicator. |
| hideTooltip() |
Hides all UI component tooltips. |
| instance() |
Gets the UI component's instance. Use it to access other methods of the UI component. |
| off(eventName) |
Detaches all event handlers from a single event. |
| off(eventName, eventHandler) |
Detaches a particular event handler from a single event. |
| on(eventName, eventHandler) |
Subscribes to an event. |
| on(events) |
Subscribes to events. |
| option() |
Gets all UI component properties. |
| option(optionName) |
Gets the value of a single property. |
| option(optionName, optionValue) |
Updates the value of a single property. |
| option(options) |
Updates the values of several properties. |
| print() |
Opens the browser's print window. |
| refresh() |
Reloads data and repaints the UI component. |
| render() |
Redraws the UI component. |
| render(renderOptions) |
Redraws the UI component. |
| resetOption(optionName) |
Resets a property to its default value. |
| resetVisualRange() |
Resets the visual ranges of both axes to the data range or to the whole range if it is within the data range. |
| showLoadingIndicator() |
Shows the loading indicator. |
| svg() |
Gets the UI component's SVG markup. |
| zoomArgument(startValue, endValue) |
Sets the argument axis' start and end values. |
Events
| Name | Description |
|---|---|
| argumentAxisClick |
Raised when a label on the argument axis is clicked or tapped. |
| disposing |
Raised before the UI component is disposed of. |
| done |
Raised when all series are ready. |
| drawn |
Raised when the UI component's rendering has finished. |
| exported |
Raised after the UI component is exported. |
| exporting |
Raised before the UI component is exported. |
| fileSaving |
Raised before a file with exported UI component is saved to the user's local storage. |
| incidentOccurred |
Raised when an error or warning occurs. |
| initialized |
Raised only once, after the UI component is initialized. |
| legendClick |
Raised when a legend item is clicked or tapped. |
| optionChanged |
Raised after a UI component property is changed. |
| pointClick |
Raised when a series point is clicked or tapped. |
| pointHoverChanged |
Raised after the pointer enters or leaves a series point. |
| pointSelectionChanged |
Raised when a series point is selected or selection is canceled. |
| seriesClick |
Raised when a series is clicked or tapped. |
| seriesHoverChanged |
Raised after the pointer enters or leaves a series. |
| seriesSelectionChanged |
Raised when a series is selected or selection is canceled. |
| tooltipHidden |
Raised when a tooltip becomes hidden. |
| tooltipShown |
Raised when a tooltip appears. |
| zoomEnd |
Raised when zooming or panning ends. |
| zoomStart |
Raised when zooming or panning begins. |
Series Types
| Name | Description |
|---|---|
| AreaSeries |
Describes settings supported by a series of the area type. |
| BarSeries |
Describes settings supported by a series of the bar type. |
| BubbleSeries |
Describes settings supported by a series of the bubble type. |
| CandleStickSeries |
Describes settings supported by a series of the candlestick type. |
| FullStackedAreaSeries |
Describes settings supported by a series of the full-stacked area type. |
| FullStackedBarSeries |
Describes settings supported by a series of the full-stacked bar type. |
| FullStackedLineSeries |
Describes settings supported by a series of the full-stacked line type. |
| FullStackedSplineAreaSeries |
Describes settings supported by a series of the full-stacked spline area type. |
| FullStackedSplineSeries |
Describes settings supported by a series of the full-stacked spline area type. An object defining a series of the fullStackedSpline type. |
| LineSeries |
Describes settings supported by a series of the line type. |
| RangeAreaSeries |
Describes settings supported by a series of the range area type. |
| RangeBarSeries |
Describes settings supported by a series of the range bar type. |
| ScatterSeries |
Describes settings supported by a series of the scatter type. |
| SplineAreaSeries |
Describes settings supported by a series of the spline area type. |
| SplineSeries |
Describes settings supported by a series of the spline type. |
| StackedAreaSeries |
Describes settings supported by a series of the stacked area type. |
| StackedBarSeries |
Describes settings supported by a series of the stacked bar type. |
| StackedLineSeries |
Describes settings supported by a series of the stacked line type. |
| StackedSplineAreaSeries |
Describes settings supported by a series of the stacked spline area type. |
| StackedSplineSeries |
Describes settings supported by a series of the stacked spline type. |
| StepAreaSeries |
Describes settings supported by a series of the step rea type. |
| StepLineSeries |
Describes settings supported by a series of the step line type. |
| StockSeries |
Describes settings supported by a series of the stock type. |
Types
| Name | Description |
|---|---|
| AggregatedPointsPosition |
Specifies the start position of the aggregated series points in the aggregation interval. |
| ArgumentAxis |
Configures the argument axis. |
| ArgumentAxisClickEvent |
The type of the argumentAxisClick event handler's argument. |
| ArgumentAxisConstantLines |
Declares a collection of constant lines belonging to the argument axis. |
| ArgumentAxisConstantLinesLabel |
Configures the constant line label. |
| ArgumentAxisConstantLineStyle |
Specifies the appearance of those constant lines that belong to the argument axis. |
| ArgumentAxisConstantLineStyleLabel |
Specifies the appearance of the labels of those constant lines that belong to the argument axis. |
| ArgumentAxisLabel |
Configures the labels of the argument axis. |
| ArgumentAxisStrips |
Declares a collection of strips belonging to the argument axis. |
| ArgumentAxisStripsLabel |
Configures the strip label. |
| ArgumentAxisTitle |
Configures the axis title. |
| ChartBubbleSeriesAggregationMethod |
Specifies how to aggregate series points. |
| ChartFinancialSeriesAggregationMethod |
Specifies how to aggregate series points. |
| ChartLabelDisplayMode |
Specifies how to rotate or stagger horizontal axis labels. |
| ChartRangeSeriesAggregationMethod |
Specifies how to aggregate series points. |
| ChartSeriesAggregationMethod |
Specifies how to aggregate series points. |
| ChartSingleValueSeriesAggregationMethod |
Specifies how to aggregate series points. |
| ChartTooltipLocation |
Specifies whether the tooltip must be located in the center of a series point or on its edge. |
| ChartZoomAndPanMode |
Specifies whether users are allowed to zoom and/or pan the argument and value axis. |
| CommonAxisSettings |
Defines common settings for both the argument and value axis in a chart. |
| CommonAxisSettingsConstantLineStyle |
Configures the appearance of all constant lines in the UI component. |
| CommonAxisSettingsConstantLineStyleLabel |
Configures constant line labels. |
| CommonAxisSettingsLabel |
Configures axis labels. |
| CommonAxisSettingsStripStyle |
Configures the appearance of strips. |
| CommonAxisSettingsStripStyleLabel |
Configures the appearance of strip labels. |
| CommonAxisSettingsTitle |
Configures axis titles. |
| CommonPaneSettings |
Defines common settings for all panes in a chart. |
| CommonSeriesSettings |
Specifies settings common for all series in the chart. |
| DisposingEvent |
The type of the disposing event handler's argument. |
| DoneEvent |
The type of the done event handler's argument. |
| DrawnEvent |
The type of the drawn event handler's argument. |
| EventKeyModifier |
Specifies the key that enables panning when dragToZoom is true. |
| ExportedEvent |
The type of the exported event handler's argument. |
| ExportingEvent |
The type of the exporting event handler's argument. |
| FileSavingEvent |
The type of the fileSaving event handler's argument. |
| FinancialChartReductionLevel |
Specifies whether high, low, open or close prices of points should be compared. |
| IncidentOccurredEvent |
The type of the incidentOccurred event handler's argument. |
| InitializedEvent |
The type of the initialized event handler's argument. |
| Legend |
Specifies the properties of a chart's legend. |
| LegendClickEvent |
The type of the legendClick event handler's argument. |
| OptionChangedEvent |
The type of the optionChanged event handler's argument. |
| Panes |
Declares a collection of panes. |
| PointClickEvent |
The type of the pointClick event handler's argument. |
| PointHoverChangedEvent |
The type of the pointHoverChanged event handler's argument. |
| PointSelectionChangedEvent |
The type of the pointSelectionChanged event handler's argument. |
| SeriesClickEvent |
The type of the seriesClick event handler's argument. |
| SeriesHoverChangedEvent |
The type of the seriesHoverChanged event handler's argument. |
| SeriesSelectionChangedEvent |
The type of the seriesSelectionChanged event handler's argument. |
| Tooltip | |
| TooltipHiddenEvent |
The type of the tooltipHidden event handler's argument. |
| TooltipShownEvent |
The type of the tooltipShown event handler's argument. |
| ValueAxis |
Configures the value axis. |
| ValueAxisConstantLines |
Declares a collection of constant lines belonging to the value axis. |
| ValueAxisConstantLinesLabel |
Configures the constant line label. |
| ValueAxisConstantLineStyle |
Specifies the appearance of those constant lines that belong to the value axis. |
| ValueAxisConstantLineStyleLabel |
Specifies the appearance of the labels of those constant lines that belong to the value axis. |
| ValueAxisLabel |
Configures the labels of the value axis. |
| ValueAxisStrips |
Declares a collection of strips belonging to the value axis. |
| ValueAxisStripsLabel |
Configures the strip label. |
| ValueAxisTitle |
Configures the axis title. |
| ZoomEndEvent |
The type of the zoomEnd event handler's argument. |
| ZoomStartEvent |
The type of the zoomStart event handler's argument. |
If you have technical questions, please create a support ticket in the DevExpress Support Center.