Introducing Break-Even Charts in .NET Applications

  • 0 Comments

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:

  1. 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
  2. Contribution Price: This value is not fixed and depends on the amount produced
  3. 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:

dotNET Break-Evan Chart Profit and Loss Areas

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:

  1. Install the C1 Nuget Packages
  2. Register resources
  3. 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:

  1. Right-click on Dependencies in the Asp. Net Core MVC project
  2. Select the Manage Nuget package option and select Browse tab
  3. Search for the C1.AspNetCore.MVC package
  4. Select this package and click on Install

ASPdotNET CoredotMVC Edition

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:

  1. 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
  1. 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.

  1. Break-event chart with profit and loss area
  2. Break-event chart with a break-even point
  3. Break-even chart with various variables

Break-Even Chart with Profit and Loss Area

Introducing Break Even Charts in dotNET Applications

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

Introducing Break Even Charts in dotNET Applications

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

dotNET Break-Even Chart and Calculated 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.

Download Now!

Manish Gupta

Manish Gupta

Senior Software Engineer