Abstract base class for Funnel Charts. Visualizes proportions and percentages between categories, by dividing a funnel into proportional segments.

Set data using FunnelChart.addSlice( name: string, value: number )

There are multiple implementations of FunnelChart, each with their own visual design and API for customizing it. List of selectable options can be found in: FunnelChartTypes

Hierarchy

Implements

Properties

Methods

addLegendBox addSlice addSlices addUIElement dispose getAnimationsEnabled getBackgroundFillStyle getBackgroundStrokeStyle getFunnelSliceMode getHeadWidth getLabelEffect getLabelFillStyle getLabelFont getLabelFormatter getNeckWidth getPadding getSliceEffect getSliceFillStyle getSliceSorter getSliceStrokeStyle getSlices getTheme getTitle getTitleEffect getTitleFillStyle getTitleFont getTitleMargin getTitleRotation getTitleSize offBackgroundMouseClick offBackgroundMouseDoubleClick offBackgroundMouseDown offBackgroundMouseDrag offBackgroundMouseDragStart offBackgroundMouseDragStop offBackgroundMouseEnter offBackgroundMouseLeave offBackgroundMouseMove offBackgroundMouseTouchStart offBackgroundMouseUp offBackgroundMouseWheel offBackgroundTouchEnd offBackgroundTouchMove offDispose offResize onBackgroundMouseClick onBackgroundMouseDoubleClick onBackgroundMouseDown onBackgroundMouseDrag onBackgroundMouseDragStart onBackgroundMouseDragStop onBackgroundMouseEnter onBackgroundMouseLeave onBackgroundMouseMove onBackgroundMouseUp onBackgroundMouseWheel onBackgroundTouchEnd onBackgroundTouchMove onBackgroundTouchStart onDispose onResize saveToFile setAnimationsEnabled setBackgroundFillStyle setBackgroundStrokeStyle setHeadWidth setLUT setLabelEffect setLabelFillStyle setLabelFont setLabelFormatter setNeckWidth setPadding setSliceEffect setSliceFillStyle setSliceGap setSliceHighlightOnHover setSliceMode setSliceSorter setSliceStrokeStyle setTitle setTitleEffect setTitleFillStyle setTitleFont setTitleMargin setTitleRotation

Properties

engine: PublicEngine

Interface for end user API of the LCJS engine. It provides some useful capabilities over the area enclosed by a single LCJS context (which can be just a single chart, or a Dashboard with several charts).

pixelScale: LinearScaleXY

Scale for panel area in pixels.

removePanel: ((panel: Panel) => void)

Type declaration

    • (panel: Panel): void
    • Parameters

      Returns void

uiScale: LinearScaleXY

Scale for panel area in percentages (0-100).

Methods

  • Add a legendbox.

    Legendbox is a type of UI element, that floats inside the chart/component it is created inside. It can be freely moved around with user interactions, as well as positioned in application code.

    The purpose of legendbox is to describe the series and other visual components of the chart, by displaying their names and colors. Hovering over a series' legendbox entry will highlight that series, and clicking on the entry will toggle that series' visibility.

    Legendbox alignment:

    Alignment of legendbox can be selected by supplying one of the available LegendBoxBuilders to addLegendBox:

     // Default (vertical) LegendBox.
    const legendBox = ChartXY.addLegendBox()

    // Horizontal LegendBox.
    const horizontalLegendBox = ChartXY.addLegendBox(LegendBoxBuilders.HorizontalLegendBox)

    Custom Legendbox positioning:

    By default LegendBoxes are placed on the right side, or bottom of the chart (depending on alignment).

    A custom location can be configured with UIElement API:

    Position coordinate system is specified when creating legendbox.

    1. LegendBox with default positioning coordinate system.
     addLegendBox( LegendBoxBuilders.VerticalLegendBox )
    // Position = [0, 100] as percentages.
    .setPosition({ x: 50, y: 50 })
    1. Position in pixel coordinate system.
     addLegendBox( LegendBoxBuilders.VerticalLegendBox, chart.pixelScale )
    // Position = pixels.
    .setPosition({ x: 300, y: 100 })
    1. Position on Axes.
     addLegendBox( LegendBoxBuilders.VerticalLegendBox, { x: chartXY.getDefaultAxisX(), y: chartXY.getDefaultAxisY() } )
    // Position = Axis values.
    .setPosition({ x: 5, y: 5 })

    Returns

    LegendBox

    Parameters

    • builder: UILegendBoxBuilder<InternalBackground> = _legendBoxBuilder

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

    • scale: UserScaleDefinition = ...

      Optional parameter for altering the coordinate system used for positioning the LegendBox. Defaults to whole Chart in percentages [0, 100].

    Returns LegendBox<UIBackground>

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

    Parameters

    • title: string

      Funnel slice title

    • value: number

      funnel slice value

    Returns FunnelSlice

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

    Parameters

    • slices: {
          name: string;
          value: number;
      }[]

      Array of slices

    Returns FunnelSlice[]

  • Add a stand-alone UIElement using a builder.

    Example usage:

    1. TextBox with default positioning coordinate system.
     addUIElement( UIElementBuilders.TextBox )
    // Position = [0, 100] as percentages.
    .setPosition({ x: 50, y: 50 })
    1. Position in pixel coordinate system.
     addUIElement( UIElementBuilders.TextBox, chart.pixelScale )
    // Position = pixels.
    .setPosition({ x: 300, y: 100 })
    1. Position on Axes.
     addUIElement( UIElementBuilders.TextBox, { x: chartXY.getDefaultAxisX(), y: chartXY.getDefaultAxisY() } )
    // Position = Axis values.
    .setPosition({ x: 5, y: 5 })

    Returns

    Object that fulfills interfaces: UIElementType (typeparam) and UIElement

    Type Parameters

    Parameters

    • builder: UIElementBuilder<UIElementType> = ...

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

    • scale: UserScaleDefinition = ...

      Optional parameter for altering the coordinate system used for positioning the UIElement. Defaults to whole Chart in percentages [0, 100].

    Returns UIElementType & UIElement

  • Permanently destroy 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

    Object itself for fluent interface

    Returns FunnelChart

  • Get animations disable/enable state.

    Returns

    Animations default state.

    Returns boolean

  • Get Funnel Head Width

    Returns

    number (0 - 100)

    Returns number

  • Get theme effect enabled on component or disabled.

    A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components. Whether this effect is drawn above a particular component can be configured using the setEffect method.

     // Example, disable theme effect from a particular component.
    Component.setEffect(false)

    For the most part, theme effects are enabled by default on most components.

    Theme effect is configured with effect property.

    Returns

    Boolean that describes whether drawing the theme effect is enabled around the component or not.

    Returns boolean

  • Get Funnel Neck Width

    Returns

    number (0 - 100)

    Returns number

  • Get theme effect enabled on component or disabled.

    A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components. Whether this effect is drawn above a particular component can be configured using the setEffect method.

     // Example, disable theme effect from a particular component.
    Component.setEffect(false)

    For the most part, theme effects are enabled by default on most components.

    Theme effect is configured with effect property.

    Returns

    Boolean that describes whether drawing the theme effect is enabled around the component or not.

    Returns boolean

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

    So, for example... We have a Funnel 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

    Returns Palette<FillStyle>

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

    Returns

    Array of Slices

    Returns FunnelSlice[]

  • Returns the Theme currently being used.

    Returns

    An object containing the Theme.

    Returns Theme

  • Get text of Chart title.

    Returns

    Chart title as a string.

    Returns string

  • Get theme effect enabled on component or disabled.

    A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components. Whether this effect is drawn above a particular component can be configured using the setEffect method.

     // Example, disable theme effect from a particular component.
    Component.setEffect(false)

    For the most part, theme effects are enabled by default on most components.

    Theme effect is configured with effect property.

    Returns

    Boolean that describes whether drawing the theme effect is enabled around the component or not.

    Returns boolean

  • Get rotation of Chart title.

    Returns

    Rotation in degrees

    Returns number

  • Get Chart title size.

    This depends on current title content, font and style.

    Returns

    Size of Chart title in pixels

    Returns Point

  • Remove subscription from mouse-click event on Chart background

    Returns

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

    Parameters

    • token: Token

      Event listener

    Returns boolean

  • Remove subscription from mouse-doubleClick event on Chart background

    Returns

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

    Parameters

    • token: Token

      Event listener

    Returns boolean

  • Remove subscription from mouse-down event on Chart background

    Returns

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

    Parameters

    • token: Token

      Event listener

    Returns boolean

  • Remove subscription from mouse-drag event on Chart background

    Returns

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

    Parameters

    • token: Token

      Event listener

    Returns boolean

  • Remove subscription from mouse-dragStart event on Chart background

    Returns

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

    Parameters

    • token: Token

      Event listener

    Returns boolean

  • Remove subscription from mouse-dragStop event on Chart background

    Returns

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

    Parameters

    • token: Token

      Event listener

    Returns boolean

  • Remove subscription from mouse-enter event on Chart background

    Returns

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

    Parameters

    • token: Token

      Event listener

    Returns boolean

  • Remove subscription from mouse-leave event on Chart background

    Returns

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

    Parameters

    • token: Token

      Event listener

    Returns boolean

  • Remove subscription from mouse-move event on Chart background

    Returns

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

    Parameters

    • token: Token

      Event listener

    Returns boolean

  • Remove subscription from touch-start event on Chart background

    Returns

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

    Parameters

    • token: Token

      Event listener

    Returns boolean

  • Remove subscription from mouse-up event on Chart background

    Returns

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

    Parameters

    • token: Token

      Event listener

    Returns boolean

  • Remove subscription from mouse-wheel event on Chart background

    Returns

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

    Parameters

    • token: Token

      Event listener

    Returns boolean

  • Remove subscription from touch-end event on Panel background

    Returns

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

    Parameters

    • token: Token

      Event listener

    Returns boolean

  • Remove subscription from touch-move event on Chart background

    Returns

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

    Parameters

    • token: Token

      Event listener

    Returns boolean

  • Remove event listener from dispose event.

    Returns

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

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Remove event listener from resize event.

    Returns

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

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

  • Subscribe onDispose event. This event is triggered whenever the Control (Dashboards and all chart types) is disposed.

     // Example usage

    Chart.onDispose(() => {
    console.log('chert was disposed')
    })

    Chart.dispose()

    Returns

    Token of subscription

    Parameters

    Returns Token

  • Subscribe to resize event. This event is triggered whenever the area of chart changes (due to document or dashboard resizing).

     // Example usage,
    ChartXY.onResize((chart, width, height, engineWidth, engineHeight) => {
    console.log('Chart resized', 'width', width, 'height', height, 'engineWidth', engineWidth, 'engineHeight', engineHeight)
    })

    Returns

    Token of subscription

    Parameters

    • handler: ((obj: this, width: number, height: number, engineWidth: number, engineHeight: number) => void)

      Handler function for event

        • (obj: this, width: number, height: number, engineWidth: number, engineHeight: number): void
        • Parameters

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

          Returns void

    Returns Token

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

    // Download 'screenshot.png'
    Panel.saveToFile('screenshot')
    // Attempt download 'maybeNotSupported.bmp'
    Panel.saveToFile('maybeNotSupported', 'image/bmp')
    // Attempt download jpeg.file with specified compression quality
    Panel.saveToFile('fileName', 'image/jpeg', 0.50)

    Remarks

    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: string

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

    • Optional encoderOptions: 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 FunnelChart

  • Disable/Enable all animations of the Chart.

    Returns

    Chart itself for fluent interface.

    Parameters

    • animationsEnabled: boolean

      Boolean value to enable or disable animations.

    Returns FunnelChart

  • Set FillStyle of chart background.

     // Example usage,
    ChartXY.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA( 80, 0, 0 ) }))

    Related API:

    • Use SolidFill to describe a solid fill color.
    • Use ColorRGBA to create a color from Red, Green, Blue (and optionally) Alpha values in range [0, 255].

    Transparent chart backgrounds:

    LightningChart JS charts can be configured to be fully or partially transparent.

     // Example, partially transparent chart

    // Engine background exists under all LCJS components. In case of Dashboard, there is only 1 shared engine background.
    chart.engine.setBackgroundFillStyle(emptyFill)
    // Chart background covers every 1 chart. In case of Dashboard, every chart has its own chart background.
    chart.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 100) }))
    // Some charts also have a separate series background.
    chart.setSeriesBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0, 100) }))

    Returns

    Object itself

    Parameters

    Returns FunnelChart

  • Set Funnel Head Width

    Returns

    Funnel Chart itself

    Parameters

    • headWidth: number

      Funnel Head Width range from 0 to 100

    Returns FunnelChart

  • 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 funnel = lightningChart()
    .Funnel( { type: FunnelChartTypes.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 } )

    Returns

    Pie itself for fluent interface

    Parameters

    Returns FunnelChart

  • Set theme effect enabled on component or disabled.

    A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components. Whether this effect is drawn above a particular component can be configured using the setEffect method.

     // Example, disable theme effect from a particular component.
    Component.setEffect(false)

    For the most part, theme effects are enabled by default on most components.

    Theme effect is configured with effect property.

    Returns

    Object itself.

    Parameters

    • enabled: boolean

      Theme effect enabled

    Returns FunnelChart

  • Set Funnel Neck Width

    Returns

    Funnel Chart itself

    Parameters

    • neckWidth: number

      Funnel Neck Width range from 0 to 100

    Returns FunnelChart

  • Set padding around Chart in pixels.

     // Example 1, specify complete padding (four sides).
    ChartXY.setPadding({ left: 16, right: 16, top: 32, bottom: 8 })
     // Example 2, specify only single padding.
    ChartXY.setPadding({ right: 64 })

    Returns

    Object itself

    Parameters

    • padding: number | Partial<Margin>

      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 FunnelChart

  • Set theme effect enabled on component or disabled.

    A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components. Whether this effect is drawn above a particular component can be configured using the setEffect method.

     // Example, disable theme effect from a particular component.
    Component.setEffect(false)

    For the most part, theme effects are enabled by default on most components.

    Theme effect is configured with effect property.

    Returns

    Object itself.

    Parameters

    • enabled: boolean

      Theme effect enabled

    Returns FunnelChart

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

    So, for example... We have a Funnel 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

    Funnel Chart itself

    Parameters

    Returns FunnelChart

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

    Returns

    Funnel Chart itself

    Parameters

    • sliceGap: number

      Gap as pixels. Clamped between [0, 20] !

    Returns FunnelChart

  • Set if slices should be highlighted on mouse hover / touch. Applies to all Slices.

    Parameters

    • state: boolean

      True if Slices should be highlighted on hover, false if not. This applies to all existing Slices and new Slices added.

    Returns FunnelChart

  • Set text of Chart title.

    Returns

    Object itself for fluent interface.

    Parameters

    • title: string

      Chart title as a string.

    Returns FunnelChart

  • Set theme effect enabled on component or disabled.

    A theme can specify an Effect to add extra visual oomph to chart applications, like Glow effects around data or other components. Whether this effect is drawn above a particular component can be configured using the setEffect method.

     // Example, disable theme effect from a particular component.
    Component.setEffect(false)

    For the most part, theme effects are enabled by default on most components.

    Theme effect is configured with effect property.

    Returns

    Object itself.

    Parameters

    • enabled: boolean

      Theme effect enabled

    Returns FunnelChart

  • Specifies padding after chart title.

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

     // Example 2, specify margins for all sides with same value for Title.
    ChartXY.setTitleMargin(40)

    Returns

    Chart itself for fluent interface

    Parameters

    • marginPixels: number | Partial<Margin>

      Gap after the chart title in pixels.

    Returns FunnelChart