Introducing Break-Even Charts in .NET Applications
In the ComponentOne 2020v2 release, we introduced the break-event chart. Break-even analysis is used to calculate marginal costs. This technique is widely used by production management and management accountants.
A break-even chart shows the sales volume where total costs equal sales. The point where the total cost is equal to the sale is called the break-even point.
The break-even point can be determined using the following formulas:
Break-Even Quantity = (Total Fixed Cost / (Sales Price – Variable cost)) Break-Even Value = Break-event quantity * Sales Price
As per the above formulas, the break-even value is that price where profit and loss are null, and the break-even quantity denotes the number of production unit(s) at which profit and loss are invalid. These values can be calculated using the following three values:
- Total Fixed Cost: The total fixed cost is the cost in any organization that does not change according to the production quantity. For example, rent for machinery or yearly maintenance costs
- Contribution Price: This value is not fixed and depends on the amount produced
- Sales Price: The price at which the delivered product sells in the market.
Let's use an example to understand this more thoroughly:
Suppose an organization has a fixed cost of \$1,000,000, and the price per unit is \$20, and this one unit of the product is sold at $120. Now let's calculate the break-even point where the loss is null, and profit is also void.
-
Break-even quantity = 1,000,000/ (120-20) = 10,000
-
Break-event value = 10,000*120 = $1,200,000
According to the above, the break-even quantity is 10,000 units. Let's verify the above formula.
| 1 Unit | 9999 Units | 10000 Units | 10001 Units | |
| Sales price | 1 x 120 = 120 | 120 x 9, 999 = 1,199,880 | 120 x 10,000 = 1,200,000 | 120 x 10,001 = 1,200,120 |
| Cost Price | 20 x 1 = 20 | 20 x 9,999 = 199,980 | 20 x 10,000 = 200,000 | 20 x 10,001 = 200,020 |
| Contribution | 120 - 20 = 100 | 1,199,880 - 199,980 = 999,900 | 1,200,000 - 20,000 = 1,000,000 | 1,200,120 - 200,020 = 1,000,100 |
| Fixed Cost | 1,000,000 | 1,000,000 | 1,000,000 | 1,000,000 |
| Profit/Loss | $(999,900) | $(100) | $(0) | $100 |
Here is the break-even chart for the above data:
As we see in the above chart, units are denoted on the X-axis, and prices are shown on the Y-Axis. The quantity and value are the same as we calculated above.
Now that we understand the concept of break-even charts let's look at how we can add these charts to an MVC application.
To add the break-even chart in the project, we need to follow the steps below:
- Install the C1 Nuget Packages
- Register resources
- Add the Break-even chart
How to Install the C1 Nuget Packages:
To Use the C1 Charts, the C1.AspNetCore.MVC package should be installed in the project. To add the required package, go through the following steps:
- Right-click on Dependencies in the Asp. Net Core MVC project
- Select the Manage Nuget package option and select Browse tab
- Search for the C1.AspNetCore.MVC package
- Select this package and click on Install
Hereafter, the required package is installed.
Registering the Resources:
Once the package is installed, the resources should be registered to add the project's required control.
Please go through the following steps:
- Open the ~/_ViewImports.cshtml file and add the following code line:
@using C1.Web.Mvc
@using C1.Web.Mvc.Fluent
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, C1.AspNetCore.Mvc
- Open ‘~/Shared/_Layout.cshtml’ file and add the following tags in the head section:
<head>
...
<c1-styles />
<c1-scripts />
</head>
How to Add the Break-Even Chart
By following the two steps above, we are ready to add the break-even chart to our project. In this section, we will learn how to add the break-even chart to the project.
- Break-event chart with profit and loss area
- Break-event chart with a break-even point
- Break-even chart with various variables
Break-Even Chart with Profit and Loss Area
The above chart is a simple break-even chart. It shows only the profit and loss area. Add it to the following code snippet.
<c1-flex-chart id="breakeven">
<c1-flex-chart-breakeven fixed-cost=1000000" variable-cost="20" sales-price="120">
</c1-flex-chart-breakeven>
</c1-flex-chart>
Break-Even Chart with Break-Even Point
The above chart is the same as a simple break-event chart with a profit and loss area. This chart denotes the break-even chart with additional straight lines in blue, which can be modified by setting a different color.
Please refer to the following code snippet for reference:
@{
var _styles = new BreakEvenStyles();
_styles.BreakEven = new SVGStyle() { Stroke = "blue", StrokeWidth = 3 };
}
<c1-flex-chart id="breakeven2">
<c1-flex-chart-breakeven fixed-cost="1000000" variable-cost="20" sales-price="120" styles="_styles">
</c1-flex-chart-breakeven>
</c1-flex-chart>
Break-Even Chart with Multiple Variables
The above chart denotes the other calculated variables (Safety Margin, Sales Revenue, Total Cost, etc.). It can be done by setting a display style using the SVGStyle for each variable.
Please use the following code snippet for the same:
@{
var styles = new BreakEvenStyles()
{
BreakEven = new SVGStyle() { Stroke = "rgb(69,171,235)", StrokeWidth = 2},
FixedCost = new SVGStyle() { Stroke = "grey", StrokeWidth = 2 },
MarginalProfit = new SVGStyle() { Stroke = "green", StrokeWidth = 2 },
SafetyMargin = new SVGStyle() { Stroke = "lightgreen", StrokeWidth = 0 },
SalesRevenue = new SVGStyle() { Stroke = "rgb(127,42,250)",StrokeWidth =2 },
TotalCost = new SVGStyle() { Stroke = "red",StrokeWidth =2},
VariableCost = new SVGStyle() { Stroke = "black", StrokeWidth = 2}
};
}
<h3>BreakEven Chart with various values</h3>
<c1-flex-chart id="breakeven3">
<c1-flex-chart-breakeven fixed-cost="1000000" variable-cost="20" sales-price="120" styles="styles">
</c1-flex-chart-breakeven>
</c1-flex-chart>
As per the above code snippet, we may modify the styles and set properties to display on the chart. To learn more, view the demo sample.
