Fix/area fill and chart titles (#8113)

* fixed fill for area chart stacked and title for charts where it wasn't in plugins yet
* Chart defined in utils
* added radar skip points example in the overview to go to

docs/docs/developers/updates.md

@@ -42,9 +42,11 @@ function updateConfigByMutating(chart) {
 function updateConfigAsNewObject(chart) {
     chart.options = {
         responsive: true,
+        plugins: {
             title: {
                 display: true,
                 text: 'Chart.js'
+            }
         },
         scales: {
             x: {

docs/docs/getting-started/v3-migration.md

@@ -33,9 +33,11 @@ const chart = new Chart(ctx, {
     type: 'line',
     // data: ...
     options: {
+        plugins: {
             title: {
                 display: true,
                 text: 'Chart Title'
+            }
         },
         scales: {
             x: {

samples/advanced/progress-bar.html

@@ -58,9 +58,11 @@
 				}]
 			},
 			options: {
+				plugins: {
 					title: {
 						display: true,
 						text: 'Chart.js Line Chart - Animation Progress Bar'
+					}
 				},
 				animation: {
 					duration: 2000,

samples/charts/area/line-boundaries.html

@@ -86,10 +86,12 @@
 					}]
 				},
 				options: Chart.helpers.merge(options, {
+					plugins: {
 						title: {
 							text: 'fill: ' + boundary,
 							display: true
 						}
+					},
 				})
 			});
 		});

samples/charts/area/line-stacked.html

@@ -44,6 +44,7 @@
 						randomScalingFactor(),
 						randomScalingFactor()
 					],
+					fill: true
 				}, {
 					label: 'My Second dataset',
 					borderColor: window.chartColors.blue,
@@ -57,6 +58,7 @@
 						randomScalingFactor(),
 						randomScalingFactor()
 					],
+					fill: true
 				}, {
 					label: 'My Third dataset',
 					borderColor: window.chartColors.green,
@@ -70,6 +72,7 @@
 						randomScalingFactor(),
 						randomScalingFactor()
 					],
+					fill: true
 				}, {
 					label: 'My Fourth dataset',
 					borderColor: window.chartColors.yellow,
@@ -83,6 +86,7 @@
 						randomScalingFactor(),
 						randomScalingFactor()
 					],
+					fill: true
 				}]
 			},
 			options: {

samples/charts/bar/stacked.html

@@ -67,7 +67,7 @@
 				type: 'bar',
 				data: barChartData,
 				options: {
-					plugin: {
+					plugins: {
 						title: {
 							display: true,
 							text: 'Chart.js Bar Chart - Stacked'

samples/charts/line/multi-axis.html

@@ -66,9 +66,11 @@
 						mode: 'index'
 					},
 					stacked: false,
+					plugins: {
 						title: {
 							display: true,
 							text: 'Chart.js Line Chart - Multi Axis'
+						}
 					},
 					scales: {
 						y: {

samples/charts/line/stepped.html

@@ -45,11 +45,13 @@
 				},
 				options: {
 					responsive: true,
+					plugins: {
 						title: {
 							display: true,
 							text: details.label,
 						}
 					}
+				}
 			};
 		}
 

samples/charts/multi-series-pie.html

@@ -48,7 +48,7 @@
 						labels: {
 							generateLabels: function(chart) {
 								// Get the default label list
-								var original = Chart.defaults.controllers.pie.legend.labels.generateLabels;
+								var original = Chart.defaults.controllers.pie.plugins.legend.labels.generateLabels;
 								var labels = original.call(this, chart);
 
 								// Build an array of colors used in the datasets of the chart

samples/charts/radar-skip-points.html

@@ -74,9 +74,11 @@
 				}]
 			},
 			options: {
+				plugins: {
 					title: {
 						display: true,
 						text: 'Chart.js Radar Chart - Skip Points'
+					}
 				},
 				elements: {
 					line: {

samples/charts/scatter/basic.html

@@ -52,10 +52,12 @@
 				type: 'scatter',
 				data: scatterChartData,
 				options: {
+					plugins: {
 						title: {
 							display: true,
 							text: 'Chart.js Scatter Chart'
-					},
+						}
+					}
 				}
 			});
 		};

samples/charts/scatter/multi-axis.html

@@ -92,9 +92,11 @@
 					intersect: true,
 					mode: 'nearest'
 				},
+				plugins: {
 					title: {
 						display: true,
 						text: 'Chart.js Scatter Chart - Multi Axis'
+					}
 				},
 				scales: {
 					x: {

samples/index.html

@@ -7,6 +7,7 @@
 	<link rel="stylesheet" type="text/css" href="style.css">
 	<link rel="icon" href="favicon.ico">
 	<script src="samples.js"></script>
+	<script src="../dist/chart.min.js"></script>
 	<script src="utils.js"></script>
 	<title>Chart.js samples</title>
 </head>

samples/samples.js

@@ -91,6 +91,9 @@
 		}, {
 			title: 'Radar',
 			path: 'charts/radar.html'
+		}, {
+			title: 'Radar skip points',
+			path: 'charts/radar-skip-points.html'
 		}, {
 			title: 'Combo bar/line',
 			path: 'charts/combo-bar-line.html'

samples/scales/axis-center-position.html

@@ -61,10 +61,13 @@
 				data: scatterChartData,
 				options: {
 					responsive: true,
+					plugins: {
 						title: {
 							display: true,
 							text: title
+						}
 					},
+
 					scales: {
 						x: {
 							position: xPosition,

samples/scales/filtering-labels.html

@@ -59,9 +59,11 @@
 			},
 			options: {
 				responsive: true,
+				plugins: {
 					title: {
 						display: true,
 						text: 'Chart.js Line Chart - X-Axis Filter'
+					}
 				},
 				scales: {
 					x: {

samples/scales/gridlines-display.html

@@ -50,9 +50,11 @@
 				},
 				options: {
 					responsive: true,
+					plugins: {
 						title: {
 							display: true,
 							text: title
+						}
 					},
 					scales: {
 						x: {

samples/scales/gridlines-scriptable.html

@@ -39,9 +39,11 @@
 			},
 			options: {
 				responsive: true,
+				plugins: {
 					title: {
 						display: true,
 						text: 'Grid Line Settings'
+					}
 				},
 				scales: {
 					y: {

samples/scales/gridlines-style.html

@@ -39,9 +39,11 @@
 			},
 			options: {
 				responsive: true,
+				plugins: {
 					title: {
 						display: true,
 						text: 'Grid Line Settings'
+					}
 				},
 				scales: {
 					y: {

samples/scales/linear/min-max.html

@@ -39,9 +39,11 @@
 			},
 			options: {
 				responsive: true,
+				plugins: {
 					title: {
 						display: true,
 						text: 'Min and Max Settings'
+					}
 				},
 				scales: {
 					y: {

samples/scales/logarithmic/line.html

@@ -60,9 +60,11 @@
 		},
 		options: {
 			responsive: true,
+			plugins: {
 				title: {
 					display: true,
 					text: 'Chart.js Line Chart - Logarithmic'
+				}
 			},
 			scales: {
 				x: {

samples/scales/logarithmic/scatter.html

@@ -128,9 +128,11 @@
 			type: 'scatter',
 			data: scatterChartData,
 			options: {
+				plugins: {
 					title: {
 						display: true,
 						text: 'Chart.js Scatter Chart - Logarithmic X-Axis'
+					}
 				},
 				scales: {
 					x: {

samples/scales/multiline-labels.html

@@ -69,10 +69,12 @@
 			},
 			options: {
 				responsive: true,
+				plugins: {
 					title: {
 						display: true,
 						text: 'Chart with Multiline Labels'
-				},
+					}
+				}
 			}
 		};
 

samples/scales/non-numeric-y.html

@@ -34,9 +34,11 @@
 			},
 			options: {
 				responsive: true,
+				plugins: {
 					title: {
 						display: true,
 						text: 'Chart with Non Numeric Y Axis'
+					}
 				},
 				scales: {
 					x: {

samples/scales/time/combo.html

@@ -72,8 +72,11 @@
 				}]
 			},
 			options: {
+				plugins: {
 					title: {
-					text: 'Chart.js Combo Time Scale'
+						text: 'Chart.js Combo Time Scale',
+						display: true
+					}
 				},
 				scales: {
 					x: {

samples/scales/time/line-max-span.html

@@ -79,9 +79,11 @@
 			options: {
 				spanGaps: 1000 * 60 * 60 * 24 * 2, // 2 days
 				responsive: true,
+				plugins: {
 					title: {
 						display: true,
 						text: 'Chart.js Time - spanGaps: 172800000 (2 days in ms)'
+					}
 				},
 				scales: {
 					x: {

samples/scales/time/line-point-data.html

@@ -78,9 +78,11 @@
 			},
 			options: {
 				responsive: true,
+				plugins: {
 					title: {
 						display: true,
 						text: 'Chart.js Time Point Data'
+					}
 				},
 				scales: {
 					x: {

samples/scales/time/line.html

@@ -100,8 +100,11 @@
 				}]
 			},
 			options: {
+				plugins: {
 					title: {
-					text: 'Chart.js Time Scale'
+						text: 'Chart.js Time Scale',
+						display: true
+					}
 				},
 				scales: {
 					x: {

samples/scales/toggle-scale-type.html

@@ -62,9 +62,11 @@
 			},
 			options: {
 				responsive: true,
+				plugins: {
 					title: {
 						display: true,
 						text: 'Chart.js Line Chart - ' + type
+					}
 				},
 				scales: {
 					x: {