Issues displaying RangeAreaSeries above and below LineSeries
Hello,
I want to create a chart like this for displaying financial data.
The green area represents the simulated maximum return while the green line represents the expected return and the orange area represents the simulated minimum return. I chose RangeAreaSeries for displaying the simulated return values and LineSeries for displaying the expected return.
This snippet shows the series used in the chart:
This list represents values used in the chart below:
- SimulatedPortfolioValue(n: 0, year: 2022, expectedValue: 12390.760000000004, lowValue: 12390.760000000004, highValue: 12390.760000000004)
- SimulatedPortfolioValue(n: 1, year: 2023, expectedValue: 28620.354216000003, lowValue: 26453.621052728377, highValue: 31097.46299856421)
- SimulatedPortfolioValue(n: 2, year: 2024, expectedValue: 45281.6556381456, lowValue: 25876.488865643674, highValue: 32639.0822205608)
- SimulatedPortfolioValue(n: 3, year: 2025, expectedValue: 62386.14767812027, lowValue: 39233.19883748247, highValue: 53753.12923469231)
- SimulatedPortfolioValue(n: 4, year: 2026, expectedValue: 79945.61920635827, lowValue: 51971.405225410825, highValue: 76829.44086626978)
- SimulatedPortfolioValue(n: 5, year: 2027, expectedValue: 97972.17267724739, lowValue: 64396.50120039558, highValue: 101836.11914507615)
- SimulatedPortfolioValue(n: 6, year: 2028, expectedValue: 116478.23247046217, lowValue: 76610.64423753115, highValue: 128736.18306719998)
- SimulatedPortfolioValue(n: 7, year: 2029, expectedValue: 135476.55345417646, lowValue: 88678.08143982482, highValue: 157534.52595400892)
- SimulatedPortfolioValue(n: 8, year: 2030, expectedValue: 154980.22977605756, lowValue: 100643.78256679201, highValue: 188258.00063233476)
- SimulatedPortfolioValue(n: 9, year: 2031, expectedValue: 175002.7038881007, lowValue: 112541.50168221127, highValue: 220947.46775068544)
Unfortunately there seems to be some sort of display issue with the RangeAreaSeries since the area drawn doesn't represent the given values that I listed below. Especially the values with n > 4.
I've also tried switching the order of the different series but this didn't fix the display issues. Thanks in advance for your help!
Best Regards
Peer
Hi Peer,
Greetings from Syncfusion.
We have checked your query with the provided sample, data, and screenshots at our end and we found that some data points are not correct, as in some points the mapped high value was lower than the low value of that data point. We would like to let you know that in range series types, we usually interchange the high and low value of the data point when the high value is less than the low value or vice versa.
We have activated the trackball feature to show detailed information on the mapped high, and low data point values on the 2026 x- value. In the screenshot, for the lowerRange series, the high value is the expected value(79,945.62), and the low value(51,971.40) is below the expected value which is correct but for higherRange series, the expected value is mapped for the low mapper and high value is mapped for high-value mapper but you can see that in the trackball tooltip, the high value(79,945.62) is the expected value and low value(76829.44) is the high value because they are interchanged internally due to the high value being lesser than the expected value. As the values in 2024, 2025 and 2026 x-value had this same error, the higher range series gets rendered below the expected value series. So, we suggest correcting the chart data accordingly to achieve your requirement.
Also, we suggest you move the line series (mapped using expected value) last in the series collection to render it above the lowerRange and higherRange series so that it will make your chart better. We have also modified your sample accordingly and attached it below for reference.
Please check and get back to us if you require further assistance.
Regards,
Sriram Kiran
Attachment: f177658_519c4326.zip
