100% Stacked Line in ASP.NET CORE Charts Component
17 Apr 202312 minutes to read
100% Stacked Line
To render a 100% stacked line series, use series Type
as StackingLine100
.
<ejs-chart id="container" title="Family Expense for Month">
<e-chart-primaryxaxis valueType="Category" interval="1">
</e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="John" xName="x" width="2" yName="y" type="StackingLine100"
dashArray="5,1">
<e-series-marker visible="true"></e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" name="Peter" xName="x" width="2" yName="y1" type="StackingLine100"
dashArray="5,1">
<e-series-marker visible="true"></e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" name="Steve" xName="x" width="2" yName="y2" type="StackingLine100"
dashArray="5,1">
<e-series-marker visible="true"></e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" name="Charle" xName="x" width="2" yName="y3" type="StackingLine100"
dashArray="5,1">
<e-series-marker visible="true"></e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
public ActionResult Index()
{
List<StackedLineChartData100> chartData = new List<StackedLineChartData100>
{
new StackedLineChartData100 { x= "Food", y= 90, y1= 40, y2= 70, y3= 120 },
new StackedLineChartData100 { x= "Transport", y= 80, y1= 90, y2= 110, y3= 70 },
new StackedLineChartData100 { x= "Medical", y= 50, y1= 80, y2= 120, y3= 50 },
new StackedLineChartData100 { x= "Clothes", y= 70, y1= 30, y2= 60, y3= 180 },
new StackedLineChartData100 { x= "Personal Care", y= 30, y1= 80, y2= 80, y3= 30 },
new StackedLineChartData100 { x= "Books", y= 10, y1= 40, y2= 30, y3= 270 },
new StackedLineChartData100 { x= "Fitness", y= 100,y1= 30, y2= 70, y3= 40 },
new StackedLineChartData100 { x= "Electricity", y= 55, y1= 95, y2= 55, y3= 75 },
new StackedLineChartData100 { x= "Tax", y= 20, y1= 50, y2= 40, y3= 65 },
new StackedLineChartData100 { x= "Pet Care", y= 40, y1= 20, y2= 80, y3= 95 },
new StackedLineChartData100 { x= "Education", y= 45, y1= 15, y2= 45, y3= 195 },
new StackedLineChartData100 { x= "Entertainment", y= 75, y1= 45, y2= 65, y3= 115 }
};
ViewBag.dataSource = chartData;
return View();
}
public class StackedLineChartData100
{
public string x;
public double y;
public double y1;
public double y2;
public double y3;
}
Series customization
The following properties can be used to customize the 100% Stacked Line
series.
- Fill – Specifies the color of the series.
- Opacity – Specifies the opacity of Fill.
- Width – Specifies the width for series.
- DashArray – Specifies the dashes for series.
<ejs-chart id="container" title="Family Expense for Month">
<e-chart-primaryxaxis valueType="Category">
</e-chart-primaryxaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="John" xName="x" width="2" yName="y" type="StackingLine100"
dashArray="5,1" opacity="0.7" fill="blue">
<e-series-marker visible="true"></e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" name="Peter" xName="x" width="2" yName="y1" type="StackingLine100"
dashArray="5,1" opacity="0.7" fill="green">
<e-series-marker visible="true"></e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" name="Steve" xName="x" width="2" yName="y2" type="StackingLine100"
dashArray="5,1" opacity="0.7" fill="red">
<e-series-marker visible="true"></e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" name="Charle" xName="x" width="2" yName="y3" type="StackingLine100"
dashArray="5,1" opacity="0.7" fill="black">
<e-series-marker visible="true"></e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>
public ActionResult Index()
{
List<StackedLineChartData> chartData = new List<StackedLineChartData>
{
new StackedLineChartData { x= "Food", y= 90, y1= 40, y2= 70, y3= 120 },
new StackedLineChartData { x= "Transport", y= 80, y1= 90, y2= 110, y3= 70 },
new StackedLineChartData { x= "Medical", y= 50, y1= 80, y2= 120, y3= 50 },
new StackedLineChartData { x= "Clothes", y= 70, y1= 30, y2= 60, y3= 180 },
new StackedLineChartData { x= "Personal Care", y= 30, y1= 80, y2= 80, y3= 30 },
new StackedLineChartData { x= "Books", y= 10, y1= 40, y2= 30, y3= 270 },
new StackedLineChartData { x= "Fitness", y= 100,y1= 30, y2= 70, y3= 40 },
new StackedLineChartData { x= "Electricity", y= 55, y1= 95, y2= 55, y3= 75 },
new StackedLineChartData { x= "Tax", y= 20, y1= 50, y2= 40, y3= 65 },
new StackedLineChartData { x= "Pet Care", y= 40, y1= 20, y2= 80, y3= 95 },
new StackedLineChartData { x= "Education", y= 45, y1= 15, y2= 45, y3= 195 },
new StackedLineChartData { x= "Entertainment", y= 75, y1= 45, y2= 65, y3= 115 }
};
ViewBag.dataSource = chartData;
return View();
}
public class StackedLineChartData
{
public string x;
public double y;
public double y1;
public double y2;
public double y3;
}