Merge pull request #26688 from mig-visiblee/feature/radial-chart

[chart.js] added RadialChartOptions + made RadialLinearScale extend LinearScale

types/chart.js/chart.js-tests.ts

@@ -72,6 +72,54 @@ if (chart.chartArea) {
     console.log(chart.chartArea.left);
 }
 
+// Testing radial chart
+const tickOptions: Chart.LinearTickOptions = {
+    max: 100,
+    stepSize: 33,
+    display: false,
+    beginAtZero: true
+};
+const scaleOptions: Chart.RadialLinearScale = {
+    ticks: tickOptions,
+    lineArc: false,
+    display: false,
+    scaleLabel: {
+        display: false
+    },
+};
+const radarChartOptions: Chart.RadialChartOptions = {
+    legend: {display: false},
+    scale: scaleOptions,
+    responsive: true,
+};
+const chartConfig: Chart.ChartConfiguration = {
+    type: 'radar',
+    data: {
+        labels: ['#apples', '#pears', '#apricots', '#acorns', '#amigas', "#orics"],
+        datasets: [{
+			label: "test",
+			lineTension: 0.15,
+			data: [1, 1, 2, 3, 5],
+			backgroundColor: '#37738353',
+			borderColor: '#37738353',
+			borderWidth: 3,
+			fill: true
+		}]
+    },
+    options: radarChartOptions
+};
+const radialChart: Chart = new Chart(new CanvasRenderingContext2D(), chartConfig);
+radialChart.update();
+
+console.log(radialChart.ctx && radialChart.ctx.font);
+console.log(radialChart.canvas && radialChart.canvas.tagName);
+if (radialChart.chartArea) {
+    console.log(radialChart.chartArea.top);
+    console.log(radialChart.chartArea.right);
+    console.log(radialChart.chartArea.bottom);
+    console.log(radialChart.chartArea.left);
+}
+
 // http://www.chartjs.org/docs/latest/configuration/tooltip.html#position-modes
 Chart.Tooltip.positioners.custom = (elements: any[], eventPosition: Point) => {
     return {

types/chart.js/index.d.ts

@@ -188,6 +188,10 @@ declare namespace Chart {
         datasets?: ChartDataSets[];
     }
 
+	interface RadialChartOptions extends ChartOptions {
+		scale?: RadialLinearScale;
+	}
+
     interface ChartOptions {
         responsive?: boolean;
         responsiveAnimationDuration?: number;
@@ -580,7 +584,7 @@ declare namespace Chart {
         minUnit?: TimeUnit;
     }
 
-    interface RadialLinearScale {
+    interface RadialLinearScale extends LinearScale {
         lineArc?: boolean;
         angleLines?: AngleLineOptions;
         pointLabels?: PointLabelOptions;