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 destinations

destinations: TSciChartDestination[]

Readonly domCanvas2D

domCanvas2D: HTMLCanvasElement

Readonly domChartRoot

domChartRoot: HTMLDivElement

Readonly domDivContainer

domDivContainer: HTMLDivElement

Readonly domSvgAdornerLayer

domSvgAdornerLayer: SVGSVGElement

Readonly domSvgContainer

domSvgContainer: SVGSVGElement

Protected heightAspect

heightAspect: number

id

id: string

Protected isDeletedProperty

isDeletedProperty: boolean

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 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.

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.

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

isDeleted

  • get isDeleted(): boolean

  • Returns 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

  • Returns ISciChartSurfaceBase[]

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

  • Used internally - gets the previous IThemeProvider

    Returns IThemeProvider

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

Methods

addDeletable

  • Add an IDeleteable object to the surface which will have its delete method called when the surface is deleted

    Parameters

    Returns void

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

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

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