diff --git a/docs/DrugsForPathologies/index.html b/docs/DrugsForPathologies/index.html
index 8e51ca6c746..d04a74cf80a 100644
--- a/docs/DrugsForPathologies/index.html
+++ b/docs/DrugsForPathologies/index.html
@@ -1180,11 +1180,11 @@
-
+
+ src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js">
diff --git a/docs/DrugsForPathologies/js/DrugsChartView.js b/docs/DrugsForPathologies/js/DrugsChartView.js
index 7824e403cdc..1d0acb6c8c7 100644
--- a/docs/DrugsForPathologies/js/DrugsChartView.js
+++ b/docs/DrugsForPathologies/js/DrugsChartView.js
@@ -15,31 +15,26 @@ class DrugsChartView {
this.#canvas,
{
type: 'bar',
- plugins: [ChartDataLabels],
data: this.#getData(drugDescr),
options: this.#getOptions()
});
}
- setData(histoDescr) {
- const data = this.#getData(histoDescr);
- this.#chart.config.data = data;
- this.#chart.update();
- }
-
#getData(drugDescr) {
return {
labels: drugDescr['DRUG'],
- datasets: [{
- label: 'Fatal',
- data: this.#divide(drugDescr['FATAL'], drugDescr['CASES']),
- backgroundColor: '#FF0000'
- },
- {
- label: 'Recovered',
- data: this.#divide(drugDescr['RECOVERED'], drugDescr['CASES']),
- backgroundColor: '#00FF00'
- }]
+ datasets: [
+ {
+ label: 'Recovered',
+ data: this.#divide(drugDescr['RECOVERED'], drugDescr['CASES']),
+ backgroundColor: '#00FF00'
+ },
+ {
+ label: 'Fatal',
+ data: this.#divide(drugDescr['FATAL'], drugDescr['CASES']),
+ backgroundColor: '#FF0000'
+ }
+ ]
};
}
@@ -51,24 +46,26 @@ class DrugsChartView {
#getOptions() {
return {
- plugins: {
- datalabels: {
- anchor: 'end',
- align: 'top'
- }
- },
title: {
display: true,
position: 'top'
},
scales: {
+ x: {
+ title: {
+ display: true,
+ text: 'Drug'
+ }
+ },
y: {
ticks: {
- precision: 0
+ format: {
+ style: 'percent'
+ }
},
title: {
display: true,
- text: 'Frequency'
+ text: 'percentage of reports'
}
}
}