Any working example for NUXT3 with polar charts?

[denpechen]

I cant solve problem with Polar chart.

Simple chart is working:

<template>
  <ClientOnly>
    <div ref="chartContainer"></div>
  </ClientOnly>
</template>

<script setup>
import { ref, onMounted } from "vue";

const chartContainer = ref(null);

onMounted(async () => {
  const Highcharts = await import("highcharts");

  Highcharts.default.chart(chartContainer.value, {
    title: {
      text: "Polar Chart",
    },
    pane: {
      startAngle: 0,
      endAngle: 360,
    },
    series: [
      {
        type: "line",
        name: "Data",
        data: [8, 12, 15, 10, 7, 8],
        pointPlacement: "on",
      },
    ],
    xAxis: {
      categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
      tickmarkPlacement: "on",
    },
    yAxis: {
      min: 0,
      title: {
        text: "Values",
      },
    },
  });
});
</script>

Polar chart:
[Vue warn]: Unhandled error during execution of mounted hook
Uncaught (in promise) TypeError: More is not a function

<template>
  <ClientOnly>
    <div ref="chartContainer"></div>
  </ClientOnly>
</template>

<script setup>
import { ref, onMounted } from "vue";

const chartContainer = ref(null);

onMounted(async () => {
  const Highcharts = await import("highcharts");
  const More = await import("highcharts/highcharts-more");

  More(Highcharts);

  Highcharts.default.chart(chartContainer.value, {
    chart: {
      polar: true,
    },
    title: {
      text: "Polar Chart",
    },
    pane: {
      startAngle: 0,
      endAngle: 360,
    },
    series: [
      {
        type: "line",
        name: "Data",
        data: [8, 12, 15, 10, 7, 8],
        pointPlacement: "on",
      },
    ],
    xAxis: {
      categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
      tickmarkPlacement: "on",
    },
    yAxis: {
      min: 0,
      title: {
        text: "Values",
      },
    },
  });
});
</script>