AreaGraph data points not plotting correctly

[chaitanyahalbe]

In the below screenshot, the area graph data points are not plotted properly with respect to the y Column ticks. Need support for multiple records in yColumn when multiple records are being used in the linesColumn. I tried it passing in array to yColumn but it doesn't work.

PR for reference/testing: https://github.com/nuagenetworks/vsd-react-ui/pull/4428

Screenshot: In the below screenshot the orange dot should be way below the blue dot representing the values of those metric on scale.

Query:

{
    "id": "fec-nsg-network-after-fec-loss",
    "graph": "AreaGraph",
    "title": "Loss on {{snsg:NSG}}",
    "description": "Area Graph Visualization for Loss on {{snsg:NSG}} - Loss After FEC vs Network Loss",
    "author": "Chaitanya Halbe",
    "creationDate": "07/30/2020",
    "data": {
        "dateHistogram": true,
        "xColumn": "ts",
        "xLabel": "Time",
        "yColumn": "NetworkLoss",
        "yTickFormat": ",.2f",
        "yLabel": "Avg. Loss %",
        "yTicks": 5,
        "xTickGrid": true,
        "linesColumn": ["NetworkLoss", "LossAfterFEC"],
        "colors": [
            "#15acee",
            "#f37735"
        ],
        "mappedColors": {
            "NetworkLoss": "#15acee",
            "LossAfterFEC": "#f37735"
        },
        "legend": {
            "orientation": "vertical",
            "show": true,
            "circleSize": 5,
            "labelOffset": 5
        },
        "tooltip": [
            { "column": "NetworkLoss", "label": "Avg % Network Loss", "format": "0.2f"},
            { "column": "LossAfterFEC", "label": "Avg % Loss after FEC", "format": "0.2f"},
            { "column": "ts", "label": "Timestamp", "timeFormat": "%b %d, %y %X"}
        ]
    },
    "query": "fec-nsg-network-after-fec-loss"
}

[chaitanyahalbe]

@natabal @nxanil Found another bug in area graph.

[nxanil]

@chaitanyahalbe

This is not an issue. This is the functionality. you are using "stacked": true, in the visualization file of this Area graph. The functionality of the stacked graph is the larger value comes first after that smaller one. If you want to show the orange dot below then you need to pass "stacked": false.