styling chart

docs/DrugsForPathologies/index.html

@@ -1180,7 +1180,7 @@
   <script src="../gentelella/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
   <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
   <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
   <script charset="utf8" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"
     type="text/javascript"></script>
   <script

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'
-            },
+            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'
                     }
                 }
             }