DevExtreme Vue - Overview
A series point is a visual representation of a data object. Series points come in many shapes and sizes because of the different nature of series types.
For those series whose points are simple dots (Range Area and Scatter, all line and area series), point-related settings are collected in the point object. This object can be declared as follows.
jQuery
$(function() { $("#chartContainer").dxChart({ // ... series: [{ point: { // Settings for all points of an individual series } }, { // ... }], commonSeriesSettings: { stackedline: { // or any other series type point: { // Settings for all points belonging to Stacked Line series } }, point: { // Settings for all points of all series } } }); });
Angular
<dx-chart ... > <dxi-series> <dxo-point ... > <!-- Settings for all points of an individual series --> </dxo-point> </dxi-series> <dxo-common-series-settings ... > <dxo-stackedline> <!-- or any other series type --> <dxo-point ... > <!-- Settings for all points belonging to Stacked Line series --> </dxo-point> </dxo-stackedline> <dxo-point ... > <!-- Settings for all points of all series --> </dxo-point> </dxo-common-series-settings> </dx-chart>
import { DxChartModule } from 'devextreme-angular'; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxChartModule ], // ... })
For those series whose points have distinctive appearance (Range Bar and Bubble, all bar and financial series), a dedicated object is not provided, and all point-related settings are declared directly in the series, %seriesType%, or commonSeriesSettings object. For details on available settings, refer to the description of a particular series type in the Series Types section of the API reference.
Settings specified in the manner described above apply to a congregation of series points. If you need to customize an individual point, assign a function to the customizePoint option. This function must return an object with options for the point that you want to customize.
jQuery
$(function() { $("#chartContainer").dxChart({ // ... series: { point: { color: 'blue' } }, // Assigns the red color to all series points with value more than 100 // Other series points remain painted in blue customizePoint: function (pointInfo) { return pointInfo.value > 100 ? { color: 'red' } : { } } }); });
Angular
<dx-chart [customizePoint]="customizePoint"> <dxi-series> <dxo-point color="blue" ></dxo-point> </dxi-series> </dx-chart>
import { DxChartModule } from 'devextreme-angular'; // ... export class AppComponent { // Assigns the red color to all series points with value more than 100 // Other series points remain painted in blue customizePoint (pointInfo: any) { return pointInfo.value > 100 ? { color: 'red' } : { } }; } @NgModule({ imports: [ // ... DxChartModule ], // ... })
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.