Creating funnel charts
qlik-embed: Where possible, use qlik-embed and qlik/api rather than this framework.
The funnel chart lets you add a sequential chart showing the connected stages of a process. Each stage decreases and should contain a subset of the previous stage. The decrease is gradual, giving the chart an ever narrower funnel.
Learn more about the funnel chart, or review the funnel chart API specification.
The example below shows the number of candidates during sequential stages
of a recruitment process. The chart is plotted in width
mode, where the
quantity at each stage is proportional to the upper edge of the segment.
![funnel chart example](/_astro/sn-funnel-chart.9XfYPju1_Z2ogxWK.webp)
// configure nucleus
const nuked = window.stardust.embed(app, {
context: { theme: "light" },
types: [
{
name: "funnel-chart",
load: () => Promise.resolve(window["sn-funnel-chart"]),
},
],
});
// Rendering a simple funnel chart
nuked.render({
element: document.querySelector(".funnel"),
type: "funnel-chart",
fields: ["Hiring Stage", "=Sum(NumberOfCandidates)"],
properties: {
title: "Recruitment Process",
},
});
Funnel chart can represent anything that is decreasing in size, showing a process that starts at 100% and ends with a lower percentage. The funnel chart is the opposite to a pyramid graph, which has increasing stages instead of decreasing stages.
The chart requires one dimension and one measure. Unlike bar charts, funnel chart segments are centered to create a funnel shape.
Requirements
Requires @nebula.js/stardust
version 1.2.0
or later.
Installing
If you use npm: npm install @nebula.js/sn-funnel-chart
.
You can also load through the script tag directly from
https://unpkg.com.
More examples
Area mode
You can configure the funnel chart so that the area of each item is proportional to the measure.
![funnel chart example - area](/_astro/sn-funnel-chart-area.CqFi6D5U_8DFvx.webp)
// Rendering a funnel chart in area mode
nuked.render({
element: document.querySelector(".funnel"),
type: "funnel-chart",
fields: ["Hiring Stage", "=Sum(NumberOfCandidates)"],
properties: {
title: "Recruitment Process",
funnel: {
mode: "AREA",
},
},
});
Height mode
The height of each item is proportional to the measure.
![funnel chart example - height](/_astro/sn-funnel-chart-height.tiQJlAjg_Z2k1dGf.webp)
// Rendering a funnel chart in height mode
nuked.render({
element: document.querySelector(".funnel"),
type: "funnel-chart",
fields: ["Hiring Stage", "=Sum(NumberOfCandidates)"],
properties: {
title: "Recruitment Process",
funnel: {
mode: "HEIGHT",
},
},
});
Ordering mode
Only order matters, the items have the same height, ordered from top to bottom.
![funnel chart example - order](/_astro/sn-funnel-chart-order.t7HXnG_p_Z1kzjYM.webp)
// Rendering a funnel chart in order mode
nuked.render({
element: document.querySelector(".funnel"),
type: "funnel-chart",
fields: ["Hiring Stage", "=Sum(NumberOfCandidates)"],
properties: {
title: "Recruitment Process",
funnel: {
mode: "ORDER",
},
},
});
More configurations
You can also remove the dimension title, show the actual number of candidates instead of the percentage, or color the stages by measure.
![funnel chart example - customized](/_astro/sn-funnel-chart-customized.DM9dDw6C_1lLmBJ.webp)
// Rendering a funnel chart with customized look
nuked.render({
element: document.querySelector(".funnel"),
type: "funnel-chart",
// Defines the fields in `properties`
properties: {
title: "Recruitment Process",
// Hide dimension title
showDimensionTitle: false,
qHyperCubeDef: {
qDimensions: [
{
qDef: { qFieldDefs: ["Hiring Stage"] },
// Color the dimension by `MedianRequestedSalary`
qAttributeExpressions: [
{
qExpression: "Avg(MedianRequestedSalary)",
id: "colorByAlternative",
},
],
},
],
qMeasures: [
{
qDef: { qDef: "Sum(NumberOfCandidates)" },
},
],
qInterColumnSortOrder: [1, 0],
qInitialDataFetch: [
{
qLeft: 0,
qTop: 0,
qWidth: 2,
qHeight: 5000,
},
],
},
// Show actual number of candidates instead of percentage
dataPoint: {
auto: false,
labelMode: "value",
},
// Configure color
color: {
auto: false,
byMeasureDef: {
key: "Avg(MedianRequestedSalary)",
type: "expression",
},
measureScheme: "dg",
mode: "byMeasure",
reverseScheme: true,
},
},
});
Funnel chart plugins
A plugin can be passed into a funnel chart to add or modify its capability or visual appearance. A plugin needs to be defined before it can be rendered together with the chart.
// Step 1: define the plugin
// Modifying the look of the dimension title
const dimensionTitlePlugin = {
info: {
name: "dimension-title-plugin",
type: "component-definition",
},
fn: ({ keys, layout }) => {
const componentDefinition = {
type: "text",
// Provide the same name as the exisiting component to override it
key: keys.COMPONENT.DIMENSION_TITLE,
text: "The percentage of candidates remain after each hiring stage",
layout: {
dock: "bottom",
},
};
return componentDefinition;
},
};
// Step 2: passing the plugin definition into the render function
// Render a funnel chart with plugins
nuked.render({
element: document.querySelector("#object"),
type: "sn-funnel-chart",
plugins: [dimensionTitlePlugin],
fields: ["Hiring Stage", "=Sum(NumberOfCandidates)"],
properties: {
title: "Recruitment Process",
},
});
The plugin definition is an object, with two properties info
and fn
.
The fn
returns a picasso.js
component. To build this component,
some important chart internals are passed into the argument object of fn
.
// Structure of the argument object of fn
const pluginArgs = {
layout,
keys: {
SCALE: { FILL },
COMPONENT: { FUNNEL, FUNNEL_LABELS, DIMENSION_TITLE },
},
};
With plugins, you can either add new components or modify existing components of the funnel chart.
Modify existing components
As an example, the positions and the appearance of the funnel labels can be modified by plugins.
To overide an existing component, fn
should returns a picasso.js
component
that has the same key
as the existing component
(keys.COMPONENT.FUNNEL_LABELS
in
this example).
![funnel chart plugins funnel labels](/_astro/sn-funnel-chart-plugins-funnel-labels.rOHUbLyW_Z1nFhIF.webp)
// Modifying the look of the funnel labels
const funnelLabelsPlugin = {
info: {
name: "funnel-labels-plugin",
type: "component-definition",
},
fn: ({ keys, layout }) => {
const componentDefinition = {
type: "labels",
// Provide the same name as the exisiting component to override it
key: keys.COMPONENT.FUNNEL_LABELS,
layout: { displayOrder: 2 },
settings: {
sources: [
{
component: keys.COMPONENT.FUNNEL,
selector: ".labelLeft",
strategy: {
type: "rows",
settings: { align: 0, fill: "darkred", fontSize: "17px" },
},
},
{
component: keys.COMPONENT.FUNNEL,
selector: ".labelCenter",
strategy: {
type: "rows",
settings: { align: 0.5, fill: "black", fontSize: "17px" },
},
},
],
},
};
return componentDefinition;
},
};
Add new components
The new component can be a standard Picasso component
or a custom Picasso component. The code for adding a new component is
similar to that for modifying an existing component, the only difference
is that the key
should be different from that of
any of the existing components.
Plugins disclaimer
- The plugins API is still experimental.
- It is not guaranteed that the chart is compatible with all different settings, especially when modifying existing components.