Skip to main content
Version: 7.1.2

Funnel Chart

Apart from high performance data visualization features, LightningChart JS also includes commonly needed standard features, such as Funnel charts:

Funnel chartFunnel chart

// Creation of Funnel chart
const funnelChart = lc.Funnel()

Adding data​

const data = [
    {
        name: 'Prospects',
        value: 2000,
    },
    {
        name: 'Contacts',
        value: 1540,
    },
    {
        name: 'Leads',
        value: 1095,
    },
    {
        name: 'Customers',
        value: 549,
    },
]
funnelChart.addSlices(data)

Slice mode​

By default, Funnel chart displays values by giving each slice a height relative to its value. This can be reversed, to give slice a width relative to its value. This looks a bit different:

Funnel chart variable widthFunnel chart variable width

Additional Funnel chart configurations​

Some details about Funnel chart visual look are also available, see below methods for example:

  • FunnelChart.setSliceGap
  • FunnelChart.setHeadWidth
  • FunnelChart.setNeckWidth
  • FunnelChart.setLabelSide

Label formatting​

funnelChart.setLabelFormatter(SliceLabelFormatters.Name)
funnelChart.setLabelFormatter(SliceLabelFormatters.NamePlusRelativeValue)
funnelChart.setLabelFormatter(SliceLabelFormatters.NamePlusValue)
funnelChart.setLabelFormatter((slice, relativeValue) => `${slice.getName()}: ${slice.getValue().toFixed(1)}`)

Funnel chart types​

There are two different Funnel chart types available. The available APIs differ slightly between them.

Labels on sides (default)​

const funnelChart = lc.Funnel({ type: FunnelChartTypes.LabelsOnSides })

Labels inside slices​

const funnelChart = lc.Funnel({ type: FunnelChartTypes.LabelsInsideSlices })

Funnel chartFunnel chart

Slice sorting​

funnelChart.setSliceSorter(SliceSorters.None)
funnelChart.setSliceSorter(SliceSorters.SortByName)
funnelChart.setSliceSorter(SliceSorters.SortByValueAscending)
funnelChart.setSliceSorter(SliceSorters.SortByValueDescending)

Label colors and font​

funnelChart
    .setLabelFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 0) }))
    .setLabelFont((font) => font.setWeight('bold'))

For more details about style API, please see Styles, colors and fonts.

Color slices by value​

funnelChart.setLUT(
    new LUT({
        interpolate: true,
        steps: [
            { value: 0, color: ColorRGBA(255, 0, 0) },
            { value: 100, color: ColorRGBA(0, 255, 0) },
        ],
    }),
)

Slice colors​

Slice colors are set with 1 method that applies a fill style to every slice. Slices can be assigned different fill styles by returning different value based on slice index.

const sliceFillStyles = [
    new SolidFill({ color: ColorRGBA(255, 0, 0) }),
    new SolidFill({ color: ColorRGBA(0, 255, 0) }),
    new SolidFill({ color: ColorRGBA(0, 0, 255) }),
]
funnelChart.setSliceFillStyle((index) => sliceFillStyles[index % sliceFillStyles.length])

Slice user interactions​

User interactions on each slice can be tracked individually:

const slice = funnelChart.addSlice("name", 10)
slice.addEventListener('click', (event) => {
    console.log('user clicked slice')
})

Chart title​

funnelChart
    .setTitle('Voltage')
    .setTitleFont(font => font.setSize(10).setFamily('Segoe UI'))
    .setTitleFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))

For more details about style API, please see Styles, colors and fonts.

Background style​

FunnelChart has 2 different levels of backgrounds:

  • Chart background (entire chart area)
  • Engine background (additional background shared by entire engine)
    • Understanding difference between chart/engine background is mainly useful if you are using the legacy Dashboard feature - in this case, engine background is shared across the whole dashboard.
funnelChart
    .setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))
funnelChart.engine.setBackgroundFillStyle(new SolidFill({ color: ColorRGBA(0, 0, 255) }))

For more details about style API, please see Styles, colors and fonts.

Space around chart​

funnelChart.setPadding({ left: 10, right: 10, top: 10, bottom: 10 })

Disable animations​

const funnelChart = lc.FunnelChart({ animationsEnabled: false })

Cursors​

Please see common Cursors section.

Legend​

Please see common Legend section.

Positioning charts​

Please see common Positioning charts section.

Color themes​

Please see common Color themes section.