What data format is required?

The tool requires a JSON array of objects, where each object includes 'x' (category) and 'y' (value) properties.

Can I customize the line style?

Yes, you can choose between 'Step Before', 'Step After', and 'Step Middle' styles to control how the lines connect your data points.

Is it possible to fill the area under the line?

Yes, you can enable the 'Fill Area Under Line' option and select a custom color to highlight the space beneath the step chart.

Can I add labels to the data points?

Yes, by enabling 'Show Data Labels', you can display the specific numerical values directly on the chart points.

What are the dimensions of the generated chart?

You can define the exact width and height of the chart in pixels within the configuration settings, ranging from 400x300 to 1200x800.

Elysia Tools

Navigation

Data Visualization

Step Chart Generator

Create step charts with staircase-style data visualization, perfect for showing discrete changes over time

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.

24 options

ContentPaste or type the main input values.5

Chart TitletextOptionalTitle that will be displayed above the step chartData PointstextareaRequiredData points as JSON array with x, y, and optional label propertiesX-Axis LabeltextOptionalLabel for the X-axisY-Axis LabeltextOptionalLabel for the Y-axisFont FamilytextOptionalFont family for text elements

SettingsAdjust formats, ranges, numbers, and modes.14

Step StyleselectRequiredLine ColorcolorOptionalColor of the step lineLine WidthnumberOptionalWidth of the step line in pixelsData Point ColorcolorOptionalColor of the data pointsData Point SizenumberOptionalSize of data points in pixelsArea Fill ColorcolorOptionalColor for area fill (if enabled)Grid ColorcolorOptionalColor of grid linesBackground ColorcolorOptionalBackground color of the chartChart WidthnumberOptionalWidth of the chart in pixelsChart HeightnumberOptionalHeight of the chart in pixelsData Label FormatselectOptionalFont SizenumberOptionalFont size for labels and textTitle Font SizenumberOptionalFont size for the chart titleAnimation DurationnumberOptionalAnimation duration in milliseconds

TogglesEnable or disable optional behavior.5

Show Data PointscheckboxOptionalEnabled when checkedDisplay data points on the step lineShow Data LabelscheckboxOptionalEnabled when checkedDisplay value labels on data pointsShow GridcheckboxOptionalEnabled when checkedDisplay background grid linesFill Area Under LinecheckboxOptionalEnabled when checkedFill the area under the step line with colorEnable AnimationcheckboxOptionalEnabled when checkedAnimate the chart when it loads

Result

Ready for a run

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

Samples

Step Chart 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. Product Price History

2. Inventory Level Tracking

FAQ

Grafana Advanced Application Samples

WebRTC Real-Time Communication Samples

QR Code Samples

Distributed Tracing Samples

Comparison Bar Chart Generator

Donut Chart Generator

Funnel Chart Generator

Gantt Chart Generator

Chart and Diagram Generators

JSON Schema, Mock Data, and API Fixture Generators

JSON to Typed Code Generators (TypeScript, Go, Rust, Kotlin, Java, C#)

JSON Interchange and Format Translation Tools