From c3fbe5efc34665a54d22de09bbdad1e7b96b115c Mon Sep 17 00:00:00 2001
From: LeeLenaleee <39033624+LeeLenaleee@users.noreply.github.com>
Date: Mon, 30 Nov 2020 15:59:20 +0100
Subject: [PATCH] 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 | 8 +++++---
docs/docs/getting-started/v3-migration.md | 8 +++++---
samples/advanced/progress-bar.html | 8 +++++---
samples/charts/area/line-boundaries.html | 10 ++++++----
samples/charts/area/line-stacked.html | 4 ++++
samples/charts/bar/stacked.html | 2 +-
samples/charts/line/multi-axis.html | 8 +++++---
samples/charts/line/stepped.html | 8 +++++---
samples/charts/multi-series-pie.html | 2 +-
samples/charts/radar-skip-points.html | 8 +++++---
samples/charts/scatter/basic.html | 10 ++++++----
samples/charts/scatter/multi-axis.html | 8 +++++---
samples/index.html | 1 +
samples/samples.js | 3 +++
samples/scales/axis-center-position.html | 9 ++++++---
samples/scales/filtering-labels.html | 8 +++++---
samples/scales/gridlines-display.html | 8 +++++---
samples/scales/gridlines-scriptable.html | 8 +++++---
samples/scales/gridlines-style.html | 8 +++++---
samples/scales/linear/min-max.html | 8 +++++---
samples/scales/logarithmic/line.html | 8 +++++---
samples/scales/logarithmic/scatter.html | 8 +++++---
samples/scales/multiline-labels.html | 10 ++++++----
samples/scales/non-numeric-y.html | 8 +++++---
samples/scales/time/combo.html | 7 +++++--
samples/scales/time/line-max-span.html | 8 +++++---
samples/scales/time/line-point-data.html | 8 +++++---
samples/scales/time/line.html | 7 +++++--
samples/scales/toggle-scale-type.html | 8 +++++---
29 files changed, 134 insertions(+), 75 deletions(-)
diff --git a/docs/docs/developers/updates.md b/docs/docs/developers/updates.md
index dafadc502..d725972fd 100644
--- 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 80258d3f3..fb0d6a0b2 100644
--- 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 d10b75c3c..b4283e2cd 100644
--- 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 65191f799..0dd98a28f 100644
--- 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 e10fef4b9..ed98af0c7 100644
--- 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 7e2812e1b..f78eb1f84 100644
--- 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 be5ebf2fe..52b05d5c0 100644
--- 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 153736f27..e2b104193 100644
--- 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 6694f0773..6f193a008 100644
--- 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 297319bf5..45fa896d8 100644
--- 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 43e3758da..bff1f8862 100644
--- 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 feaafda0d..0708b0188 100644
--- 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 7d897311c..bf6ef7bba 100644
--- a/samples/index.html
+++ b/samples/index.html
@@ -7,6 +7,7 @@
+
Chart.js samples
diff --git a/samples/samples.js b/samples/samples.js
index c1ac1ab17..f0062a659 100644
--- 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 5836aa09e..dca9cdc33 100644
--- 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 41d6547a8..66b14403d 100644
--- 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 114a6665e..15d2639a9 100644
--- 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 9794c1920..b2c88d9a0 100644
--- 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 8890ffe9f..2386c275d 100644
--- 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 a7a7243a7..5ebf416ff 100644
--- 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 b4aabe540..38cb60716 100644
--- 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 9f93ea267..1dec99164 100644
--- 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 f9890f3e3..d562ee7b6 100644
--- 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 7535f8509..adab57b5f 100644
--- 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 2d2a3251a..49b505135 100644
--- 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 53ea4a00b..06921f2c5 100644
--- 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 d5926e60c..f3a86920e 100644
--- 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 c18d10474..3e6b8170a 100644
--- 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 c84b13e36..243e9c5ca 100644
--- 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: {
--
2.47.2