docs: Polar chart in test app

test-app/app/components/chart-line-polar.hbs

@@ -0,0 +1,4 @@
+<HighCharts
+  @content={{this.chartData}}
+  @chartOptions={{this.chartOptions}}
+/>

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,
+    },
+  ];
+}

test-app/app/templates/index.hbs

@@ -10,6 +10,11 @@
   <ChartBarBasic />
 </section>
 
+<section>
+  <h3>Polar chart</h3>
+  <ChartLinePolar />
+</section>
+
 <section>
   <h3>Basic highmaps chart</h3>
   <ChartMapBasic />
@@ -53,4 +58,4 @@
 <section>
   <h3>Scatter chart</h3>
   <ChartScatter />
-</section>
+</section>