React React Charts Stacked Line Chart

Overview

React Stacked Line Chart display Y-values stacked over one another in series order. Individual contributions can be compared against the cumulative total across categories. overview

Marker

Markers support built-in shapes such as circles, rectangles, ellipses, lines, diamonds, triangles, pentagons, crosses, and pluses. Images can also be used as marker symbols for customized presentations.

marker

Data label

Data labels display information about data points. Templates support custom label content using HTML elements such as images, divs, and spans. Labels can also be rotated to a specified angle.

datalabel

Multiple axes

Multiple axes allow different data sets with varying value ranges to be plotted within the same chart.

multiple axes

Customization

Customize the look and feel of the Stacked Line Chart using built-in APIs.

dashed line

Code snippet

Get started with the React Stacked Line Chart using a few simple lines of HTML and JavaScript code, as demonstrated below. Also explore demo to learn how to render and configure the component.

import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Category, StackingLineSeries } from '@syncfusion/ej2-react-charts';
import * as React from "react";
class App extends React.Component<{}, {}> {
    public primaryXAxis: AxisModel = { valueType: 'Category'};
    public chartData: any[] = [
      { x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },
      { x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },
      { x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },
      { x: 'Clothes', y: 70, y1: 30, y2: 60, y3: 180 },
      { x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },
      { x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },
      { x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },
      { x: 'Electricity', y: 55, y1: 95, y2: 55, y3: 75 },
      { x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },
      { x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },
      { x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },
      { x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }
  ];
  public marker : any = {visible: true} ;
public render() {
    return <ChartComponent id='charts' primaryXAxis={this.primaryXAxis}>
      <Inject services={[StackingLineSeries, Category]} />
       <SeriesCollectionDirective>
                             <SeriesDirective dataSource={this.chartData} xName='x' yName='y' name='John' width='2' type='StackingLine' marker={this.marker} dashArray='5,1'>
                            </SeriesDirective>
                            <SeriesDirective dataSource={this.chartData} xName='x' yName='y1' name='Peter' width='2' type='StackingLine' marker= {this.marker} dashArray='5,1'>
                            </SeriesDirective>
                            <SeriesDirective dataSource={this.chartData} xName='x' yName='y2' name='Steve' width='2' type='StackingLine' marker= {this.marker} dashArray='5,1'>
                            </SeriesDirective>
                            <SeriesDirective dataSource={this.chartData} xName='x' yName='y3' name='Charle' width='2' type='StackingLine' marker= {this.marker} dashArray='5,1'>
                            </SeriesDirective>
    </SeriesCollectionDirective>
    </ChartComponent>
  }
};
ReactDOM.render(
  <App />,
  document.getElementById('charts') as HTMLElement
);
<!DOCTYPE html>
<html>

<body> 
     <div id="charts"></div>
</body>

</html>

Learning resources

UG

Stacked Line Chart User Guide

Learn the available options to customize React Stacked Line Chart.

API

Stacked Line Chart API Reference

Explore the React Stacked Line Chart APIs.

Explore all Syncfusion React components

Explore over 140+ React UI components featuring established, and production-ready controls built for modern web app development.

Scroll up icon
Syncfusion Feedback