[admin] better profilesByLocale chart

components/Chart.vue

@@ -11,13 +11,20 @@
             data: { required: true },
             cumulative: { type: Boolean },
             type: {'default': 'line'},
+            options: {'default': () => { return {
+                responsive: true,
+                interaction: {
+                    intersect: false,
+                    mode: 'index',
+                },
+            }; }},
         },
         async created() {
         },
         async mounted() {
             if (!process.client) { return; }
 
-            await this.$loadScript('charts', 'https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.min.js');
+            await this.$loadScript('charts', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js');
             this.drawChart();
         },
         methods: {
@@ -35,11 +42,14 @@
                         labels: Object.keys(this.data),
                         datasets: [{
                             label: this.label,
-                            data: this.cumulative ? this.accumulate(Object.values(this.data)) : Object.values(this.data),
+                            data: this.cumulative
+                                ? this.accumulate(Object.values(this.data))
+                                : Object.values(this.data),
                             fill: false,
                             borderColor: '#C71585',
                         }],
                     },
+                    options: this.options,
                 });
             },
             accumulate(values) {

routes/admin.vue

@@ -94,7 +94,14 @@
 
         <ChartSet name="users" :data="stats.users.chart" init="cumulative"/>
 
-        <Chart label="number of profiles by locale" :data="profilesByLocale" type="bar"/>
+        <Chart label="number of profiles by locale" :data="profilesByLocale" type="bar" :options="{
+            indexAxis: 'y',
+            responsive: true,
+            interaction: {
+                intersect: false,
+                mode: 'y',
+            },
+        }"/>
 
         <section>
             <Icon v="id-card"/>