What data format is required?

The tool requires a JSON object containing an array of labels for the X-axis and an array of series objects, each with a name and a corresponding data array.

Can I use my own colors?

Yes, you can provide a comma-separated list of hex color codes in the Custom Colors field to override the default color schemes.

What does the 'Normalize to 100%' option do?

It converts absolute values into percentages, allowing you to focus on the relative composition of each category rather than the raw totals.

Can I adjust the smoothness of the curves?

Yes, you can set the Curve Smoothness value between 0.1 and 1.0 to control how organic or sharp the stream transitions appear.

Is the chart height adjustable?

Yes, you can define the chart height in pixels, ranging from 300 to 800 pixels to fit your layout needs.

Elysia Tools

Navigation

Data Visualization

Stream Graph Generator

Generate smooth stream graphs for visualizing time-series data flow, perfect for showing changes in composition over time with organic, flowing shapes

Execution

Run this tool

Fill in the form, run the tool, and review the result in one place.

Inputs

Options are grouped so long tools stay easier to scan.

18 options

ContentPaste or type the main input values.5

Stream DatatextareaRequiredTime-series data for the stream graph. Each series represents a flowing layer over time.Chart TitletextOptionalTitle that will be displayed above the chartCustom ColorstextOptionalCustom colors for streams (comma-separated hex colors). Overrides color scheme if provided.X-Axis LabeltextOptionalLabel for the X-axis (typically time)Y-Axis LabeltextOptionalLabel for the Y-axis

SettingsAdjust formats, ranges, numbers, and modes.8

Color SchemeselectOptionalStream OpacitynumberOptionalOpacity of the stream layers (0.1 to 1.0)Curve SmoothnessnumberOptionalSmoothness of the stream curves (0.1 to 1.0, higher = smoother)Background ColorcolorOptionalBackground color for the chart containerGrid ColorcolorOptionalColor for the grid linesChart HeightnumberOptionalHeight of the chart in pixelsMaximum ValuenumberOptionalMaximum value for Y-axis (leave empty for auto-scale)Minimum ValuenumberOptionalMinimum value for Y-axis

TogglesEnable or disable optional behavior.5

Show Grid LinescheckboxOptionalEnabled when checkedDisplay grid lines for better readabilityShow Values on StreamscheckboxOptionalEnabled when checkedDisplay values within the stream layersShow Data LabelscheckboxOptionalEnabled when checkedDisplay data labels at key pointsNormalize to 100%checkboxOptionalEnabled when checkedConvert values to percentages showing relative contribution over timeShow LegendcheckboxOptionalEnabled when checkedDisplay a legend below the chart

Result

Ready for a run

Run the tool to preview files, text, structured data, or streamed output here.

Samples

Examples that match this tool

Continue with connected tools and hubs

{"labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], "series": [{"name": "Desktop", "data": [120, 115, 110, 105, 100, 95]}, {"name": "Mobile", "data": [80, 95, 110, 125, 140, 155]}, {"name": "Tablet", "data": [40, 42, 45, 43, 48, 50]}]}

Stream Graph Generator

Run this tool

Inputs

Result

Examples that match this tool

Continue with connected tools and hubs

Inputs

Result

Learn when to use this tool, what it supports, and how real users apply it.

Key facts

Overview

When to use

How it works

Use cases

Examples

1. Website Traffic Composition

FAQ

Grafana Advanced Application Samples

Android Image Processing Java Samples

Android Image Processing Kotlin Samples

Web Image Processing Python Samples

Calendar Heatmap Generator

Flowchart Maker

Grouped Bar Chart Generator

Venn Diagram Generator

Chart and Diagram Generators

JSON Schema, Mock Data, and API Fixture Generators

CSS Effects, Palettes, and Design Token Generators

Printable PDF Layout and Template Generators