Options
All
  • Public
  • Public/Protected
  • All
Menu

Class PieChartWithLabelsOnSides

PieChart implementation that draws Slice Labels on its left and right sides. Slices and Labels are connected by 'label connector lines'.

Index

Properties

Methods

Properties

engine

engine: PublicEngine

Public, safe interface for Panels rendering engine.

pixelScale

pixelScale: Vec2<Scale>

Scale for panel area in pixels. Margin should be set according to panel margin (currently constant).

uiScale

uiScale: Vec2<Scale>

Scale for panel area in percentages (0-100). Margin should be set according to panel margin (currently constant).

Methods

addLegendBox

  • Add a stand-alone LegendBox using a builder.

    Type parameters

    • UIElementType: UIPart

      Type of UIElement that is specified by 'builder'-parameter.

    Parameters

    • Default value builder: UIElementBuilder<UIElementType>

      LegendBoxBuilder. If omitted, HorizontalLegendBox will be selected. Use LegendBoxBuilders for selection.

    • Default value scale: Vec2<Scale>

      Optional custom scale to position LegendBox on. Defaults to whole chart in percentages [0, 100].

    Returns UIElementType & UIElement

    LegendBox that fulfills interfaces: UIElementType (typeparam) and UIElement

addSlice

  • addSlice(name: string, value: number): PieSlice

  • Add new Slice to the Pie Chart. The Slice will be automatically assigned an unique style (using SliceFillStylePalette), that will not be affected by sorting of Slices.

    Currently there is no way to override the individual style of a Slice - style modifications must be done using the API of Pie Chart.

    Parameters

    • name: string

      Initial name for Slice as string.

    • value: number

      Initial value for Slice as number.

    Returns PieSlice

    New Slice object.

addSlices

  • addSlices(multiSlice: object[]): Array<PieSlice>

  • This method is used for the adding multiple slices in the funnel chart.

    Parameters

    • multiSlice: object[]

      Array of slices

    Returns Array<PieSlice>

addUIElement

  • Add a stand-alone UIElement using a builder.

    Type parameters

    • UIElementType: UIPart

      Type of UIElement that is specified by 'builder'-parameter.

    Parameters

    • Default value builder: UIElementBuilder<UIElementType>

      UIElementBuilder. If omitted, TextBoxBuilder will be selected. Use UIElementBuilders for selection.

    • Default value scale: Vec2<Scale>

      Optional custom scale to position UIElement on. Defaults to whole chart in percentages [0, 100].

    Returns UIElementType & UIElement

    Object that fulfills interfaces: UIElementType (typeparam) and UIElement

disableAnimations

  • disableAnimations(): this

  • Disable all animations for the chart.

    All animations have to be re-enabled individually if you wish to re-enable animations.

    Returns this

    Chart itself for fluent interface.

dispose

  • dispose(): this

  • Permanently dispose the component.

    To fully allow Garbage-Collection to free the resources used by the component, make sure to remove any references to the component and its children in application code.

    let chart = ...ChartXY()
let axisX = chart.getDefaultAxisX()
// Dispose Chart, and remove all references so that they can be garbage-collected.
chart.dispose()
chart = undefined
axisX = undefined

    Returns this

    Object itself for fluent interface

getAnimationsEnabled

  • getAnimationsEnabled(): boolean

  • Gets if animations are enabled or not.

    Returns boolean

    Boolean state for animations enabled

getBackgroundFillStyle

  • Get fillstyle of chart background.

    Returns FillStyle

    FillStyle

getBackgroundStrokeStyle

  • getBackgroundStrokeStyle(): LineStyle

  • Get stroke style of chart background.

    Returns LineStyle

    LineStyle

getInnerRadius

  • getInnerRadius(): number

  • Get inner radius of Pie Chart.. This property can be used to style the Pie Chart as a "Donut Chart", with the center being hollow.

    Returns number

    Inner radius as a percentage of outer radius [0, 100]

getLabelConnectorGap

  • getLabelConnectorGap(): number

  • Get gap between Slice / start of label connector, and end of label connector / Label.

    Returns number

    Gap as pixels

getLabelConnectorLength

  • getLabelConnectorLength(): number

  • Get length of label connector line for an exploded Slice. For non-exploded Slices, the length will be the sum of this and explosion offset.

    Returns number

    Length as pixels

getLabelConnectorStyle

  • getLabelConnectorStyle(): LineStyle

  • Get style of Label connector lines.

    Returns LineStyle

    LineStyle object

getLabelFillStyle

getLabelFont

getLabelFormatter

getMinimumSize

  • getMinimumSize(): Point | undefined

  • Get minimum size of Panel. Depending on the type of class this value might be automatically computed to fit different elements.

    Returns Point | undefined

    Vec2 minimum size or undefined if unimplemented

getMultipleSliceExplosion

  • getMultipleSliceExplosion(): boolean

  • Get a boolean flag which implies whether it is allowed for multiple Slices to be 'exploded' at the same time or not. When a Slice is exploded, it is drawn differently from non-exploded state

    • usually slightly "pushed away" from the center of Pie Chart.

    Returns boolean

    Is behavior allowed as boolean flag

getPadding

  • Get padding around Chart in pixels.

    Returns Margin

    Padding datastructure

getSliceExplosionOffset

  • getSliceExplosionOffset(): pixel

  • Get offset of exploded Slices in pixels.

    Returns pixel

    Offset of exploded Slices in pixels

getSliceFillStyle

  • Get style of Pie Slices fill. This style is managed as a continuous Palette of FillStyle objects. Each Slice of Pie will be assigned an incremental index, which will be used to pick its fill style from this Palette.

    So, for example... We have a Pie Chart with 5 Slices, and we give it a Palette with only 3 possible values (0 = red, 1 = green, 2 = blue). The resulting Slice fill styles will be: red, green, blue, red, green. Note that this means, that the supplied Palette will have to work in a continuous manner!

    Returns Palette<FillStyle>

    Palette

getSliceSorter

getSliceStrokeStyle

  • getSliceStrokeStyle(): LineStyle

getSlices

  • Get all Slices of Pie Chart. NOTE: Manual modifications to returned Array can have unforeseen side-effects. Removing or adding Slices is intended to be done using other APIs (PieChart.addSlice, Slice.dispose, ...)

    Returns PieSlice[]

    Array of Slices

getTitle

  • getTitle(): string

  • Get text of Chart title.

    Returns string

    Chart title as a string.

getTitleFillStyle

  • Get fill style of Chart Title.

    Returns FillStyle

    FillStyle object

getTitleFont

  • Get font of Chart title.

    Returns FontSettings

    FontSettings object

getTitleMarginBottom

  • getTitleMarginBottom(): number

  • Returns number

    Padding after Chart title

getTitleMarginTop

  • getTitleMarginTop(): number

  • Returns number

    Padding before Chart title

offResize

  • offResize(token: Token): boolean

  • Remove event listener from resize event.

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

onResize

  • onResize(handler: function): Token

  • Subscribe to resize event of Panel.

    Parameters

    • handler: function

      Handler function for event

        • Parameters

          • obj: this
          • width: pixel
          • height: pixel
          • engineWidth: pixel
          • engineHeight: pixel

          Returns void

    Returns Token

    Token of subscription

saveToFile

  • saveToFile(fileName: string, type?: undefined | string, encoderOptions?: undefined | number): this

  • Capture rendered state in an image file. Prompts the browser to download the created file.

    NOTE: The download might be blocked by browser/plugins as harmful. To prevent this, only call the method in events tied to user-interactions. From mouse-event handlers, for example.

    Has two optional parameters which directly reference JavaScript API HTMLCanvasElement.toDataURL. For supported image formats, compression quality, Etc. refer to:

    https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

    Example usage:

    Desired result Arguments
    Download 'screenshot.png' 'screenshot'
    Attempt download 'maybeNotSupported.bmp' 'maybeNotSupported', 'image/bmp'
    Attempt download jpeg.file with specified compression quality 'fileName', 'image/jpeg', 0.50
    sideeffect

    If 'type' is not supported by browser, an Error will be thrown.

    Parameters

    • fileName: string

      Name of prompted download file as string. File extension shouldn't be included as it is automatically detected from 'type'-argument.

    • Optional type: undefined | string

      A DOMString indicating the image format. The default format type is image/png.

    • Optional encoderOptions: undefined | number

      A Number between 0 and 1 indicating the image quality to use for image formats that use lossy compression such as image/jpeg and image/webp. If this argument is anything else, the default value for image quality is used. The default value is 0.92.

    Returns this

setAnimationsEnabled

  • setAnimationsEnabled(animationsEnabled: boolean): this

  • Sets if animations are enabled or not.

    Parameters

    • animationsEnabled: boolean

      Boolean state for animations enabled

    Returns this

    Pie Chart itself

setBackgroundFillStyle

setBackgroundStrokeStyle

  • setBackgroundStrokeStyle(value: LineStyle | ImmutableMutator<LineStyle>): this

  • Set stroke style of panel background.

    Parameters

    • value: LineStyle | ImmutableMutator<LineStyle>

      LineStyle or function which modifies it

    Returns this

    Object itself

setInnerRadius

  • setInnerRadius(innerRadius: number): this

  • Set inner radius of Pie Chart. This method can be used to style the Pie Chart as a "Donut Chart", with the center being hollow.

    Parameters

    • innerRadius: number

      Inner radius as a percentage of outer radius [0, 100]

    Returns this

    Pie Chart itself

setLUT

  • setLUT(lut?: LUT): this

  • Attach lookup table (LUT) to fill the slices with Colors based on value.

    The color for the slice would be selected from a specified LUT, which contains the information about gradient steps. After setting LUT to undefined all the slices stay colorized, but no further lookup.

    LUT class stores information about values and its associated colors,

    • which provides efficient lookup of the color based on provided value
    • as well as linear and step interpolation between colors.
    const pie = lightningChart()
 .Pie( { type: PieChartTypes.LabelsOnSides } )
 .setLUT( new LUT (steps: [
         { value: 10, color: ColorRGBA( 0, 0, 0 ) },
         { value: 20, color: ColorRGBA( 30, 255, 0 ) },
         { value: 30, color: ColorRGBA( 60, 204, 0 ) },
         { value: 40, color: ColorRGBA( 90, 128, 0 ) },
         { value: 50, color: ColorRGBA( 255, 0, 0 ) } ) ],
     interpolate: true } )

    Parameters

    • Optional lut: LUT

      Lookup table

    Returns this

    Pie itself for fluent interface

setLabelConnectorGap

  • setLabelConnectorGap(labelConnectorGap: pixel): this

  • Set gap between Slice / start of label connector, and end of label connector / Label.

    Parameters

    • labelConnectorGap: pixel

      Gap as pixels

    Returns this

    Pie Chart itself

setLabelConnectorLength

  • setLabelConnectorLength(labelConnectorLength: pixel): this

  • Set length of label connector line for an exploded Slice. For non-exploded Slices, the length will be the sum of this and explosion offset.

    Parameters

    • labelConnectorLength: pixel

      Length as pixels

    Returns this

    Pie Chart itself

setLabelConnectorStyle

  • setLabelConnectorStyle(labelConnectorStyle: LineStyle): this

  • Set style of Label connector lines.

    Parameters

    • labelConnectorStyle: LineStyle

      LineStyle object

    Returns this

    Pie Chart itself

setLabelFillStyle

setLabelFont

setLabelFormatter

setMultipleSliceExplosion

  • setMultipleSliceExplosion(multipleSliceExplosionAllowed: boolean): this

  • Set if it is allowed for multiple Slices to be 'exploded' at the same time or not. When a Slice is exploded, it is drawn differently from non-exploded state

    • usually slightly "pushed away" from the center of Pie Chart.

    Does not affect state of already exploded Slices!

    Parameters

    • multipleSliceExplosionAllowed: boolean

      Is behavior allowed as boolean flag

    Returns this

    Pie Chart itself

setPadding

  • setPadding(padding: Partial<Margin> | number): this

  • Set padding around Chart in pixels.

    Parameters

    • padding: Partial<Margin> | number

      Number with pixel margins for all sides or datastructure with individual pixel paddings for each side. Any side can be omitted, only passed values will be overridden.

    Returns this

    Object itself

setSliceExplosionOffset

  • setSliceExplosionOffset(sliceExplosionOffset: pixel): this

  • Set offset of exploded Slices in pixels.

    Parameters

    • sliceExplosionOffset: pixel

      Offset of exploded Slices in pixels

    Returns this

    Pie Chart itself

setSliceFillStyle

  • Set style of Pie Slices fill. This style is managed as a continuous Palette of FillStyle objects. Each Slice of Pie will be assigned an incremental index, which will be used to pick its fill style from this Palette.

    So, for example... We have a Pie Chart with 5 Slices, and we give it a Palette with only 3 possible values (0 = red, 1 = green, 2 = blue). The resulting Slice fill styles will be: red, green, blue, red, green. Note that this means, that the supplied Palette will have to work in a continuous manner!

    Parameters

    Returns this

    Pie Chart itself

setSliceSorter

  • Set sorter of Pies' Slices as a comparator-function.

    For some commonly needed default implementations, can refer to PieSliceSorters-collection.

    Parameters

    • sliceSorter: SliceSorter<PieSlice>

      PieSliceSorter - function which sorts Slices of Pie with JavaScript API: Array.sort.

    Returns this

    Pie Chart itself

setSliceStrokeStyle

  • Set stroke style of Pie Slices border.

    Parameters

    • value: LineStyle | ImmutableMutator<LineStyle>

      LineStyle object or function which creates a new style based on previous

    Returns this

    Pie Chart itself

setTitle

  • setTitle(title: string): this

  • Set text of Chart title.

    Parameters

    • title: string

      Chart title as a string.

    Returns this

    Object itself for fluent interface.

setTitleFillStyle

  • Set fill style of Chart Title.

    Example usage:

    Desired result Argument
    Specified FillStyle new SolidFill({ color: ColorHEX('#F00') })
    Changed transparency (solidFill) => solidFill.setA(80)
    Hidden emptyFill

    Parameters

    Returns this

    Chart itself

setTitleFont

  • Set font of Chart Title.

    Example usage:

    Desired result Argument
    Specified FontSettings new FontSettings({ size: 24, style: 'italic' })
    Set to bold (fontSettings) => fontSettings.setWeight('bold')

    Parameters

    Returns this

    Chart itself

setTitleMarginBottom

  • setTitleMarginBottom(marginPixels: pixel): this

  • Specifies padding after chart title.

    This does not have an effect if title is hidden (empty FillStyle).

    Parameters

    • marginPixels: pixel

      Gap after the chart title in pixels.

    Returns this

    Chart itself for fluent interface

setTitleMarginTop

  • setTitleMarginTop(marginPixels: pixel): this

  • Specifies padding before chart title.

    This does not have an effect if title is hidden (empty FillStyle).

    Parameters

    • marginPixels: pixel

      Gap between the top of chart and its title in pixels.

    Returns this

    Chart itself for fluent interface