Categories

← View All Tools

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

Time-series data for the stream graph. Each series represents a flowing layer over time.

Title that will be displayed above the chart

Custom colors for streams (comma-separated hex colors). Overrides color scheme if provided.

Opacity of the stream layers (0.1 to 1.0)

Smoothness of the stream curves (0.1 to 1.0, higher = smoother)

Background color for the chart container

Color for the grid lines

Height of the chart in pixels

Maximum value for Y-axis (leave empty for auto-scale)

Minimum value for Y-axis

Label for the X-axis (typically time)

Label for the Y-axis

Display grid lines for better readability

Display values within the stream layers

Display data labels at key points

Convert values to percentages showing relative contribution over time

Display a legend below the chart

Key Facts

Category
Data Visualization
Input Types
textarea, text, select, number, color, checkbox
Output Type
html
Sample Coverage
4
API Ready
Yes

Overview

The Stream Graph Generator creates smooth, organic visualizations for time-series data, allowing you to effectively track how the composition of different categories changes over time.

When to Use

  • •When you need to visualize the relative contribution of multiple categories over a continuous time period.
  • •When you want to highlight trends and shifts in data volume using flowing, aesthetic shapes.
  • •When you need to present complex time-series data in a more intuitive and visually engaging format than a standard area chart.

How It Works

  • •Input your time-series data in the required JSON format, specifying labels and series values.
  • •Customize the visual appearance by selecting a color scheme, adjusting curve smoothness, and setting stream opacity.
  • •Configure axis labels, grid lines, and normalization settings to tailor the chart to your specific data requirements.
  • •Generate the chart to instantly visualize your data flow as a professional, high-quality stream graph.

Use Cases

Tracking website traffic sources (Desktop, Mobile, Tablet) over several months.
Visualizing the evolution of market share for different products in a specific industry.
Displaying the changing composition of energy production sources (Solar, Wind, Coal) over a decade.

Examples

1. Website Traffic Composition

Digital Marketer
Background
A marketing team needs to show stakeholders how user device preferences have shifted over the last six months.
Problem
Standard bar charts make it difficult to see the continuous flow and relative growth of mobile versus desktop traffic.
How to Use
Input the monthly traffic counts for Desktop, Mobile, and Tablet into the Stream Data field and select the 'Ocean Blues' color scheme.
Example Config
{"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]}]}
Outcome
A smooth, professional stream graph clearly illustrating the steady rise of mobile traffic overtaking desktop usage.

Try with Samples

data-visualization
Grafana Advanced Application Samples
Comprehensive Grafana samples covering advanced dashboard design, alerting configurations, data source integrations, and plugin development
keywords time,series,data
sample
Chart.js Chart Library Samples
Comprehensive Chart.js examples including various chart types, customization options, animations, and responsive designs
keywords graph,chart,data
sample
WebRTC Real-Time Communication Samples
Comprehensive WebRTC samples for peer-to-peer audio/video communication, data channels, screen sharing, and signaling server implementation
keywords time,data
sample
Server-Sent Events (SSE)
Server-Sent Events examples for real-time unidirectional communication from server to client, including live updates, notifications, and streaming data
keywords stream,time,data
sample

Related Hubs

Json Generate Tools
Explore 33 json tools for generate workflows and compare closely related utilities quickly.
Design Generate Tools
Explore 19 design tools for generate workflows and compare closely related utilities quickly.
Pdf Generate Tools
Explore 10 pdf tools for generate workflows and compare closely related utilities quickly.
Audio Generate Tools
Explore 8 audio tools for generate workflows and compare closely related utilities quickly.

FAQ

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.

API Documentation

Request Endpoint

POST /en/api/tools/stream-graph

Request Parameters

Parameter Name Type Required Description
chartData textarea Yes Time-series data for the stream graph. Each series represents a flowing layer over time.
chartTitle text No Title that will be displayed above the chart
colorScheme select No -
streamColors text No Custom colors for streams (comma-separated hex colors). Overrides color scheme if provided.
streamOpacity number No Opacity of the stream layers (0.1 to 1.0)
curveSmoothness number No Smoothness of the stream curves (0.1 to 1.0, higher = smoother)
backgroundColor color No Background color for the chart container
gridColor color No Color for the grid lines
chartHeight number No Height of the chart in pixels
maxValue number No Maximum value for Y-axis (leave empty for auto-scale)
minValue number No Minimum value for Y-axis
xAxisLabel text No Label for the X-axis (typically time)
yAxisLabel text No Label for the Y-axis
showGrid checkbox No Display grid lines for better readability
showValues checkbox No Display values within the stream layers
showDataLabels checkbox No Display data labels at key points
normalizeData checkbox No Convert values to percentages showing relative contribution over time
showLegend checkbox No Display a legend below the chart

Response Format

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

AI MCP Documentation

Add this tool to your MCP server configuration: 

{
  "mcpServers": {
    "elysiatools-stream-graph": {
      "name": "stream-graph",
      "description": "Generate smooth stream graphs for visualizing time-series data flow, perfect for showing changes in composition over time with organic, flowing shapes",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=stream-graph",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

You can chain multiple tools, e.g.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, max 20 tools.

If you encounter any issues, please contact us at [email protected]