Criar linhas e colunas conforme retorno backend

Front-end
#1

O retorno do backend vem assim ?

[
    {
        "nome": "Rosquinha 1",
        "graficoTipo": "ROSQUINHA",
        "id": 9,
        "pizzasRosquinhas": [
            {
                "argumentField": "PICANHA",
                "valueField": 6729.00
            },
            {
                "argumentField": "INSUMO 36",
                "valueField": 3831.00
            },
            {
                "argumentField": "COXAO MOLE",
                "valueField": 3567.00
            },
            {
                "argumentField": "PEIXE",
                "valueField": 2970.00
            },
            {
                "argumentField": "BATATA CONGELADA",
                "valueField": 2877.00
            },
            {
                "argumentField": "COXA DE FRANGO 123456789 123456789 123456789 123456789 123456789 123456789",
                "valueField": 1459.60
            },
            {
                "argumentField": "INSUMO 2064",
                "valueField": 1164.00
            },
            {
                "argumentField": "CENOURA",
                "valueField": 1134.00
            },
            {
                "argumentField": "BATATA 123456789 123456789 123456789 123456789 123456789",
                "valueField": 995.00
            },
            {
                "argumentField": "EMPANADA DE QUEIJO",
                "valueField": 572.00
            }
        ],
        "seriesBarra": [],
        "jsons": [],
        "linha": 1,
        "coluna": 2,
        "width": 500
    },
    {
        "nome": "márcio ",
        "graficoTipo": "LINHA",
        "id": 7,
        "pizzasRosquinhas": [],
        "seriesBarra": [
            {
                "valueField": "7",
                "name": "7"
            },
            {
                "valueField": "8",
                "name": "8"
            }
        ],
        "jsons": [
            {
                "7": 28149.7000,
                "state": "Copacabana"
            },
            {
                "8": 540.0000,
                "state": "Copacabana"
            },
            {
                "7": 2268.0000,
                "state": "Interlagos"
            },
            {
                "8": 1342.0000,
                "state": "Interlagos"
            }
        ],
        "linha": 2,
        "coluna": 1,
        "width": 5000
    }
]
Monta os gráficos corretamente.
Como fazer com que o front monta a tela conforme retorno.
Ordenado pelas linhas e colunas (máximo 3). O backend já retorna a ordem correta

image

vamos supor que vem coluna 1 e 3, na linha 1. Então monta a linha com a coluna do meio vazio. e por ai vai.