JavaScript/jQuery PieChart - series
Specifies properties for the series of the PieChart UI component.
A series represents a group of related data points. To configure a series, assign an object to the series property. If PieChart must contain several series, assign an array of such objects to the same property. Refer to the Series Overview topic to learn the basics of what a series is, what it does, and how it helps.
The definitive characteristic of a series is its type. The PieChart UI component provides two series types - Pie and Doughnut.
When you have a multi-series pie, settings that are common for all series can be specified all together. Use the commonSeriesSettings object to do this.
argumentField
Specifies the data source field that provides arguments for series points.
When defining a series, set the argumentField property to the corresponding field from the data source.
argumentType
Specifies the required type for series arguments.
By default, the series arguments have the same type as the values of a corresponding data source field. If the data source field values are numeric, the series arguments will also be numeric, etc. However, you can convert the data source values to another type. In this instance, specify the required type using the argumentType property.
border
An object defining the series border configuration properties.
To set custom border settings for the series, use the border object within the series configuration object.
color
Specifies a series color.
You can use this property to paint all pie slices in the same color.
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:
Call the registerPattern() or registerGradient() method to obtain a fill ID.
Set the
fillId
field to the obtained ID in the color configuration object.Specify the
base
color for labels and connectors.
jQuery
$(function(){ $("#pieChartContainer").dxPieChart({ // ... series: { // ... color: { base: "#000000", fillId: customPatternId } } }); });
Angular
<dx-pie-chart ... > <dxi-series ... [color]="fill" > </dxi-series> </dx-pie-chart>
// ... export class AppComponent { // ... fill = { base: "#000000", fillId: this.customPatternId }; }
Vue
<template> <DxPieChart ... > <DxSeries :color="fill" /> </DxPieChart> </template> <script> import DxPieChart, { DxSeries } from 'devextreme-vue/chart'; // ... export default { components: { DxPieChart, DxSeries }, data() { return { // ... fill: { base: "#000000", fillId: this.customPatternId } } } } </script>
<template> <DxPieChart ... > <DxSeries :color="fill" /> </DxPieChart> </template> <script setup> import DxPieChart, { DxSeries } from 'devextreme-vue/chart'; // ... const fill = { base: "#000000", fillId: customPatternId }; </script>
React
import React from 'react'; import PieChart, { Series } from 'devextreme-react/chart'; // ... const fill = { base: "#000000", fillId: customPatternId }; export default function App() { return ( <PieChart ... > <Series color={fill} /> </PieChart> ); }
hoverMode
Specifies the chart elements to highlight when a series is hovered over.
The following values are available.
- onlyPoint
Changes the appearance of the hovered point only. - none
The appearance of the hovered series is not changed.
To set custom properties for the 'hover' style (which is applied when a series is hovered over), use the hoverStyle configuration object.
hoverStyle
An object defining configuration properties for a hovered series.
To set a custom 'hover' style for the series, use the hoverStyle object within the series configuration object.
label
An object defining the label configuration properties.
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 the series.
maxLabelCount
Specifies how many points are acceptable to be in a series to display all labels for these points. Otherwise, the labels will not be displayed.
When there is a 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.
minSegmentSize
Specifies a minimal size of a displayed pie segment.
When you visualize data with small and large numbers, the small numbers are represented by very small pie slices. It makes them difficult to click, select or hover over. In this case, use the minSegmentSize property to set the minimal size of a displayed pie segment.
selectionMode
Specifies the chart elements to highlight when the series is selected.
The PieChart UI component comes with an API that allows you to select a series or a particular point in code. Use the selectionMode property to specify which series elements to select when the series is selected.
- onlyPoint
Changes the appearance of the selected point only. - none
The appearance of the selected series is not changed.
To set custom properties for the 'selected' style (which is applied when a series is selected), use the selectionStyle configuration object.
selectionStyle
An object defining configuration properties for the series when it is selected.
The PieChart UI component comes with API members that allow you to select the series in code. To set a custom 'selected' style for the series, use the selectionStyle object within the series configuration object.
smallValuesGrouping
Specifies chart segment grouping properties.
If you need to group specific chart segments into one, use the properties of the smallValuesGrouping configuration object.
You can group segments in two different modes. Use a 'topN' mode to group all segments that have an index that is equal to or greater than the value of the topCount property. To group all segments with the value less than the value of the threshold property, use a 'smallValueThreshold' mode.
By default, the resulting segment is called "others". To change this name, specify the groupName property.
tagField
Specifies the name of the data source field that provides data about a point.
When setting a data source, you can pass extra 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 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/hovering/selecting a point in the chart, you can access the data associated with this point using the point's instance.
valueField
Specifies the data source field that provides values for series points.
When defining a series, set the valueField property to the corresponding field from the data source.
If you have technical questions, please create a support ticket in the DevExpress Support Center.