Options
All
  • Public
  • Public/Protected
  • All
Menu
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

  • SciChartPieSurface

Implements

Index

Constructors

constructor

Properties

animate

animate: boolean = true

animationFrames

animationFrames: number = 30

Readonly domCanvas2D

domCanvas2D: HTMLCanvasElement

Readonly domChartRoot

domChartRoot: HTMLDivElement

Readonly domDivContainer

domDivContainer: HTMLDivElement

Readonly domSvgAdornerLayer

domSvgAdornerLayer: SVGSVGElement

Readonly domSvgContainer

domSvgContainer: SVGSVGElement

Protected heightAspect

heightAspect: number

Protected labelProviderProperty

labelProviderProperty: PieLabelProvider

legend

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

onCreatedName

onCreatedName: string

Readonly pieSegments

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.

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

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

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(isAnimationProgress?: boolean): void
  • inheritdoc

    Parameters

    • Optional isAnimationProgress: boolean

    Returns void

invalidateElement

  • invalidateElement(propertyName?: string): 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 propertyName: string

    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