Почему моя полярная диаграмма отображается как линейная диаграмма? (Highcharts последняя версия)

Question

Я следовал некоторым инструкциям и учебникам в Интернете, но не смог создать полярную диаграмму.

В итоге получается нормальная линейная диаграмма.

Что не так с моим кодом? Любые советы?

Спасибо,

  Highcharts.chart('container', {
    title: {
      text: null
    },
    legend: {
      enabled: false
    },
    tooltip: {
      pointFormat: '{point.y}'
    },
    pane: {
      size: '95%'
    },
    chart: {
      type: 'area',
      polar: true,
      spacingTop: 0
    },
    credits: {
      enabled: false
    },
    xAxis: {
      categories: ["John","Weta","Marry"],
      tickmarkPlacement: 'on',
      lineWidth: 2,
      labels: {
        style: {
          fontSize: window.screenshotMode ? '36px' : '18px'
        }
      }
    },
    yAxis: {
      gridLineInterpolation: 'polygon',
      lineWidth: 2,
      min: 0,
      max: 100,
      labels: {
        style: {
          fontSize: window.screenshotMode ? '36px' : '18px'
        }
      }
    },
    plotOptions: {
      series: {
        borderWidth: 4,
        borderColor: '#a00'
      }
    },
    series: [{
      data: [68,97,964]
    }]
  })

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

Answer 1

highchart-more требуется для запуска полярных диаграмм, поэтому вам необходимо включить библиотеку highchart-more.js.

<script src="https://code.highcharts.com/highcharts-more.js"></script>

Highcharts.chart('container', {
    title: {
      text: null
    },
    legend: {
      enabled: false
    },
    tooltip: {
      pointFormat: '{point.y}'
    },
    pane: {
      size: '95%'
    },
    chart: {
      type: 'area',
      polar: true,
      spacingTop: 0
    },
    credits: {
      enabled: false
    },
    xAxis: {
      categories: ["John","Weta","Marry"],
      tickmarkPlacement: 'on',
      lineWidth: 2,
      labels: {
        style: {
          fontSize: window.screenshotMode ? '36px' : '18px'
        }
      }
    },
    yAxis: {
      gridLineInterpolation: 'polygon',
      lineWidth: 2,
      min: 0,
      max: 100,
      labels: {
        style: {
          fontSize: window.screenshotMode ? '36px' : '18px'
        }
      }
    },
    plotOptions: {
      series: {
        borderWidth: 4,
        borderColor: '#a00'
      }
    },
    series: [{
      data: [68,97,964]
    }]
  })

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="height: 400px"></div>

Справочник по API: https://api.highcharts.com/highcharts/chart.polar