diff --git a/ember-highcharts/src/components/high-charts.ts b/ember-highcharts/src/components/high-charts.ts
index 8485d2b..1d7de04 100644
--- a/ember-highcharts/src/components/high-charts.ts
+++ b/ember-highcharts/src/components/high-charts.ts
@@ -273,5 +273,10 @@ export default class HighCharts<
const More = await waitForPromise(import('highcharts/highcharts-more'));
More.default(Highcharts);
}
+
+ if (this.args.chartOptions?.chart?.polar === true) {
+ const More = await waitForPromise(import('highcharts/highcharts-more'));
+ More.default(Highcharts);
+ }
}
}
diff --git a/test-app/app/components/chart-line-polar.hbs b/test-app/app/components/chart-line-polar.hbs
new file mode 100644
index 0000000..0e6c14c
--- /dev/null
+++ b/test-app/app/components/chart-line-polar.hbs
@@ -0,0 +1,4 @@
+
diff --git a/test-app/app/components/chart-line-polar.js b/test-app/app/components/chart-line-polar.js
new file mode 100644
index 0000000..d6d4d15
--- /dev/null
+++ b/test-app/app/components/chart-line-polar.js
@@ -0,0 +1,44 @@
+import Component from '@glimmer/component';
+
+const DIRECTIONS = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
+const WIND_DATA = [
+ 0, 10, 15, 10, 20, 45, 47, 90, 110, 115, 130, 150, 160, 188, 190, 185, 192,
+];
+
+export default class LineBasic extends Component {
+ chartOptions = {
+ chart: {
+ type: 'line',
+ polar: true,
+ },
+ title: {
+ text: 'Wind direction history',
+ },
+ xAxis: {
+ tickInterval: 45,
+ min: 0,
+ max: 360,
+ labels: {
+ formatter: function ({ value }) {
+ return DIRECTIONS[Math.round(value / 45)];
+ },
+ },
+ },
+ yAxis: {
+ min: 0,
+ max: 1,
+ labels: {
+ enabled: false,
+ },
+ },
+ tooltip: false,
+ };
+
+ chartData = [
+ {
+ name: 'Amisbühl',
+ data: WIND_DATA.map((x, i) => ({ x, y: i / (WIND_DATA.length - 1) })),
+ connectEnds: false,
+ },
+ ];
+}
diff --git a/test-app/app/templates/index.hbs b/test-app/app/templates/index.hbs
index 9f3e1ac..187fb2c 100644
--- a/test-app/app/templates/index.hbs
+++ b/test-app/app/templates/index.hbs
@@ -10,6 +10,11 @@
+
+