diff --git a/app/assets/javascripts/admin/components/admin-graph.js b/app/assets/javascripts/admin/components/admin-graph.js index be2e0f4e1a..762c4d8d35 100644 --- a/app/assets/javascripts/admin/components/admin-graph.js +++ b/app/assets/javascripts/admin/components/admin-graph.js @@ -50,8 +50,9 @@ export default Component.extend({ }, didInsertElement() { - loadScript("/javascripts/Chart.min.js").then(() => - this.refreshChart.apply(this) - ); + loadScript("/javascripts/Chart.min.js").then(() => { + window.Chart.plugins.unregister(window.ChartDataLabels); + this.refreshChart.apply(this); + }); } }); diff --git a/app/assets/javascripts/admin/components/admin-report-chart.js b/app/assets/javascripts/admin/components/admin-report-chart.js index 3232b03519..2d30bb856e 100644 --- a/app/assets/javascripts/admin/components/admin-report-chart.js +++ b/app/assets/javascripts/admin/components/admin-report-chart.js @@ -90,6 +90,7 @@ export default Component.extend({ } loadScript("/javascripts/Chart.min.js").then(() => { + window.Chart.plugins.unregister(window.ChartDataLabels); this._resetChart(); if (!this.element) { diff --git a/app/assets/javascripts/admin/components/admin-report-stacked-chart.js b/app/assets/javascripts/admin/components/admin-report-stacked-chart.js index 8980c93077..cee7ae9a4a 100644 --- a/app/assets/javascripts/admin/components/admin-report-stacked-chart.js +++ b/app/assets/javascripts/admin/components/admin-report-stacked-chart.js @@ -67,6 +67,7 @@ export default Component.extend({ }; loadScript("/javascripts/Chart.min.js").then(() => { + window.Chart.plugins.unregister(window.ChartDataLabels); this._resetChart(); this._chart = new window.Chart(context, this._buildChartConfig(data)); diff --git a/plugins/poll/assets/javascripts/controllers/poll-breakdown.js.es6 b/plugins/poll/assets/javascripts/controllers/poll-breakdown.js.es6 index e0674e1f96..846ef355f4 100644 --- a/plugins/poll/assets/javascripts/controllers/poll-breakdown.js.es6 +++ b/plugins/poll/assets/javascripts/controllers/poll-breakdown.js.es6 @@ -9,49 +9,43 @@ import discourseComputed from "discourse-common/utils/decorators"; import { PIE_CHART_TYPE } from "../controllers/poll-ui-builder"; import { getColors } from "../lib/chart-colors"; -function stripHtml(html) { - var doc = new DOMParser().parseFromString(html, "text/html"); - return doc.body.textContent || ""; -} - -// TODO: Extract, see discourse-poll.js.es6 -function pieChartConfig(data, labels, opts = {}) { - const aspectRatio = "aspectRatio" in opts ? opts.aspectRatio : 2.2; - const strippedLabels = labels.map(l => stripHtml(l)); +function pieChartConfig(data) { return { type: PIE_CHART_TYPE, + plugins: [window.ChartDataLabels], data: { datasets: [ { data, backgroundColor: getColors(data.length) } - ], - labels: strippedLabels + ] }, options: { - responsive: true, - aspectRatio, - animation: { duration: 0 }, - legend: { display: false }, - tooltips: { - enabled: true, - callbacks: { - label(tooltipItem, pieData) { - const { datasetIndex, index } = tooltipItem; - return pieData.datasets[datasetIndex].data[index]; + plugins: { + datalabels: { + color: "#333", + backgroundColor: "rgba(255, 255, 255, 0.5)", + borderRadius: 2, + font: { + family: getComputedStyle(document.body).fontFamily, + size: 16 + }, + padding: { + top: 2, + right: 6, + bottom: 2, + left: 6 + }, + formatter(value) { + return value > 0 ? value : ""; } } }, - // TODO: is this needed? - legendCallback: function(chart) { - let legends = ""; - for (let i = 0; i < labels.length; i++) { - legends += `