Рендеринг Google Charts в цикле

Question

У меня есть несколько графиков, которые я хочу сделать.Вот мой компонент, используемый для рендеринга

export default class ChartComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {data: []};
    }

    componentWillReceiveProps(nextProps) {
        const data = [this.props.data];
        const {col} = nextProps;
        console.log(col);
        for (const id in col[0]) {
            data.push([id, ...col.map(arr => arr[id])]);
        }
        console.log(data);
        this.setState({data: data})
    }


    render() {
        return (
            <Chart
                chartType="ColumnChart"
                loader={<div>Loading Chart</div>}
                data={this.state.data}
                options={{
                    title: this.props.title,
                    hAxis: {
                        title: 'Powtorzenia',
                        minValue: 0,
                    },
                    vAxis: {
                        title: 'Transakcje',
                    },
                }}
                legendToggle
            />
        );
    }

Этот код берет два массива и объединяет их для использования компонентом <Chart/>.Вот что у меня сейчас:

И это работает.Он показывает цифры правильно.

А вот соответствующий код моего родительского компонента:

{/*This works (See the image attached)*/}
<ChartComponent
    title={`Wszystkie doladowania`}
    col={[this.state.allTransactions, this.state.completedTransactions]}
    data={['Transactions', 'Started', 'Completed']}
/>
{/*This doesn't work*/}
<div>
    {
        this.state.allTransactions.map((tr, i) => {
            const col = [
                [this.state.allTransactions[i]],
                [this.state.completedTransactions[i]]
            ];

            console.log(2, col);
            return (
                <ChartComponent
                    key={i}
                    title={`Wszystkie doladowania`}
                    col={col}
                    data={['Transactions', 'Started', 'Completed']}
                />
            )
        })
    }
</div>

Переменные таковы: var allTransactions = [null, 519, 91, 25, 2, 1, 3, 2, 0, 0, 0, 1, 1, 1] var completeTransactions = [null, 120, 36, 3, 1, 2, 1, 1]

var col =
    [
        [
            null,
            519,
            91,
            25,
            2,
            1,
            3,
            2,
            0,
            0,
            0,
            1,
            1,
            1
        ],
        [
            null,
            120,
            36,
            3,
            1,
            2,
            1,
            1
        ]
    ]

Так что я в основном хочу сделатьдиаграмма для каждого значения в объединенной коллекции.Примерно так:

Но для каждого номера.Итак, чтобы разбить график на части.

Единственная ошибка, которую я получаю, это:

В таблице нет столбцов.

13 раз.

Есть идеи, что здесь не так?