import { PieChartModel } from "@arcgis/charts-components/model/pie-chart-model/pie-chart-model.js";- Inheritance:
- PieChartModel→
chart-model→ chart-model-base→ EventTarget
Constructors
Constructor
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| args | any[] | | |
Properties
asyncUpdatesPromise
Promise that resolves when the setup process is complete.
Note: This promise does not need to be awaited if the setup method has already been awaited. It is simply provided as a way to await the setup process from other functions if needed to avoid race conditions.
backgroundColor
The background color of the chart.
chartRenderer
- Type
- IDrawingInfo["renderer"] | undefined
The chart renderer.
Example
In this example, we set the chartRenderer for a class-break heat chart.
heatChartModel.chartRenderer = { "type": "classBreaks", "field": "arcgis_charts_heat_chart_value", "classBreakInfos": [ { "label": "70 - 145", "classMinValue": 70, "classMaxValue": 145, "symbol": { "type": "esriSFS", "color": [ 212, 227, 255, 255 ], "style": "esriSFSSolid" } }, { "label": "146 - 250", "classMinValue": 146, "classMaxValue": 250, "symbol": { "type": "esriSFS", "color": [ 43, 108, 240, 255 ], "style": "esriSFSSolid" } } ] }; chartSubtitleVisibility
- Type
- boolean
Whether or not the chart subtitle is visible.
Note: Even if the subtitle is visible, it may not be displayed if the subtitle text is empty.
chartSubType
- Type
- ChartSubType
The chart sub type of the series.
chartTitleVisibility
- Type
- boolean
Whether or not the chart title is visible.
Note: Even if the title is visible, it may not be displayed if the title text is empty.
colorMatch
- Type
- boolean
Whether the chart should attempt to match the data source's colors.
true: Attempt to match the data source's colors.
false: Use the colors defined in the config.
config
- Type
- ChartConfig
The current chart configuration object.
dataLabelsSymbol
- Type
- WebChartTextSymbol | undefined
Data labels text symbol (font, color, style).
dataLabelsVisibility
- Type
- boolean
Whether data labels are visible.
dataStore
- Type
- any
Data store object that can be used to store any data needed for the chart.
descriptionSymbol
- Type
- WebChartTextSymbol | undefined
The description text symbol. Contains styling information such as font, color, and symbol style.
descriptionVisibility
- Type
- boolean
Whether or not the chart description is visible.
Note: Even if the description is visible, it may not be displayed if the description text is empty.
displayCategory
- Type
- boolean
Whether to display the category in the legend.
displayCategoryOnDataLabel
- Type
- boolean
Whether to display the category on the data label.
Note: If the setting is not found in the config, it will default to true.
displayCategoryValueOnTooltip
- Type
- boolean
Display category value on tooltip setting from the chart config.
Note: If the setting is not found in the config, it will default to true.
displayNumericValueOnDataLabel
- Type
- boolean
Whether to display the numeric value on the data label.
Note: If the setting is not found in the config, it will default to true.
displayNumericValueOnTooltip
- Type
- boolean
Display numeric value on tooltip setting from the chart config.
Note: If the setting is not found in the config, it will default to true.
displayPercentageOnDataLabel
- Type
- boolean
Whether to display the percentage on the data label.
Note: If the setting is not found in the config, it will default to true.
displayPercentageOnTooltip
- Type
- boolean
Display percentage on tooltip setting from the chart config.
Note: If the setting is not found in the config, it will default to true.
fetchNULLValues
- Type
- boolean
Whether to fetch null values for them to be counted or displayed as categories on the chart.
layer
- Type
- SupportedLayer | undefined
The chart model's layer.
legendPosition
Legend position: top, bottom, left, or right.
legendRoundMarker
- Type
- boolean
Whether legend markers are rounded.
legendTextSymbol
- Type
- WebChartTextSymbol | undefined
Legend item text symbol (font, color, style).
legendTitleSymbol
- Type
- WebChartTextSymbol | undefined
Legend title text symbol (font, color, style).
legendTitleText
- Type
- string
The legend title text.
legendTitleVisibility
- Type
- boolean
Whether the legend title is visible.
legendVisibility
- Type
- boolean
Whether the legend title is visible.
mode
- Type
- PieChartDataModes
The pie chart data mode.
category - The chart is using values from the category field to determine each slice.
fields - The chart is using aggregated values from the numeric fields to determine each slice.
orderByList
- Type
- string[]
List of category's values for custom sort.
Example
pieChartModel.orderByList = ["Field1", "Field2", "Field3"]; seriesLength
- Type
- number
The length of the series array.
splitByValues
- Type
- string[]
The split-by values for the chart.
subtitleSymbol
- Type
- WebChartTextSymbol | undefined
The subtitle text symbol. Contains styling information such as font, color, and symbol style.
subtitleText
- Type
- string
The chart subtitle text.
titleSymbol
- Type
- WebChartTextSymbol | undefined
The title text symbol. Contains styling information such as font, color, and symbol style.
valueLabelMaxWidth
- Type
- number
The maximum width in pixel for the legend value labels.
version
The version of the chart configuration.
Methods
| Method | Signature | Class |
|---|---|---|
generateChartTitle(): string | | |
getCustomSortValues(): Promise<string[]> | | |
getDataFilters inherited | getDataFilters(): WebChartDataFilters | undefined | |
getDataTooltipReverseColor inherited | getDataTooltipReverseColor(seriesIndex?: number): boolean | |
getDataTooltipValueFormat inherited | getDataTooltipValueFormat(seriesIndex: number): NumberFormatOptions | undefined | |
getDataTooltipVisibility inherited | getDataTooltipVisibility(seriesIndex?: number): boolean | |
getDisplayNumericValue inherited | getDisplayNumericValue(): boolean | |
getDisplayPercentage inherited | getDisplayPercentage(): boolean | |
getLabelMaxWidth inherited | getLabelMaxWidth(): number | |
getOriginalSliceName(sliceIndex: number): Date | number | string | null | undefined | | |
getSeriesId inherited | getSeriesId(seriesIndex: number): string | undefined | |
getSeriesIndex inherited | getSeriesIndex(seriesId: string): number | undefined | |
getSeriesVisibility inherited | getSeriesVisibility(seriesIndex: number): boolean | |
getSliceColor(sliceIndex: number): Color | undefined | | |
getSliceId(sliceIndex: number): string | undefined | | |
getSliceIndex(sliceId: string): number | undefined | | |
getSliceName(sliceIndex: number): string | undefined | | |
getSlicesLength(): number | | |
getSortOrder(): PieChartDataSortingKinds | | |
isSameChartAs inherited | isSameChartAs(otherModel: ChartModel | undefined): boolean | |
moveCustomSortValuesInOrderByList(fromIndex: number, toIndex: number): void | | |
moveSeries(fromIndex: number, toIndex: number): void | | |
resetAvailable(): boolean | | |
resetSlices(): void | | |
setDataFilters inherited | setDataFilters(newDataFilters: WebChartDataFilters | undefined): Promise<void> | |
setDataTooltipReverseColor inherited | setDataTooltipReverseColor(reverseColor: boolean, seriesIndex?: number): void | |
setDataTooltipValueFormat inherited | setDataTooltipValueFormat(seriesIndex: number, valueFormat: NumberFormatOptions | undefined): void | |
setDataTooltipVisibility inherited | setDataTooltipVisibility(visibility: boolean, seriesIndex?: number): void | |
setDisplayNumericValue inherited | setDisplayNumericValue(displayNumericValue: boolean): void | |
setDisplayPercentage inherited | setDisplayPercentage(displayPercentage: boolean): void | |
setLabelMaxWidth inherited | setLabelMaxWidth(labelMaxWidth: number | undefined): void | |
setSeriesVisibility inherited | setSeriesVisibility(props: LegendItemVisibility): void | |
setSliceColor(color: Color | undefined, sliceIndex: number): void | | |
setSliceName(name: string, sliceIndex: number): void | | |
setSortOrder(sortOrder: PieChartDataSortingKinds, orderByList?: string[]): void | | |
setup(params: ModelParams<ChartConfig<typeof ModelTypes.PieChart>>): Promise<void> | | |
update inherited | update(): Promise<void> |
generateChartTitle
- Signature
-
generateChartTitle (): string
Generate the proper chart title given the current config.
- Returns
- string
getDataFilters
- Signature
-
getDataFilters (): WebChartDataFilters | undefined
Gets the data filter for the bar chart.
- Returns
- WebChartDataFilters | undefined
getDataTooltipReverseColor
- Signature
-
getDataTooltipReverseColor (seriesIndex?: number): boolean
Gets the setting of the dataTooltipReverseColor property.
- If the
seriesIndexis provided, thedataTooltipReverseColorfor that series will be returned. Otherwise, the same property of the first series will be returned. - If the
dataTooltipReverseColoris not set on the series, the default value offalsewill be returned.
getDataTooltipValueFormat
- Signature
-
getDataTooltipValueFormat (seriesIndex: number): NumberFormatOptions | undefined
Gets the data tooltip value format for a series.
If the series index is out of bounds or the series list is empty, this function will return undefined.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| seriesIndex | The index of the series to retrieve the value format for. | |
- Returns
- NumberFormatOptions | undefined
getDataTooltipVisibility
- Signature
-
getDataTooltipVisibility (seriesIndex?: number): boolean
Gets the visibility of the data tooltips.
- If the
seriesIndexis provided, the visibility for that series will be returned. Otherwise, the visibility of the first series will be returned. - If the visibility is not set on the series, the default value of
truewill be returned.
getDisplayNumericValue
- Signature
-
getDisplayNumericValue (): boolean
Gets the setting for the display of numerical value in the legend items.
Note: Only applicable to pie charts.
- Returns
- boolean
getDisplayPercentage
- Signature
-
getDisplayPercentage (): boolean
Gets the setting for the display of percentage in the legend items.
Note: Only applicable to pie charts.
- Returns
- boolean
getLabelMaxWidth
- Signature
-
getLabelMaxWidth (): number
Gets the maximum width in pixel for the legend item labels.
Note: Only applicable to pie charts.
- Returns
- number
getSeriesId
- Signature
-
getSeriesId (seriesIndex: number): string | undefined
Gets the series ID for a given series index.
If the series index is out of bounds, this function will return undefined.
getSeriesIndex
- Signature
-
getSeriesIndex (seriesId: string): number | undefined
Gets the series index for a given series ID.
If the series ID is not found, this function will return undefined.
getSeriesVisibility
- Signature
-
getSeriesVisibility (seriesIndex: number): boolean
Gets the visibility of a series.
getSlicesLength
- Signature
-
getSlicesLength (): number
Gets the length of the slices array.
- Returns
- number
getSortOrder
- Signature
-
getSortOrder (): PieChartDataSortingKinds
Gets the sort order for the pie chart.
- Returns
- PieChartDataSortingKinds
isSameChartAs
- Signature
-
isSameChartAs (otherModel: ChartModel | undefined): boolean
Checks if the current chart model is for the same chart as another chart model.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| otherModel | The other chart model to compare to. | |
- Returns
- boolean
resetAvailable
- Signature
-
resetAvailable (): boolean
Returns whether the series styling is able to be reset.
- Returns
- boolean
resetSlices
- Signature
-
resetSlices (): void
Resets the slices styling to the default styling.
- Returns
- void
setDataFilters
- Signature
-
setDataFilters (newDataFilters: WebChartDataFilters | undefined): Promise<void>
Sets the data filter for the chart.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| newDataFilters | The new data filter. | |
setDataTooltipReverseColor
- Signature
-
setDataTooltipReverseColor (reverseColor: boolean, seriesIndex?: number): void
Sets the setting of the dataTooltipReverseColor property.
- If the
seriesIndexis provided, the reverse color will be set for that series only. Otherwise, the reverse color will be set for all series.
setDataTooltipValueFormat
- Signature
-
setDataTooltipValueFormat (seriesIndex: number, valueFormat: NumberFormatOptions | undefined): void
Sets the data tooltip value format for a series.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| seriesIndex | The index of the series to set the value format for. | | |
| valueFormat | The value format to set. | |
- Returns
- void
setDataTooltipVisibility
- Signature
-
setDataTooltipVisibility (visibility: boolean, seriesIndex?: number): void
Sets the visibility of the data tooltips.
- If the
seriesIndexis provided, the visibility will be set for that series only. Otherwise, the visibility will be set for all series.
setDisplayNumericValue
- Signature
-
setDisplayNumericValue (displayNumericValue: boolean): void
Sets the setting for the display of numerical value in the legend items.
Note: Only applicable to pie charts.
setDisplayPercentage
- Signature
-
setDisplayPercentage (displayPercentage: boolean): void
Sets the setting for the display of percentage in the legend items.
Note: Only applicable to pie charts.
setLabelMaxWidth
- Signature
-
setLabelMaxWidth (labelMaxWidth: number | undefined): void
Sets the maximum width in pixel for the legend item labels.
Note: Only applicable to pie charts.
setSeriesVisibility
- Signature
-
setSeriesVisibility (props: LegendItemVisibility): void
Sets the visibility of a series.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| props | Visibility options for the series. | |
- Returns
- void
setup
- Signature
-
setup (params: ModelParams<ChartConfig<typeof ModelTypes.PieChart>>): Promise<void>
Completes the async setup process for the chart model. Must be called before using the model.
Parameters
| Parameter | Type | Description | Required |
|---|---|---|---|
| params | ModelParams<ChartConfig<typeof ModelTypes.PieChart>> | | |
update
- Signature
-
update (): Promise<void>
Can be awaited to allow any pending async updates to complete.