ZoomCharts Documentation

Version: 1.21.1 (2024-11-08)
Switch to Version 2.0 (BETA)

PieChart.settings

This section is defined by the type PieChartSettings.

Properties

Inherited from: BaseSettings
View section details

Advanced chart settings. Be advised that they are subject to change, backwards compatibility is not guaranteed.

Inherited from: BaseSettings
View section details

Chart area related settings.

assetsUrlBase: string
Default value: ""
Inherited from: BaseSettings

The URL root where the ZoomCharts library and assets are located. For example, if the base.css file is available at 'http://server/css/zoomcharts/zc.css' then this value should be set to 'http://server/css/zoomcharts/'. Note that the library will try to determine its location automatically by searching the included script tags. So this property can be skipped if the assets folder is located next to 'zoomcharts.js' file on the server.

container: string | HTMLElement
Default value: null
Inherited from: BaseSettings

Element of the page where the chart will be inserted. Any HTML element should work, for example you can use a <div>.

Any contents of the element will be cleared - this behavior can be used to specify a loading message as the initial content, for example <div>Chart is being initialized...</div>.

Note that a single element can host only one chart. If the same container is given to another chart, the previous chart will be automatically disposed.

Unless parentChart is specified, the value of the property is mandatory and can only be specified while creating the chart, not with updateSettings. The value can be either an ID of an existing element or a reference to a DOM element.

Inherited from: BaseSettings
View section details

Settings for displaying chart credits. Use it as a reference to additional data sources if necessery.

Chart including credits

Note that even if credits enabled on page load, it's possible to hide on exported images.

Default value: [ { "id": "default", "url": null, "urlParameters": [], "postprocessorFunction": null, "preloaded": null, "format": "JSON", "requestTimeout": 40000, "numberOfParallelRequests": 3, "itemsToLoad": 50, "partialLoad": true, "autoCategories": null, "sortField": null, "dataFunction": null } ]
Inherited from: BaseSettings
View section details

Settings used to load data into chart. Customise preferred data source feeding methods. You can use one of these options: url, data function, preloaded data.

Inherited from: BaseSettings
View section details

The events used to handle user interaction with UI elements.

Configurable conditions to filter the raw data values for subset of drawing slices.

Properties
allowZeroValues: boolean
Default value: false
Introduced in version 1.14.0.

Determines if zero values are automatically filtered from the data or if they will be displayed.

Note that if you want to show the empty values in the piechart, it might be useful to set interaction.others.minSliceFraction to 0 or slice.minFraction to a value larger than 0.

sliceFilter: (sliceData: PieChartDataObject) => boolean
Default value: null

Function to filter visible slices.

Parameters

slice filtering data

Return value
Data type: boolean

true to show the slice, false to hide the slice.

Slice icons as an additional element of style to highlight each individual slice or groups.

Properties
autohideWhenTooSmall: boolean
Default value: true

Whether to render icons if smaller than min value of sizeExtent.

placement: "auto" | "center"
Default value: "auto"

Icon placement method

Valid values:
  • auto - maximize icon size
  • center - always place in center of slice
sizeExtent: [number, number]
Default value: [ 16, 64 ]

Min and max value of icon size. The icon size is automatically computed from available space.

Rising content field while hovering over slice. Content returned in a form of html and is relevant to context of slice hovered.

Properties
contentsFunction: (sliceData: PieChartDataObject, slice: PieChartSlice, callback: (result: string | HTMLElement) => void) => string | HTMLElement
Default value: null

Prepare custom info popup contents. May return null and call callback(contents) later.

Parameters

slice data including subvalues

slice object to apply predefined content

callback: (result: string | HTMLElement) => void

function called to return predefined content

Parameters
Return value
Data type: string | string | HTMLElement
enabled: boolean
Default value: true

Show/hide info popup.

Inherited from: BaseSettings
View section details

Configurable interactivity options to navigate among the slices and pie levels to facilitate analysis of the grouped data in different ways.

View section details

Label settings related to internal and external slice text and their connectors.

Inherited from: BaseSettings
View section details

The chart legend by additional interactivity to navigate between the slices or hilight each of them. Note that click on entries acts the same way as click on slice and is dependant of chart interaction mode.

Inherited from: BaseSettings
View section details

Localizeable strings including export type options and useful default buttons used for chart interaction. Buttons like to navigate back, set the chart on full screen and others.

navigation: anonymous type

Settings to specify initial pie and visible slice offset once the page loaded.

Properties
initialDrilldown: Array<string>
Default value: [ "" ]

Initial pie drilldown to show. For example ['', 'Firefox', 'Firefox 2.5'] denotes to various browsers grouped by versions.

initialOffset: number
Default value: 0

Initial offset, number of items from start.

parentChart: BaseApi
Inherited from: BaseSettings

The parent chart within which the new chart will be rendered. If this property is specified, container cannot be specified.

Use area.left, area.top, area.width and area.height settings to position the subchart within parent chart.

See also

Data values arranged in a circular manner.

Properties
adaptiveRadius: boolean
Default value: true

Whether to adapt pie outer radius dynamically to allow enough space for labels.

backgroundHoveredStyle: PieChartSettingsPieStyle
View section details

Hovered pie background style.

backgroundStyle: PieChartSettingsPieStyle
View section details

Pie background style.

centerMargin: number
Default value: 5

Pie center margin.

depth: number
Default value: 0

Pie depth - used for raised theme.

endAngle: number
Default value: 4.71238898038469

End angle of the pie.

innerRadius: number
Default value: 0.3

Pie inner radius. Inner pies are drawn inside this radius. If the value is less than 1, it is multiplied by current pie radius to get inner radius. Otherwise it represents the inner radius in pixels.

innerRadiusWhenDrilldown: number
Default value: 0.2

Inner radius is extended to radius * innerRadiusWhenDrilldown when drilled down.

margin: number
Default value: 2

Pie margin.

View section details

Pie style when no data is present.

outerMargin: number
Default value: 1

Pie outer margin.

radius: number
Default value: null

Pie outer radius. If not specified, the radius is determined automatically.

rotationSpeed: number
Default value: 0
Experimental property - the API might not be stable and is subject to change.
Introduced in version 1.12.0.

The speed of the rotation for the pie. Set to 0 to disable rotation and return the pie to its specified startAngle.

showInnerPies: boolean
Default value: true

Whether to show inner pies on chart.

showInnerPiesExport: boolean
Default value: true

Whether to show inner pies on exported image.

startAngle: number
Default value: -1.5707963267948966

Start angle of the pie.

View section details

Default pie rendering style.

styleFunction: (pie: PieChartPie) => void
Default value: null

Dynamically determine pie style from data.

Parameters

pie to apply predefined style

theme: "flat" | "bevel" | "can" | "rounded" | "smoothy"
Default value: "flat"

Default pie rendering theme.

Valid values:
  • flat
  • bevel
  • can
  • rounded
  • smoothy
See also
Default value: null

Center X coordinate of the pie chart. If the value is 'null' - coordinate is calculated automatically. If the value is >1 - it specifies the exact x value in pixels. If the value is <=1 - it specifies a fraction of chart width.

Default value: null

Center Y coordinate of the pie chart. If the value is 'null' - coordinate is calculated automatically. If the value is >1 - it specifies the exact x value in pixels. If the value is <=1 - it specifies a fraction of chart height.

Represents settings for individual slices within each pie.

Properties
backgroundActiveStyle: anonymous type

Style to active slices in background (back navigation) pies

Properties
brightness: number
Default value: 1.3
backgroundStyle: anonymous type

Slice style on background (back navigation) pies.

Properties
fillColor: string
Default value: "#e2e2e2"
fillColor2: string
Default value: "#e0e0e0"

Extra property to alternate fill colors on backgrond slices.

fillGradient: GradientDefinition
Default value: null
connectorStyle: BaseSettingsLineStyle
View section details

Label connector line style.

expandableMarkStyle: anonymous type

Expandable slice mark line style

Properties
distance: number
Default value: 4
lineColor: string
Default value: "rgba(255,255,255,0.8)"
lineDash: Array<number>
Default value: null
lineWidth: number
Default value: 1
View section details

Hovered slices style.

margin: number
Default value: 2

Slice margin.

minFraction: number
Default value: 0

Controls minimal visual size of slice. Use this to make very small sizes visually bigger. The value represents smallest fraction of a full pie a slice will take. The range is between 0 and 1. For example using 0.05, all slices smaller than 5% will be grown up to 5%. Other slices will be made proportionally smaller to accommodate for extra size of small slices.

othersStyle: anonymous type

Style for "Others" slice.

Properties
fillColor: string
Default value: "#ccc"
lineDecoration: "zigzag"
Default value: "zigzag"

Circumference decoration of 'others' slice.

Valid values:
  • null - Default style
  • zigzag
previousStyle: anonymous type

Style for the "Previous" slice.

Properties
fillColor: string
Default value: "#ccc"
lineDecoration: "zigzag"
Default value: "zigzag"

Circumference decoration of 'previous' slice.

Valid values:
  • null - Default style
  • zigzag
View section details

Selected slices style.

View section details

Slice style settings

styleFunction: (slice: PieChartSlice, sliceData: PieChartDataObject) => void
Default value: null

Dynamically determine slice style from data.

Parameters

slice to apply predefined style

slice data including subvalues

Default value: { "advanced": { "themeCSSClass": "DVSL-flat", "assets": [] }, "pie": { "theme": "flat", "depth": 0 } }
Inherited from: BaseSettings

Theme to apply. You can either use this to share configuration objects between multiple charts or use one of the predefined themes.

See also
Inherited from: BaseSettings
View section details

The chart's main title.

Inherited from: BaseSettings
View section details

Adjustable settings to manage default and custom toolbar items, as well as toolbar overall appearance.

X