Plot Revenue Over Expenses with a BreakEven Chart for JavaScript Apps

We added a new BreakEven class to the wijmo.chart.analytics module.

This class represents a Series that can be added to FlexChart controls to show the evolution of profits over time, and how long it takes to reach the break-even point where revenues surpass expenses.

Here's how you can create a BreakEven chart:

var breakEven = new wijmo.chart.analytics.BreakEven({  
     salesPrice: 20,  
     variableCost: 10,  
     fixedCost: 1000000,  
     style: { fill: 'rgba(0,100,0,0.5)', strokeWidth: 0 }, // Loss Area  
     altStyle: { fill: 'rgba(200,0,0,0.5)', strokeWidth: 0 }, // Profit Area  
     styles: {  
       breakEven: { stroke: 'rgba(69,171,235)', strokeWidth: 3 }  
     }  
 });  

 var flexChart = new wijmo.chart.FlexChart('#flexChart');  
 flexChart.series.push(breakEven);  
 flexChart.axisX.title = 'Units';

And this is the result:

Based on the given data, the break-even point is 100,000 units sold. At that point, revenues and expenses will both be at 2M and will cancel each other out. The profit area is beyond that point.

Explore our JavaScript Chart Demos:

• Break Event Chart JavaScript Demo
• Break Event Chart Angular Demo
• Break Event Chart React Demo
• Break Event Chart Vue Demo

Read the full Wijmo 2020 v1 release.

If you have something interesting that you want to bring to our attention, we would love to hear it!