Полярная диаграмма Highcharts неправильно соединяет линии

У меня очень странная проблема при использовании полярных опций в highcharts-more. Вот как это выглядит...

Ниже приведен мой полный код (он завернут в компонент React)

import React from 'react'
import PropTypes from 'prop-types'
import { Card, CardHeader, CardText, CircularProgress } from 'material-ui'
import ReactHighcharts from 'react-highcharts'
import HighchartsMore from 'highcharts-more'
import colors from '../../../colors'

HighchartsMore(ReactHighcharts.Highcharts)

const styles = {
  textAlignLeft: {
    textAlign: 'left'
  },
  loadingCardText: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  }
}

const View = ({data1, data2, data3, data4, loading, hasEtfBeenSelected, highchartsAreaThreshold}) => {
  if (!hasEtfBeenSelected) {
    return (<div />)
  }

  let config = {
    credits: false,
    chart: {
      polar: true,
      type: 'area'
    },
    title: {
      text: null
    },
    pane: {
      size: '80%',
      startAngle: 22.5
    },
    colors: [
      colors.color1, colors.color2, colors.color3, colors.color4
    ],
    xAxis: {
      categories: data1.map(x => x[0]),
      tickmarkPlacement: 'on',
      lineWidth: 0
    },
    plotOptions: {
      series: {
        threshold: highchartsAreaThreshold
      }
    },
    yAxis: {
      gridLineInterpolation: 'polygon',
      lineWidth: 0,
      min: highchartsAreaThreshold,
      startOnTick: false,
      tickAmount: 5
    },
    tooltip: {
      shared: true,
      valuePrefix: '$'
    },
    legend: {
      align: 'right',
      verticalAlign: 'top',
      y: 70,
      layout: 'vertical'
    },
    series: [
      {
        name: 'Data1',
        data: data1,
        pointPlacement: 'on',
        marker: {
          enabled: false
        },
        fillOpacity: 0.2,
        lineWidth: 1
      },
      {
        name: 'Data2',
        data: data2,
        pointPlacement: 'on',
        marker: {
          enabled: false
        },
        fillOpacity: 0.2,
        lineWidth: 1
      },
      {
        name: 'Data3',
        data: data3,
        pointPlacement: 'on',
        marker: {
          enabled: false
        },
        fillOpacity: 0.2,
        lineWidth: 1
      },
      {
        name: 'Data4',
        data: data4,
        pointPlacement: 'on',
        marker: {
          enabled: false
        },
        fillOpacity: 0.2,
        lineWidth: 1
      }
    ]
  }

  if (loading) {
    return (<div>
      <Card>
        <CardHeader title='Spreads' style={styles.textAlignLeft} />
        <CardText style={styles.loadingCardText}>
          <CircularProgress size={70} thickness={5} />
        </CardText>
      </Card>
    </div>)
  }

  return (
    <div>
      <Card>
        <CardHeader title='Spreads'
          style={styles.textAlignLeft} />
        <CardText>
          <ReactHighcharts config={config} />
        </CardText>
      </Card>
    </div>
  )
}

View.propTypes = {
  data1: PropTypes.array,
  data2: PropTypes.array,
  data3: PropTypes.array,
  data4: PropTypes.array,
  loading: PropTypes.bool,
  hasEtfBeenSelected: PropTypes.bool,
  highchartsAreaThreshold: PropTypes.number
}

export default View

highchartsAreaThreshold установлен как минимум всех данных (чтобы диаграмма окрашивала отрицательные данные). Это странно, потому что именно этот код работал вчера. Так что это случайно. Я понятия не имею, что я делаю неправильно.

РЕДАКТИРОВАТЬ: Вот некоторые примеры данных (данные1..данные4 выглядят так):

data1:
Array[8]
0: 0.01
1: 0
2: -0.007
3: 0.014
4: -0.001
5: 0.021
6: 0
7: 0.01

data2:
Array[8]
0: 0.04
1: 0.02
2: 0.003
3: 0.031
4: -0.03
5: -0.006
6: -0.03
7: 0.04

Я только что попытался использовать простой массив вместо массива 2d-векторов, как было предложено, но получил тот же результат.