Displaying the lines of the graph (MPChart) in different colors depending on whether the value is positive or negative
<p>Hello everyone, on one of my previous projects I encountered an interesting problem, to solve which I needed seventh-grade geometry. I hope this will help you solve a similar problem, or maybe it will simply be interesting to read.</p>
<p>The task was that I needed to display the user’s earnings statistics for the year. I received 12 numerical values that reflected the balance change for the month (profit or loss). Below I will provide a picture with an example of the design:</p>
<p><img alt="" src="https://miro.medium.com/v2/resize:fit:483/0*10lX0dFF_Vrr6tPA" style="height:610px; width:483px" /></p>
<p>chart from design</p>
<p>As I didn’t have much experience with MPChart, I immediately started reading the documentation and searching for which of the possible charts in the library would help me. It quickly became clear that my choice was LineChart. The user’s values will be used for the Y-axis, and for the X-axis, one can simply use numbers from 0 to 11, meaning the value of the next month will be 1 greater than the previous one. At this stage, the task started to seem easy to me and I quickly began to deal with transferring the design into code. In this article, I will not go into detail about the capabilities of MPChart and I will not create another tutorial :)</p>
<p>But, if you look closely at the chart, it becomes noticeable that when the user’s balance is negative, the line is red, and when it is positive, it is green. From this, it becomes clear that you need to find the point at which the graph crosses 0 and changes color, which turned out to be not an easy task.</p>
<p>For a better understanding, I’ve represented the 0-line and the points. The first point has a value of (0, -100), the second (1, -1000), the third (2, 2200), the fourth (3, 1000), the fifth (4, 4500). As MPChart has scale optimization by default, it significantly simplifies our task, we will just have different scales for x and y. So, we know the distance between the points (always 1), and their peaks.</p>
<p><a href="https://medium.com/@stenleone/displaying-the-lines-of-the-graph-mpchart-in-different-colors-depending-on-whether-the-value-is-623010416b3c">Read More</a></p>