Stacked Area Chart (JavaScript)

This chart visualizes numerical values from multiple columns as stacked areas. Different stacking types can be chosen to guide the user's interpretation: The node can display Stacked Area Charts, Percentage Area Charts and Stream Graphs. Different interpolation methods can be chosen to give the graph an organic appearance.

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. You will find the list of available classes and their description on our documentation page.

Options

x-Axis Column (*)
Choose the column for the x-axis. Dependent on the column's type, labels on the x-axis get rendered differently.
Sort for x-axis column
When checked, the table is sorted for the x-axis column.
Included Columns
Select the numeric columns which you wish to be included in the chart.

General Plot Options

Chart Type
Select the stacking types.
Interpolation Method
Select the interpolation method used to interpolate values in-between data items. -basis: a B-spline, with control point duplication on the ends. -linear: piecewise linear segments -step: alternate between horizontal and vertical segments
Title (*)
The chart's title.
Subitle (*)
The chart's subtitle.
Display legend
When checked, the legend is displayed.
Display tooltip
When checked, an interactive tooltip is displayed on hover.
Display fullscreen button
Check to display a button which switches the view into fullscreen mode. The button is only available in the KNIME WebPortal.
Subscribe to filter events
Check to subscribe to external filter events. The data will then be filtered according to the filters.
Image
Settings for image generation.

Axis Configuration

Show Grid
When checked, a grid is displayed in the chart.
x-axis label (*)
The label used for the x-axis.
y-axis label (*)
The label used for the y-axis.
x-Axis Number Format (*)
d3-Format string for numbers on the x-Axis.
y-Axis Number Format (*)
d3-Format string for numbers on the y-Axis.
Date Format
Choose how to format x-Axis ticks if the associated column is of any date or time type.

Control Options

Enable view controls
Check to enable controls in the chart.
Enable title editing
Check to enable the editing of the title within the view.
Enable subtitle editing
Check to enable the editing of the subtitle within the view.
Enable chart type change
Check to enable changing of the chart style within the view.
Enable interpolation method editing
Check to enable the editing of the interpolation method within the view.
Enable legend toggle
Check to enable toggling of the legend within the view.
Enable interactive guideline toggle
Check to enable toggling of the interactive pop-up within the view.
Enable show grid toggle
Check to enable toggling of the grid within the view.
Enable x-axis editing
Check to enable the editing of the x-axis label within the view.
Enable y-axis editing
Check to enable the editing of the y-axis label within the view.

Input Ports

Icon
Data table containing the values to be plotted in the Stacked Area Chart. Rows with missing values get excluded.
Icon
Data table containing one column with the column names of the first table. Each column name has a color assigned.

Output Ports

Icon
SVG image of the Stacked Area Chart chart.

Popular Predecessors

Popular Successors

Views

Interactive View: JavaScript Stacked Area Chart
A NVD3.js implementation of a Stacked Area Chart.

Workflows

Links

Developers

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.

Installation

To use this node in KNIME, install the extension KNIME JavaScript Views from the below update site following our NodePit Product and Node Installation Guide:

v5.2

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

Plugin provider: KNIME AG, Zurich, Switzerland
Plugin version: 5.2.0.v202311071034
On NodePit since: 2023-12-06
Last update: 2024-04-24
KNIME versions: v5.2, v5.1, v5.0, v3.7, v3.6

Deploy, schedule, execute, and monitor your KNIME workflows locally, in the cloud or on-premises – with our brand new NodePit Runner.

Try NodePit Runner!