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

diff --git a/docs/docs/developers/updates.md b/docs/docs/developers/updates.md
index dafadc502b956a51b7e3f72421fb9c8a10316e95..d725972fd79b106461d57bfe282bbbf2c0cd8490 100644 (file)
--- a/docs/docs/developers/updates.md
+++ b/docs/docs/developers/updates.md
@@ -42,9 +42,11 @@ function updateConfigByMutating(chart) {
 function updateConfigAsNewObject(chart) {
     chart.options = {
         responsive: true,
-        title: {
-            display: true,
-            text: 'Chart.js'
+        plugins: {
+            title: {
+                display: true,
+                text: 'Chart.js'
+            }
         },
         scales: {
             x: {

diff --git a/docs/docs/getting-started/v3-migration.md b/docs/docs/getting-started/v3-migration.md
index 80258d3f3e047582fdcf9726ae4cea098cc2bdaa..fb0d6a0b223fac91a7465e663a08e3cd20694a7b 100644 (file)
--- a/docs/docs/getting-started/v3-migration.md
+++ b/docs/docs/getting-started/v3-migration.md
@@ -33,9 +33,11 @@ const chart = new Chart(ctx, {
     type: 'line',
     // data: ...
     options: {
-        title: {
-            display: true,
-            text: 'Chart Title'
+        plugins: {
+            title: {
+                display: true,
+                text: 'Chart Title'
+            }
         },
         scales: {
             x: {

diff --git a/samples/advanced/progress-bar.html b/samples/advanced/progress-bar.html
index d10b75c3c024990136d3700821d261cf02f84f1c..b4283e2cd639e90a36c5fd702bda537c4ae46d0b 100644 (file)
--- a/samples/advanced/progress-bar.html
+++ b/samples/advanced/progress-bar.html
@@ -58,9 +58,11 @@
                                }]
                        },
                        options: {
-                               title: {
-                                       display: true,
-                                       text: 'Chart.js Line Chart - Animation Progress Bar'
+                               plugins: {
+                                       title: {
+                                               display: true,
+                                               text: 'Chart.js Line Chart - Animation Progress Bar'
+                                       }
                                },
                                animation: {
                                        duration: 2000,

diff --git a/samples/charts/area/line-boundaries.html b/samples/charts/area/line-boundaries.html
index 65191f7997796ab8c9d816cd3829ee282d01d586..0dd98a28f9c0b0c6481edfd17b1a574e43b41640 100644 (file)
--- a/samples/charts/area/line-boundaries.html
+++ b/samples/charts/area/line-boundaries.html
@@ -86,10 +86,12 @@
                                        }]
                                },
                                options: Chart.helpers.merge(options, {
-                                       title: {
-                                               text: 'fill: ' + boundary,
-                                               display: true
-                                       }
+                                       plugins: {
+                                               title: {
+                                                       text: 'fill: ' + boundary,
+                                                       display: true
+                                               }
+                                       },
                                })
                        });
                });

diff --git a/samples/charts/area/line-stacked.html b/samples/charts/area/line-stacked.html
index e10fef4b98368e522b9c2ebaa7cc2b0d47f5dee9..ed98af0c793fac74c59e56c413c88357e187d846 100644 (file)
--- a/samples/charts/area/line-stacked.html
+++ b/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: {

diff --git a/samples/charts/bar/stacked.html b/samples/charts/bar/stacked.html
index 7e2812e1b79c7a9c221233f9843d392c70d500a4..f78eb1f84fb227d725af7b960f7f61dfd4775fb5 100644 (file)
--- a/samples/charts/bar/stacked.html
+++ b/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'

diff --git a/samples/charts/line/multi-axis.html b/samples/charts/line/multi-axis.html
index be5ebf2fe41eb62946ce7c635e39db7b418dd789..52b05d5c04b23cb38c9761b0cbc21792482e23f3 100644 (file)
--- a/samples/charts/line/multi-axis.html
+++ b/samples/charts/line/multi-axis.html
@@ -66,9 +66,11 @@
                                                mode: 'index'
                                        },
                                        stacked: false,
-                                       title: {
-                                               display: true,
-                                               text: 'Chart.js Line Chart - Multi Axis'
+                                       plugins: {
+                                               title: {
+                                                       display: true,
+                                                       text: 'Chart.js Line Chart - Multi Axis'
+                                               }
                                        },
                                        scales: {
                                                y: {

diff --git a/samples/charts/line/stepped.html b/samples/charts/line/stepped.html
index 153736f277af665a61b6eeb76d7a09eb8fb5b60a..e2b10419364fdc842b350c932f2df148f8cd3ebe 100644 (file)
--- a/samples/charts/line/stepped.html
+++ b/samples/charts/line/stepped.html
@@ -45,9 +45,11 @@
                                },
                                options: {
                                        responsive: true,
-                                       title: {
-                                               display: true,
-                                               text: details.label,
+                                       plugins: {
+                                               title: {
+                                                       display: true,
+                                                       text: details.label,
+                                               }
                                        }
                                }
                        };

diff --git a/samples/charts/multi-series-pie.html b/samples/charts/multi-series-pie.html
index 6694f0773b106e066735e37fb757b84cf7244ee6..6f193a008800bd8851e4678f9888aa100bcd0610 100644 (file)
--- a/samples/charts/multi-series-pie.html
+++ b/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

diff --git a/samples/charts/radar-skip-points.html b/samples/charts/radar-skip-points.html
index 297319bf5c478386301758f7c7999bcd7e09bc0a..45fa896d86fdd592ee376c149da6942feb2b88c0 100644 (file)
--- a/samples/charts/radar-skip-points.html
+++ b/samples/charts/radar-skip-points.html
@@ -74,9 +74,11 @@
                                }]
                        },
                        options: {
-                               title: {
-                                       display: true,
-                                       text: 'Chart.js Radar Chart - Skip Points'
+                               plugins: {
+                                       title: {
+                                               display: true,
+                                               text: 'Chart.js Radar Chart - Skip Points'
+                                       }
                                },
                                elements: {
                                        line: {

diff --git a/samples/charts/scatter/basic.html b/samples/charts/scatter/basic.html
index 43e3758da0be04872732e0b474a186f0f5a84428..bff1f8862717ad7a591c90493d207e2200655ac9 100644 (file)
--- a/samples/charts/scatter/basic.html
+++ b/samples/charts/scatter/basic.html
@@ -52,10 +52,12 @@
                                type: 'scatter',
                                data: scatterChartData,
                                options: {
-                                       title: {
-                                               display: true,
-                                               text: 'Chart.js Scatter Chart'
-                                       },
+                                       plugins: {
+                                               title: {
+                                                       display: true,
+                                                       text: 'Chart.js Scatter Chart'
+                                               }
+                                       }
                                }
                        });
                };

diff --git a/samples/charts/scatter/multi-axis.html b/samples/charts/scatter/multi-axis.html
index feaafda0d53bade415fd6d316a6cf9f17cfbd373..0708b018810dac7a3f779a9181470fbe4b3c9a0e 100644 (file)
--- a/samples/charts/scatter/multi-axis.html
+++ b/samples/charts/scatter/multi-axis.html
@@ -92,9 +92,11 @@
                                        intersect: true,
                                        mode: 'nearest'
                                },
-                               title: {
-                                       display: true,
-                                       text: 'Chart.js Scatter Chart - Multi Axis'
+                               plugins: {
+                                       title: {
+                                               display: true,
+                                               text: 'Chart.js Scatter Chart - Multi Axis'
+                                       }
                                },
                                scales: {
                                        x: {

diff --git a/samples/index.html b/samples/index.html
index 7d897311c660e3197cb641cb0978d91e4afc2936..bf6ef7bba7e81a8820f2578b49d2246443764678 100644 (file)
--- a/samples/index.html
+++ b/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>

diff --git a/samples/samples.js b/samples/samples.js
index c1ac1ab17375e6c8f4749c7dbfd587fe9bc2d5ef..f0062a6593994559a083a3a6a0dbd371af465c43 100644 (file)
--- a/samples/samples.js
+++ b/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'

diff --git a/samples/scales/axis-center-position.html b/samples/scales/axis-center-position.html
index 5836aa09ef8ccefaf0827e5fbbfaa7cc20bb0614..dca9cdc33f59d9f59917c05da1fc793611af0813 100644 (file)
--- a/samples/scales/axis-center-position.html
+++ b/samples/scales/axis-center-position.html
@@ -61,10 +61,13 @@
                                data: scatterChartData,
                                options: {
                                        responsive: true,
-                                       title: {
-                                               display: true,
-                                               text: title
+                                       plugins: {
+                                               title: {
+                                                       display: true,
+                                                       text: title
+                                               }
                                        },
+
                                        scales: {
                                                x: {
                                                        position: xPosition,

diff --git a/samples/scales/filtering-labels.html b/samples/scales/filtering-labels.html
index 41d6547a8b8896a73e87ef59f53cd5d99591087f..66b14403dd59df5816d2660b8e728a76924e85b5 100644 (file)
--- a/samples/scales/filtering-labels.html
+++ b/samples/scales/filtering-labels.html
@@ -59,9 +59,11 @@
                        },
                        options: {
                                responsive: true,
-                               title: {
-                                       display: true,
-                                       text: 'Chart.js Line Chart - X-Axis Filter'
+                               plugins: {
+                                       title: {
+                                               display: true,
+                                               text: 'Chart.js Line Chart - X-Axis Filter'
+                                       }
                                },
                                scales: {
                                        x: {

diff --git a/samples/scales/gridlines-display.html b/samples/scales/gridlines-display.html
index 114a6665ec4225b12d7d289024abb312cb2ab4c6..15d2639a917bd32a02cf5436bee2679e6b2d3c36 100644 (file)
--- a/samples/scales/gridlines-display.html
+++ b/samples/scales/gridlines-display.html
@@ -50,9 +50,11 @@
                                },
                                options: {
                                        responsive: true,
-                                       title: {
-                                               display: true,
-                                               text: title
+                                       plugins: {
+                                               title: {
+                                                       display: true,
+                                                       text: title
+                                               }
                                        },
                                        scales: {
                                                x: {

diff --git a/samples/scales/gridlines-scriptable.html b/samples/scales/gridlines-scriptable.html
index 9794c1920bd1e43c1ff1c5511638573b8c140c17..b2c88d9a07aeb339398f2c462f5d248144faf6f9 100644 (file)
--- a/samples/scales/gridlines-scriptable.html
+++ b/samples/scales/gridlines-scriptable.html
@@ -39,9 +39,11 @@
                        },
                        options: {
                                responsive: true,
-                               title: {
-                                       display: true,
-                                       text: 'Grid Line Settings'
+                               plugins: {
+                                       title: {
+                                               display: true,
+                                               text: 'Grid Line Settings'
+                                       }
                                },
                                scales: {
                                        y: {

diff --git a/samples/scales/gridlines-style.html b/samples/scales/gridlines-style.html
index 8890ffe9fb88ea07761ed588efeb1f4cfeb1c037..2386c275dc839b60d3720bc904319bf4afca9e9f 100644 (file)
--- a/samples/scales/gridlines-style.html
+++ b/samples/scales/gridlines-style.html
@@ -39,9 +39,11 @@
                        },
                        options: {
                                responsive: true,
-                               title: {
-                                       display: true,
-                                       text: 'Grid Line Settings'
+                               plugins: {
+                                       title: {
+                                               display: true,
+                                               text: 'Grid Line Settings'
+                                       }
                                },
                                scales: {
                                        y: {

diff --git a/samples/scales/linear/min-max.html b/samples/scales/linear/min-max.html
index a7a7243a7081b7936efe1a453a352a9f0b17d2dd..5ebf416ffc10bf9cc0fe25adde504bfd831482c6 100644 (file)
--- a/samples/scales/linear/min-max.html
+++ b/samples/scales/linear/min-max.html
@@ -39,9 +39,11 @@
                        },
                        options: {
                                responsive: true,
-                               title: {
-                                       display: true,
-                                       text: 'Min and Max Settings'
+                               plugins: {
+                                       title: {
+                                               display: true,
+                                               text: 'Min and Max Settings'
+                                       }
                                },
                                scales: {
                                        y: {

diff --git a/samples/scales/logarithmic/line.html b/samples/scales/logarithmic/line.html
index b4aabe5408306e90442279f1fce73e63e4d2b715..38cb607165edca75079556cb474e3d671f118b72 100644 (file)
--- a/samples/scales/logarithmic/line.html
+++ b/samples/scales/logarithmic/line.html
@@ -60,9 +60,11 @@
                },
                options: {
                        responsive: true,
-                       title: {
-                               display: true,
-                               text: 'Chart.js Line Chart - Logarithmic'
+                       plugins: {
+                               title: {
+                                       display: true,
+                                       text: 'Chart.js Line Chart - Logarithmic'
+                               }
                        },
                        scales: {
                                x: {

diff --git a/samples/scales/logarithmic/scatter.html b/samples/scales/logarithmic/scatter.html
index 9f93ea267830b92ff2f018c31919404ec0f4fb38..1dec9916406b55f11b0e22761193a905e729a442 100644 (file)
--- a/samples/scales/logarithmic/scatter.html
+++ b/samples/scales/logarithmic/scatter.html
@@ -128,9 +128,11 @@
                        type: 'scatter',
                        data: scatterChartData,
                        options: {
-                               title: {
-                                       display: true,
-                                       text: 'Chart.js Scatter Chart - Logarithmic X-Axis'
+                               plugins: {
+                                       title: {
+                                               display: true,
+                                               text: 'Chart.js Scatter Chart - Logarithmic X-Axis'
+                                       }
                                },
                                scales: {
                                        x: {

diff --git a/samples/scales/multiline-labels.html b/samples/scales/multiline-labels.html
index f9890f3e37aa6725c31ccd1d71332488ef045b1e..d562ee7b629435b69d9234535002b08775a3be66 100644 (file)
--- a/samples/scales/multiline-labels.html
+++ b/samples/scales/multiline-labels.html
@@ -69,10 +69,12 @@
                        },
                        options: {
                                responsive: true,
-                               title: {
-                                       display: true,
-                                       text: 'Chart with Multiline Labels'
-                               },
+                               plugins: {
+                                       title: {
+                                               display: true,
+                                               text: 'Chart with Multiline Labels'
+                                       }
+                               }
                        }
                };
 

diff --git a/samples/scales/non-numeric-y.html b/samples/scales/non-numeric-y.html
index 7535f8509aecf44e96e03cd8a84bf0936c51b51d..adab57b5f41ca9f5e54fc1c61bff3e654b0d1dc0 100644 (file)
--- a/samples/scales/non-numeric-y.html
+++ b/samples/scales/non-numeric-y.html
@@ -34,9 +34,11 @@
                        },
                        options: {
                                responsive: true,
-                               title: {
-                                       display: true,
-                                       text: 'Chart with Non Numeric Y Axis'
+                               plugins: {
+                                       title: {
+                                               display: true,
+                                               text: 'Chart with Non Numeric Y Axis'
+                                       }
                                },
                                scales: {
                                        x: {

diff --git a/samples/scales/time/combo.html b/samples/scales/time/combo.html
index 2d2a3251a09b9069e44d2c11253c09c13ad59e4c..49b5051359c0f0d7adb864768c8bbcbc801eec2f 100644 (file)
--- a/samples/scales/time/combo.html
+++ b/samples/scales/time/combo.html
@@ -72,8 +72,11 @@
                                }]
                        },
                        options: {
-                               title: {
-                                       text: 'Chart.js Combo Time Scale'
+                               plugins: {
+                                       title: {
+                                               text: 'Chart.js Combo Time Scale',
+                                               display: true
+                                       }
                                },
                                scales: {
                                        x: {

diff --git a/samples/scales/time/line-max-span.html b/samples/scales/time/line-max-span.html
index 53ea4a00b140816511ddded674e9754aa827963d..06921f2c54dd7db847c32e0f4a067461089fe24c 100644 (file)
--- a/samples/scales/time/line-max-span.html
+++ b/samples/scales/time/line-max-span.html
@@ -79,9 +79,11 @@
                        options: {
                                spanGaps: 1000 * 60 * 60 * 24 * 2, // 2 days
                                responsive: true,
-                               title: {
-                                       display: true,
-                                       text: 'Chart.js Time - spanGaps: 172800000 (2 days in ms)'
+                               plugins: {
+                                       title: {
+                                               display: true,
+                                               text: 'Chart.js Time - spanGaps: 172800000 (2 days in ms)'
+                                       }
                                },
                                scales: {
                                        x: {

diff --git a/samples/scales/time/line-point-data.html b/samples/scales/time/line-point-data.html
index d5926e60c585006ccf62ceb048b0f5c63111c52f..f3a86920e376114cc3b784d9093a8b8f903beeb7 100644 (file)
--- a/samples/scales/time/line-point-data.html
+++ b/samples/scales/time/line-point-data.html
@@ -78,9 +78,11 @@
                        },
                        options: {
                                responsive: true,
-                               title: {
-                                       display: true,
-                                       text: 'Chart.js Time Point Data'
+                               plugins: {
+                                       title: {
+                                               display: true,
+                                               text: 'Chart.js Time Point Data'
+                                       }
                                },
                                scales: {
                                        x: {

diff --git a/samples/scales/time/line.html b/samples/scales/time/line.html
index c18d104748a2a6126b02b33684ff20125c54fda0..3e6b8170a3b551f7f2cf5d16f317bc6bdd755208 100644 (file)
--- a/samples/scales/time/line.html
+++ b/samples/scales/time/line.html
@@ -100,8 +100,11 @@
                                }]
                        },
                        options: {
-                               title: {
-                                       text: 'Chart.js Time Scale'
+                               plugins: {
+                                       title: {
+                                               text: 'Chart.js Time Scale',
+                                               display: true
+                                       }
                                },
                                scales: {
                                        x: {

diff --git a/samples/scales/toggle-scale-type.html b/samples/scales/toggle-scale-type.html
index c84b13e36a902950adc35182af3a43a8f2cc3dc4..243e9c5cafc5c3566f0aa1d34ef63df3390a02ab 100644 (file)
--- a/samples/scales/toggle-scale-type.html
+++ b/samples/scales/toggle-scale-type.html
@@ -62,9 +62,11 @@
                        },
                        options: {
                                responsive: true,
-                               title: {
-                                       display: true,
-                                       text: 'Chart.js Line Chart - ' + type
+                               plugins: {
+                                       title: {
+                                               display: true,
+                                               text: 'Chart.js Line Chart - ' + type
+                                       }
                                },
                                scales: {
                                        x: {