Options
All
  • Public
  • Public/Protected
  • All
Menu

Class SciChartPieSurface

Go to JavaScript Charting Documentation
Go to JavaScript Chart Examples
Go to SciChart.js on Github
summary

The SciChartPieSurface is the root Pie and Donut Chart control in SciChart's High Performance Real-time JavaScript Chart Library

description

To create a Pie chart using SciChart, declare a SciChartPieSurface using SciChartPieSurface.create,

Next, add a pie segments by adding a PieSegment to the SciChartPieSurface.pieSegments collection.

You can create a donut chart by setting the SciChartPieSurface.holeRadius property.

You can add and configure a legend by setting the SciChartPieSurface.legend property.

remarks

It is possible to have more than one SciChartPieSurface on screen at the same time. SciChartPieSurfaces scale to fit the parent DIV where they are hosted. Use CSS to position the DIV.

Hierarchy

Implements

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Properties

animate

animate: boolean = true

animationFrames

animationFrames: number = 30

Protected deletables

deletables: IDeletable[] = []

Protected destinations

destinations: TSciChartDestination[]

Readonly domBackgroundSvgContainer

domBackgroundSvgContainer: SVGSVGElement

Readonly domCanvas2D

domCanvas2D: HTMLCanvasElement

Readonly domChartRoot

domChartRoot: HTMLDivElement

Readonly domDivContainer

domDivContainer: HTMLDivElement

Readonly domSeriesBackground

domSeriesBackground: HTMLDivElement

Readonly domSvgAdornerLayer

domSvgAdornerLayer: SVGSVGElement

Readonly domSvgContainer

domSvgContainer: SVGSVGElement

Protected heightAspect

heightAspect: number

Protected idProperty

idProperty: string = generateGuid()

Protected isDeletedProperty

isDeletedProperty: boolean = false

Protected labelProviderProperty

labelProviderProperty: PieLabelProvider

legend

legend: SciChartPieLegend

An optional legend of type SciChartPieLegend which may be added to the Pie chart

onCreatedName

onCreatedName: string

Readonly painted

painted: EventHandler<any> = new EventHandler<any>()

An event handler which notifies its subscribers when a chart was visually painted a display canvas.

remarks

Not applicable to sub-charts

Readonly pieSegments

pieSegments: ObservableArray<IPieSegment>
summary

Gets the collection of IPieSegment - the pie segments or slices on this SciChartPieSurface

description

A SciChartPieSurface can have one to many Pie Segments. * Use this collection to add and remove series to the chart.

remarks

Adding a pie segment to the chart causes it to automatically redraw.

preRender

preRender: EventHandler<any> = new EventHandler<any>()

An event handler which notifies its subscribers when a render operation starts. Use this to update elements of the chart for the current render. Any updates made here will not trigger a subsequent render.

Readonly renderError

renderError: EventHandler<any> = new EventHandler<any>()

rendered

rendered: EventHandler<boolean> = new EventHandler<boolean>()

An event handler which notifies its subscribers when a render operation has finished. Use this to time render performance, or to update elements of the chart or your UI on redraw.

Readonly resized

resized: EventHandler<Size> = new EventHandler<Size>()

surfaceType

surfaceType: ESurfaceType = ESurfaceType.SciChartPieSurfaceType

Protected widthAspect

widthAspect: number

Accessors

canvasBorder

  • get canvasBorder(): { border?: number; borderBottom?: number; borderLeft?: number; borderRight?: number; borderTop?: number; color?: string }
  • set canvasBorder(value: { border?: number; borderBottom?: number; borderLeft?: number; borderRight?: number; borderTop?: number; color?: string }): void

  • Gets or sets canvas border

    Returns { border?: number; borderBottom?: number; borderLeft?: number; borderRight?: number; borderTop?: number; color?: string }

    • Optional border?: number
    • Optional borderBottom?: number
    • Optional borderLeft?: number
    • Optional borderRight?: number
    • Optional borderTop?: number
    • Optional color?: string

  • Gets or sets canvas border

    Parameters

    • value: { border?: number; borderBottom?: number; borderLeft?: number; borderRight?: number; borderTop?: number; color?: string }
      • Optional border?: number
      • Optional borderBottom?: number
      • Optional borderLeft?: number
      • Optional borderRight?: number
      • Optional borderTop?: number
      • Optional color?: string

    Returns void

holeRadius

  • get holeRadius(): number
  • set holeRadius(holeRadius: number): void

  • Gets or sets the hole radius, which allows you to create Donut charts instead of Pie.

    remarks

    See also EPieType which is required to change from Pie to Donut and holeRadiusSizingMode which defines whether the Donut hole is relative or absolute.

    Returns number

  • Gets or sets the hole radius, which allows you to create Donut charts instead of Pie.

    remarks

    See also EPieType which is required to change from Pie to Donut and holeRadiusSizingMode which defines whether the Donut hole is relative or absolute.

    Parameters

    • holeRadius: number

    Returns void

holeRadiusSizingMode

  • Gets or sets the hole radius size mode for Donut charts. See ESizingMode for a list of values

    remarks

    See also EPieType which is required to change from Pie to Donut, and holeRadius which sets the size of a Donut Chart hole

    Returns ESizingMode

  • Gets or sets the hole radius size mode for Donut charts. See ESizingMode for a list of values

    remarks

    See also EPieType which is required to change from Pie to Donut, and holeRadius which sets the size of a Donut Chart hole

    Parameters

    Returns void

id

  • get id(): string
  • set id(value: string): void

  • Gets or sets the SciChartSurface Id

    Returns string

  • Gets or sets the SciChartSurface Id

    Parameters

    • value: string

    Returns void

isDeleted

  • get isDeleted(): boolean

labelProvider

  • Gets or sets a LabelProvider - a class which is responsible for formatting axis labels and cursor labels from numeric values

    Returns PieLabelProvider

  • Gets or sets a LabelProvider - a class which is responsible for formatting axis labels and cursor labels from numeric values

    Parameters

    Returns void

labelRadiusAdjustment

  • get labelRadiusAdjustment(): number
  • set labelRadiusAdjustment(value: number): void

  • Use this to adjust the position of the labels. 1 is the default. Larger values will shift the labels outwards. For Pie charts, 1.7 will place the labels outside the pie If you want more detailed control you can override calcTitlePosition.

    Returns number

  • Use this to adjust the position of the labels. 1 is the default. Larger values will shift the labels outwards. If you want more detailed control you can override calcTitlePosition.

    Parameters

    • value: number

    Returns void

labelStyle

  • Gets or sets a TTextStyle object for styling labels

    Returns TTextStyle

  • Gets or sets a TTextStyle object for styling labels

    Parameters

    Returns void

otherSurfaces

padding

  • Gets or sets padding

    Returns Thickness

  • Gets or sets padding

    Parameters

    Returns void

pieType

  • Gets or sets the type of the pie chart. See EPieType for a list of values

    remarks

    See also holeRadius which is required for Donut charts and holeRadiusSizingMode which defines whether the Donut hole is relative or absolute.

    Returns EPieType

  • Gets or sets the type of the pie chart. See EPieType for a list of values

    remarks

    See also holeRadius which is required for Donut charts and holeRadiusSizingMode which defines whether the Donut hole is relative or absolute.

    Parameters

    Returns void

previousThemeProvider

  • Used internally - gets the previous IThemeProvider

    Returns IThemeProvider

seriesSpacing

  • get seriesSpacing(): number
  • set seriesSpacing(value: number): void

  • Returns number

  • Parameters

    • value: number

    Returns void

themeProvider

valueMode

  • Whether to show labels as percentages, or raw values. Default to percentages

    Returns EPieValueMode

  • Whether to show labels as percentages, or raw values. Default to percentages

    Parameters

    Returns void

viewRect

  • get viewRect(): Rect

Methods

addDeletable

applyTheme

calcTitlePosition

  • calcTitlePosition(x: number, y: number, outerRadius: number, innerRadius: number, a1: number, a2: number, delta: number, divWidth: number, divHeight: number): { left: number; top: number }

  • The method used to calculate the label position for each segment

    Parameters

    • x: number
    • y: number
    • outerRadius: number
    • innerRadius: number
    • a1: number
    • a2: number
    • delta: number
    • divWidth: number
    • divHeight: number

    Returns { left: number; top: number }

    • left: number
    • top: number

Protected changeDomViewportSize

  • changeDomViewportSize(width: number, height: number): void

  • Changes the size of the DOM element where the SciChartSurfaceBase resides.

    Parameters

    • width: number
    • height: number

    Returns void

changeViewportSize

  • changeViewportSize(width: number, height: number): void

delete

  • delete(): void

  • Deletes native (WebAssembly) memory used by this type, after which it cannot be used.

    remarks

    Call .delete() before finishing with the object to ensure that WebAssmembly memory leaks do not occur.

    All elements within SciChart's High Performance Realtime JavaScript Charts which implement IDeletable must be deleted manually to free native (WebAssembly) memory

    Returns void

Protected deleteInternals

  • deleteInternals(isAnimationProgress?: boolean): void

  • Used Internally. Cleans up the chart internal parts, subscriptions, etc.

    Parameters

    • Optional isAnimationProgress: boolean

    Returns void

Protected getOptions

  • getOptions(): {}

  • Returns {}

Protected getOtherSurfaces

invalidateElement

  • invalidateElement(options?: string | { force?: boolean }): void

  • Call invalidateElement() to trigger a redraw of the SciChartPieSurface. SciChart's rendering engine will schedule a redraw a the next time the renderer is free.

    Parameters

    • Optional options: string | { force?: boolean }

    Returns void

onResize

  • onResize(width: number, height: number): void

setDestinations

  • Parameters

    Returns void

toJSON

update

  • update(): void

  • Called internally - Updates and draws the Pie Chart

    Returns void

Static create

  • Creates a SciChartPieSurface to occupy the div by element ID in your DOM.

    remarks

    This method is async and must be awaited

    Parameters

    Returns Promise<SciChartPieSurface>

Generated using TypeDoc