0 ×

Stacked Area Chart (Plotly)

KNIME Dynamically Created JavaScript Nodes version 4.3.2.v202103021015 by KNIME AG, Zurich, Switzerland

A Stacked Area Chart based on the Plotly.js library. This is the standard implementation of a traditional Stacked Area Chart, with additional Plotly.js user controls enabled within KNIME's interactive view framework.

The node supports custom CSS styling. You can simply put CSS rules into a single string and set it as a flow variable 'customCSS' in the node configuration dialog. Current KNIME classes are NOT YET supported, so class names will have to be deduced from the view itself. We are hoping to support standard KNIME classes in an upcoming release.

Please note: the Plotly.js KNIME extension is currently in Labs. It is recommended that you handle missing values and normalize your data before using visualization nodes in this extension to improve performance. Please feel free to leave feedback and suggestions on our community forum here .


General options for the KNIME Stacked Area Chart with Plotly. The columns will be available for selection within the view.

X-Axis Column
Select the column to be initially displayed along the X-Axis.
Included columns (lines)
Select the columns to be plotted as spokes on the radar plot.
Report on missing values
When enabled this will display a warning whenever there is a missing value present in the data and give a count on how many missing values exist in the data.
Missing values handling
The way in which this view tries to compensate for missing or invalid values. "Skip rows with missing values" will omit the entire row if a single cell is missing. This can affect multiple traces on the chart in some circumstances. "Leave missing" will leave a gap where the missing value exists and draw the chart anyways.

General Plot Options

These options control the initial state of the view.

Title (*)
The chart title.
X-Axis label (*)
The label for the X-Axis. If left blank, the current X-Axis feature name will be used.
Y-Axis label (*)
The label for the Y-Axis. If left blank, the current Y-Axis feature name will be used.
Settings for SVG image generation.
Display legend
When checked, the chart's legend is displayed.
Show grid
When checked, a grid is displayed on the chart.
Show warnings in view
When checked, the any warnings will be displayed in the view.
Fill total area
When checked, the filled areas will overlap with each other shaded area below.
Override colors
When checked, the colors provided by the data table will be ignored and the color chosen below for "Data color" will be applied to the plot. If there are no colors provided with the data, the node will use the "Data color" by default, even if this option has not been selected.
Data color
The color of the data on the plot if there are no colors provided with the table (i.e. from the "Color Manager" node) or if "Override colors" has been chosen. This color will not be automatically applied if the data has "Default" colors, it will only be automatically applied if in the absence of ANY colors. You can always apply this color to the data by selecting the "Override colors" option.
Background color
The background color of the plot, including the axes labels, the title and the subtitle.
Data area color
The background color of the data area, within the axes.
Grid color
The background color of the grid and axis base lines.
Use WebGL graphic library
Enabling this option uses WebGL (instead of traditional SVG rendering) in the compatible browsers to improve performance. It is recommended that you leave this option enabled. However, enabling this option will disable any custom CSS provided to the node. If your browser does not support WebGL, the view will use traditional SVG rendering as a fallback. NOTE: If "Generate image" is enabled, this process will use SVG while creating the image, but WebGL for the interactive view. In this case, CSS Styles may be applied to the image, but not the Interactive View.

Control Options

Use these options to configure the available controls within the view.

Enable view controls
Check to enable controls in the chart.
Show fullscreen button
When checked, a fullscreen option is displayed in the KNIME interactive menu.
Enable tooltip toggle
Check to enable toggling of the tooltip within the view.
Enable feature selection controls
Check to enable drop down menu's allowing you to switch the features displayed on the axes.
Enable text editing
Check to enable the editing of the title and axis labels within the view.
Enable 'Show only selected' toggle
Check to enable toggling of selection-only within view.
Enable publish selection toggle
Check to enable toggling of selection publishing within view.
Enable subscribe to selection toggle
Check to enable toggling of selection subscription within view.
Enable subscribe to filter toggle
Check to enable toggling of filter subscription within view.
Enable link to Plotly editor
Check to enable toggling of filter subscription within view.


This KNIME implementation of Plotly is compatible with the other interactive JavaScript views in the KNIME analytics platform. Use these options to control the degree to which this chart interacts with other views.

Enable selection
If checked selection controls will be available for this view. This does not disable the view from subscribing to selection events which are published by other views in a combination or composite view.
Display clear selection button
Displays a button to clear current selection if selection is enabled, you are subscribed to selection or "Enable subscribe to selection toggle" is enabled in the Control Options.
Publish selection events
If checked, notifies other interactive views when user changes the selection in the current view. See also "Subscribe to selection events".
Subscribe to selection events
If checked, the view reacts on notifications from other interactive views that the selection has been changed. See also "Publish selection events".
Subscribe to filter events
If checked, the view reacts on notifications from other interactive views that a filter has been created or modified.

Interactive View: Stacked Area Chart

The KNIME Stacked Area Chart with Plotly.

Input Ports

Data table to display in an interactive Stacked Area Chart.

Output Ports

SVG image of the Stacked Area plot if that option has been enabled.
Data table containing the input data with an appended boolean column representing which rows were selected in the view.

Best Friends (Incoming)

Best Friends (Outgoing)



To use this node in KNIME, install KNIME JavaScript Views from the following update site:


A zipped version of the software site can be downloaded here.

You don't know what to do with this link? Read our NodePit Product and Node Installation Guide that explains you in detail how to install nodes to your KNIME Analytics Platform.

Wait a sec! You want to explore and install nodes even faster? We highly recommend our NodePit for KNIME extension for your KNIME Analytics Platform. Browse NodePit from within KNIME, install nodes with just one click and share your workflows with NodePit Space.


You want to see the source code for this node? Click the following button and we’ll use our super-powers to find it for you.