Vue PolarChart - commonSeriesSettings.point

An object defining configuration properties for points in line and area series.

Selector: DxPoint
Type:

Object

This member is exposed by the following entities:

To specify point properties for all line and area series at once, use the properties of the point object defined within the commonSeriesSettings configuration object.

If you have several series of a single type, you can set point properties to the values specific to this series type using the corresponding object (area, line etc.) within the commonSeriesSettings configuration object. The values that are set within series-type-specific configuration objects override their corresponding common values.

If you need to set a point property for an individual series, use the point object within the series object of the series array. The values that are set individually override their corresponding common values.

border

Specifies border properties for points in the line and area series.

Selector: DxBorder
Type:

Object

This member is exposed by the following entities:

Use this object to make series points' border visible/invisible and set up such border properties as color and width.

color

Specifies the points color.

Selector: DxColor
Default Value: undefined
This member is exposed by the following entities:

This property supports the following colors:

You can also specify a custom pattern or gradient instead of a plain color. Call the registerPattern() or registerGradient() method to obtain a fill ID. Assign that value to the fillId field.

jQuery
index.js
$(function(){
    $("#polarChartContainer").dxPolarChart({
        // ...
        series: {
            // ...
            point: {
                color: {
                    fillId: customPatternId
                }
            }
        }
    });
});
Angular
app.component.html
app.component.ts
<dx-polar-chart ... >
    <dxi-series ... >
        <dxo-point
            [color]="fill"
        ></dxo-point>
    </dxi-series>
</dx-polar-chart>
// ...

export class AppComponent {
    // ...

    fill = {
        fillId: this.customPatternId
    };
} 
Vue
App.vue (Options API)
App.vue (Composition API)
<template>
    <DxPolarChart ... >
        <DxSeries ... >
            <DxPoint :color="fill" />
        </DxSeries>
    </DxPolarChart>
</template>

<script>
import DxPolarChart, { DxSeries, DxPoint } from 'devextreme-vue/chart'; 
// ...

export default {
    components: {
        DxPolarChart,
        DxSeries,
        DxPoint
    },
    data() {
        return {
            // ...
            fill: {
                fillId: this.customPatternId
            }
        }
    }
}
</script>
<template>
    <DxPolarChart ... >
        <DxSeries ... >
            <DxPoint :color="fill" />
        </DxSeries>
    </DxPolarChart>
</template>

<script setup>
import DxPolarChart, { DxSeries, DxPoint } from 'devextreme-vue/chart';  
// ...

const fill = {
    fillId: customPatternId
};
</script>
React
App.js
import React from 'react';
import PolarChart, { Series, Point } from 'devextreme-react/chart'; 

// ...
const fill = {
    fillId: customPatternId
};

export default function App() { 
    return ( 
        <PolarChart ... >
            <Series ... >
                <Point color={fill} />
            </Series>
        </PolarChart>        
    ); 
} 

hoverMode

Specifies what series points to highlight when a point is hovered over.

Selector: hover-mode
Default Value: 'onlyPoint'
This member is exposed by the following entities:

The following values are available:

  • onlyPoint
    Changes the appearance of the hovered point only.
  • allSeriesPoints
    Changes the appearance of the hovered point together with all series points.
  • allArgumentPoints
    Changes the appearance of the points that correspond to the argument of the hovered point (in all series at once). For instance, the bars corresponding to the argument of the hovered point are highlighted.
  • none
    The appearance of the hovered point is not changed.

To set custom properties for the 'hover' style, which is applied when a point is hovered over, use the hoverStyle configuration object defining it for an individual series (series.point.hoverStyle), for all series of a particular type (commonSeriesSettings.area/line/... | point.hoverStyle), or all series in the chart (see commonSeriesSettings.point.hoverStyle).

hoverStyle

An object defining configuration properties for a hovered point.

Selector: DxHoverStyle
Type:

Object

This member is exposed by the following entities:

To set a custom 'hover' style for points in all series at once, use the point.hoverStyle object within the commonSeriesSettings configuration object.

If you have several series of one type, you can set point hover style properties to the values specific to this series type using the corresponding object (area, line or another) within the commonSeriesSettings configuration object. The values that are set within series-type-specific configuration objects override the corresponding common values.

In case you have to set a point hover style property for an individual series, use the hoverStyle object within the series.point object of the series array. The values that are set individually override corresponding common values.

image

An object specifying the parameters of an image that is used as a point marker.

Selector: DxImage
Type:

String

|

Object

Default Value: undefined
This member is exposed by the following entities:

In a common case, chart points are represented by default point markers. However, you can use a custom image as a point marker. To do this, specify the properties of the image object. Assign a URL leading to your image to the url property. If the size of your image does not correspond to your needs, specify the width and height properties.

NOTE
If you do not need to resize your image, you can assign an image URL directly to the image field.

selectionMode

Specifies what series points to highlight when a point is selected.

Selector: selection-mode
Default Value: 'onlyPoint'
This member is exposed by the following entities:

The PolarChart UI component comes with the API that allows you to select a point in code. Use the selectionMode property to specify what series points to select when a point is selected:

  • onlyPoint
    Changes the appearance of the selected point only.
  • allSeriesPoints
    Changes the appearance of the selected point together with all series points.
  • allArgumentPoints
    Changes the appearance of the points that correspond to the argument of the selected point (in all series at once). For instance, the bars corresponding to the argument of the selected point are highlighted.
  • none
    The appearance of the selected point is not changed.

To set custom properties for the 'selected' style, which is applied when a point is selected, use the selectionStyle configuration object defining it for an individual series (series.point.selectionStyle), for all series of a particular type (commonSeriesSettings.area/line/... | point.selectionStyle), or all series in the chart (see commonSeriesSettings.point.selectionStyle).

selectionStyle

An object defining configuration properties for a selected point.

Selector: DxSelectionStyle
Type:

Object

This member is exposed by the following entities:

The PolarChart UI component comes with API members that allow you to select a point in code. To set a custom 'selected' style for points in all series at once, use the point.selectionStyle object within the commonSeriesSettings configuration object.

If you have several series of one type, you can set point selection style properties to the values specific to the series type using the corresponding object (area, line or another) within the commonSeriesSettings configuration object. The values that are set within series-type-specific configuration objects override the corresponding common values.

In case you have to set a point selection style property for an individual series, use the selectionStyle object within the series.point object of the series array. The values that are set individually override corresponding common values.

size

Specifies the point diameter in pixels for those series that represent data points as symbols (not as bars for instance).

Type:

Number

Default Value: 12
This member is exposed by the following entities:

symbol

Specifies a symbol for presenting points of the line and area series.

Type:

PointSymbol

Default Value: 'circle'
This member is exposed by the following entities:

visible

Specifies the points visibility for a line and area series.

Type:

Boolean

Default Value: true
This member is exposed by the following entities: