• Demos
    • JavaScript Charts
    • JavaScript StockCharts
  • Download
    • Download Chart
    • Download StockChart
  • Integrations
    • Front End Technology Samples
      • React Charts
      • Angular Charts
      • Vue.js Charts New!
      • jQuery Charts
      • Dashboards
    • Server Side Technology Samples
      • PHP Charts
      • Python Charts New!
      • ASP.NET MVC Charts
      • Spring MVC Charts
      • JSP Charts
  • License
  • Blog
  • Docs
    • Chart Documentation
    • StockChart Documentation
  • Support Forum
    • Chart Support
    • StockChart Support
  • My Account
  • My Account
  • KEY FEATURES
    • Chart with Index / Data Label
    • Chart with Zooming / Panning
    • Chart using JSON Data
    • Chart with Animation
    • Multi Series Chart
    • Chart with Multiple Axes
    • Chart with Crosshair
    • Chart with Scale Breaks
    • Chart with Logarithmic Axis
    • Performance with 50,000 Data Points
    • Responsive Charts
    • Chart with Drilldown
  • LINE CHARTS
    • Line Chart
    • Spline Chart
    • Step Line Chart
  • AREA CHARTS
    • Area Chart
    • Multi Series Area Chart with Date Time Axis
    • Spline Area Chart
    • Step Area Chart
    • Range Area Chart
    • Range Spline Area Chart
    • Stacked Area Chart
    • Stacked Area 100% Chart
  • COLUMN & BAR CHARTS
    • Column Chart
    • Bar Chart
    • Range Column Chart
    • Stacked Column Chart
    • Stacked Column 100% Chart
    • Range Bar Chart
    • Stacked Bar Chart
    • Stacked Bar 100% Chart
    • Waterfall Chart
  • PIE & FUNNEL CHARTS
    • Pie Chart
    • Pie Chart with Index Labels Placed Inside
    • Doughnut Chart
    • Funnel Chart
    • Funnel Chart with Custom Neck
    • Pyramid Chart
  • FINANCIAL CHARTS
    • Candlestick Chart
    • Candlestick Chart from JSON
    • OHLC Chart
  • SCATTER & BUBBLE CHARTS
    • Scatter Chart
    • Scatter Chart with Custom Markers
    • Bubble Chart
  • BOX & WHISKER CHARTS
    • Box and Whisker Chart
    • Box and Whisker Chart with Customization
  • COMBINATION CHARTS
    • Error chart
    • Error Line Chart
    • Pareto Chart
    • Combination of Column, Line and Area Chart
  • DYNAMIC CHARTS
    • Dynamic Line Chart
    • Dynamic Column Chart
    • Dynamic Multi Series Chart
  • STOCKCHARTS
    • StockChart with Numeric Axis
    • StockChart with Date-Time Axis
    • StockChart with SplineArea & Range Selector
  • ANGULAR, VUE.JS, JAVASCRIPT, JQUERY
    • Angular Charts
    • Vue.js Charts
    • jQuery Charts
    • JavaScript Charts
  • SERVER SIDE TECHNOLOGIES
    • ASP.NET MVC Charts
    • PHP Charts
    • Python Charts
    • JSP Charts
    • Spring MVC Charts

React Step Area Charts & Graphs

Download React Chart Samples
  • React Chart Samples
  • JavaScript Chart Samples
  • Angular Chart Samples
  • Vue.js Chart Samples
  • jQuery Chart Samples
  • PHP Chart Samples
  • Python Django Chart Samples
  • ASP.NET Chart Samples
  • JSP Chart Samples
  • Spring MVC Chart Samples
  • Dashboard Samples
  • JavaScript StockChart Samples

Step Area chart is an Area Chart except that the datapoints are connected by horizontal and vertical line segments that's used when data change at discrete non-uniform intervals of time. Given example shows simple React Step Area Chart along with code that you can try running locally.

  • React Code
/* App.js */
import React, { Component } from 'react';
import CanvasJSReact from './canvasjs.react';
var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;
class App extends Component {
	render() {
		const options = {
			animationEnabled: true,
			exportEnabled: true,
			title:{
				text: "US Sales"
			},
			axisY: {
				title: "Sales",
				includeZero: true
			},
			data: [
			{
				type: "stepArea",
				xValueFormatString: "YYYY",
				dataPoints: [
					  { x: new Date(2000, 0), y: 40 },
					  { x: new Date(2001, 0), y: 62 },
					  { x: new Date(2002, 0), y: 53 },
					  { x: new Date(2003, 0), y: 49 },
					  { x: new Date(2004, 0), y: 52 },
					  { x: new Date(2005, 0), y: 32 },
					  { x: new Date(2006, 0), y: 28 },
					  { x: new Date(2007, 0), y: 46 },
					  { x: new Date(2008, 0), y: 55 },
					  { x: new Date(2009, 0), y: 88 },
					  { x: new Date(2010, 0), y: 68 },
					  { x: new Date(2011, 0), y: 63 },
					  { x: new Date(2012, 0), y: 65 },
					  { x: new Date(2013, 0), y: 68 },
					  { x: new Date(2014, 0), y: 48 },
					  { x: new Date(2015, 0), y: 39 },
					  { x: new Date(2016, 0), y: 40 },
					  { x: new Date(2017, 0), y: 46 }
				]
			}
			]
		}
		return (
		<div>
			<CanvasJSChart options = {options}
				/* onRef={ref => this.chart = ref} */
			/>
			{/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/}
		</div>
		);
	}
}
module.exports = App;                              

Chart Customizations

The color of the line and the filled area can be customized using lineColor and color properties respectively. Some of the other commonly used customization options include fillOpacity, lineThickness, etc.

Note   For step by step instructions, follow our React Integration Tutorial
© fenopix
  • About Us
  • FAQs
  • Careers
  • Privacy Policy
Server Side Technologies
  • ASP.NET MVC Charts
  • PHP Charts
  • JSP Charts
  • Spring MVC Charts
Front End Technologies
  • JavaScript Charts
  • jQuery Charts
  • React Charts
  • Angular Charts
  • JavaScript StockCharts
Contact
  • Fenopix, Inc.
  • 2093 Philadelphia Pike,
  • #5678, Claymont,
  • Delaware 19703
  • United States Of America