JavaScript/jQuery PolarChart - StackedBarSeries

All the settings in this section are specified as follows:

• The commonSeriesSettings object
  Specifies settings for all series in a PolarChart.

• The commonSeriesSettings.stackedbar object
  Specifies settings for all series of the stackedbar type.

• An object in the series array
  Specifies settings for an individual series.

View Demo

When defining series using the series configuration object, set the argumentField property to the corresponding field from the data source for each series individually. If the field that supplies arguments for data points is called in a similar way for several series, there is no need to set the field name for each series individually. Instead, set the field name for the argumentField property of the commonSeriesSettings configuration object at once.

This property accepts a value from 0 to 1 that specifies the correlation between the empty space on a bar's sides and the bar's angular width: 0 - the bar occupies the whole allocated sector; 1 - virtually hides the bar leaving the whole sector empty.

See Also

• Specify the Bar Width
• barGroupPadding
• series.minBarSize

A bar's maximum width is limited. In single-series charts, it cannot be greater than the interval between two major ticks. In multi-series charts, it depends on the number of bars in the parent group and this group's actual width. See the Specify the Bar Width article for more information.

See Also

• barGroupWidth
• series.minBarSize

Series of some types can be displayed with borders (bars, area, etc.). To set custom border settings for all such series at once, use the border object within the commonSeriesSettings configuration object.

If you have several series of one type, you can set border properties specific to this type using the corresponding object (area, line, or another) within the commonSeriesSettings configuration object. In addition, any non-specific series type property of the commonSeriesSettings.border object can be added to the series-type-specific border definition within the commonSeriesSettings.area/line/... | border configuration object. The values that are set within series-type-specific configuration objects override the corresponding common values.

In case you have to set an individual value for a common or series-type-specific border property, use the border object within the series object of the series array. The values that are set individually override corresponding common values.

Specified in the commonSeriesSettings object, this property colors all series in the chart. To color an individual series, specify this property in the series object within the series array.

This property supports the following colors:

• Hexadecimal colors
• RGB colors
• RGBA colors
• Predefined/cross-browser color names
• Predefined SVG colors
• Paint server address

You can also specify a custom pattern or gradient instead of a plain color. Follow the steps below:

1. Call the registerPattern() or registerGradient() method to obtain a fill ID.

2. Set the fillId field to the obtained ID in the color configuration object.

3. Specify the base color for labels and connectors.

$(function(){
    $("#polarChartContainer").dxPolarChart({
        // ...
        series: {
            // ...
            color: {
                base: "#000000",
                fillId: customPatternId
            }
        }
    });
});

<dx-polar-chart ... >
    <dxi-series ...
        [color]="customPattern"
    >
    </dxi-series>
</dx-polar-chart>

// ...

export class AppComponent {
    // ...

    customPattern = {
        base: "#000000",
        fillId: this.customPatternId
    };
} 

<template>
    <DxPolarChart ... >
        <DxSeries :color="customPattern" />
    </DxPolarChart>
</template>

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

export default {
    components: {
        DxPolarChart,
        DxSeries
    },
    data() {
        return {
            // ...
            customPattern: {
                base: "#000000",
                fillId: this.customPatternId
            }
        }
    }
}
</script>

<template>
    <DxPolarChart ... >
        <DxSeries :color="customPattern" />
    </DxPolarChart>
</template>

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

const customPattern = {
    base: "#000000",
    fillId: customPatternId
};
</script>

import React from 'react';
import PolarChart, { Series } from 'devextreme-react/chart'; 

// ...
const customPattern = {
    base: "#000000",
    fillId: customPatternId
};

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

When a user points to the series, it may react in one of the following ways depending on the value of the hoverMode property.

• onlyPoint
  Only the series point that a user pauses on changes its style.
• allSeriesPoints
  All points in the series change their style.
• allArgumentPoints
  The series point that a user pauses on changes its style. Points with the same argument do it as well.
• none
  The series does not react to pointing to it.

See Also

• hoverStyle

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

If you have several series of one type, you can set hover style properties to the values specific to this 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 hover style property for an individual series, use the hoverStyle object within the series object of the series array. The values that are set individually override corresponding common values.

Data points that have the null value do not produce actual series points. Because of this, series may be drawn with unnecessary gaps where missing points should have been. To remove these gaps, set the ignoreEmptyPoints property to true.

Each series point can be accompanied by a text label that represents data related to the point. These are called series point labels. Use the label object's properties to set label properties for all chart series at once.

Specify the label object's properties within the commonSeriesSettings configuration object to set label properties for all chart series at once.

If you have several series of a single type, you can set label 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 the corresponding common values.

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

When there are several series in a chart and series with a large number of points, the point labels may overlap each other and make a chart difficult to read. In this instance, it is better to display the point labels depending on their quantity. To specify the maximum amount of the labels to be displayed, set the required number to the maxLabelCount field. If the number of the points on a series exceeded the number assigned to the maxLabelCount field, the point labels for this series will not be displayed.

When you visualize data with small and large numbers using a bar-like series, the small numbers are represented by very small bars. It makes them difficult to click, select or hover over. In such a case, use the minBarSize property to set the minimal length of a displayed bar.

When a user selects the series, it may react in one of the following ways depending on the value of the selectionMode property.

• onlyPoint
  Only the selected series point changes its style.
• allSeriesPoints
  All points in the selected series change their style.
• allArgumentPoints
  The selected series point changes its style. Points with the same argument do it as well.
• none
  The series does not react to selection.

See Also

• selectionStyle

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

If you have several series of one type, you can set selection style properties to the values specific to this 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 selection style property for an individual series, use the selectionStyle object within the series object of the series array. The values that are set individually override corresponding common values.

By default, this property is set to 'default' for all series of the stackedBar types. So values of all series are located in one stack for each argument value. You can set the stack property to another value for one group of the series and leave the 'default' value for the other group of series. In this instance, series will be divided into two stacks for each argument. In this manner, you can divide series between the required number of logical stacks.

You can set this property for a series individually, for all stackedBar series or for all series in the chart. For this purpose choose the appropriate configuration object for this property: series, commonSeriesSettings.stackedBar or commonSeriesSettings.

When setting a common data source via the dataSource property, you can pass information about a point. For this purpose, add a separate field to the data source in addition to the argument and value fields. To set the specified data to the point instance, set the series' tagField property to the name of the field with the information. In this instance, when clicking a point in the chart, you can access the data associated with this point using the point's instance.

When defining series using the series configuration object, set the tagField property to the corresponding field from the data source for each series individually. If the field that supplies data about points is called similarly in several series, there is no need to set its name for each series individually. Instead, set it for the tagField property of the commonSeriesSettings configuration object.

You can also associate data with a series instance. To learn how to do this, refer to the description of the tag property of the series configuration object.

When defining series using the series configuration object, set the valueField property for each series individually to the corresponding field from the data source. In case you use series templates, specify the valueField property of the commonSeriesSettings configuration object.

When this property is set to false for a series, the series appears invisible. If you require all the series to appear so, assign the same value to the visible property within the commonSeriesSettings configuration object.

In addition, you can show/hide series at runtime by using the show() or hide() method of a particular series respectively.