2 files changed, 43 insertions, 40 deletions

diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
index 7ffed83e8..2f87c6743 100644
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
@@ -1,3 +1,4 @@
+import { ChartData, ChartOptions, TooltipItem } from 'chart.js'
 import { SortMeta } from 'primeng/api'
 import { Component, OnInit } from '@angular/core'
 import { ConfirmService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
@@ -21,7 +22,7 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
   displayType: VideoRedundanciesTarget = 'my-videos'
 
-  redundanciesGraphsData: { stats: VideosRedundancyStats, graphData: any, options: any }[] = []
+  redundanciesGraphsData: { stats: VideosRedundancyStats, graphData: ChartData, options: ChartOptions }[] = []
 
   noRedundancies = false
 
@@ -114,21 +115,22 @@ export class VideoRedundanciesListComponent extends RestTable implements OnInit
         ]
       },
       options: {
-        title: {
-          display: true,
-          text: stats.strategy
-        },
-
-        tooltips: {
-          callbacks: {
-            label: (tooltipItem: any, data: any) => {
-              const dataset = data.datasets[tooltipItem.datasetIndex]
-              let label = data.labels[tooltipItem.index]
-              if (label) label += ': '
-              else label = ''
-
-              label += this.bytesPipe.transform(dataset.data[tooltipItem.index], 1)
-              return label
+        plugins: {
+          title: {
+            display: true,
+            text: stats.strategy
+          },
+
+          tooltip: {
+            callbacks: {
+              label: (tooltip: TooltipItem<any>) => {
+                let label = tooltip.label || ''
+                if (label) label += ': '
+
+                label += this.bytesPipe.transform(tooltip.raw as number, 1)
+
+                return label
+              }
             }
           }
         }
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
index 303f783fd..205ad7a89 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.ts
@@ -1,4 +1,4 @@
-import { ChartData } from 'chart.js'
+import { ChartData, ChartOptions, TooltipItem, TooltipModel } from 'chart.js'
 import { max, maxBy, min, minBy } from 'lodash-es'
 import { mergeMap } from 'rxjs/operators'
 import { Component } from '@angular/core'
@@ -18,7 +18,7 @@ export class MyVideoChannelsComponent {
   videoChannelsMinimumDailyViews = 0
   videoChannelsMaximumDailyViews: number
 
-  chartOptions: any
+  chartOptions: ChartOptions
 
   search: string
 
@@ -117,20 +117,33 @@ channel with the same name (${videoChannel.name})!`,
 
   private buildChartOptions () {
     this.chartOptions = {
-      legend: {
-        display: false
+      plugins: {
+        legend: {
+          display: false
+        },
+        tooltip: {
+          mode: 'index',
+          intersect: false,
+          external: function ({ tooltip }: { tooltip: TooltipModel<any> }) {
+            if (!tooltip) return
+
+            // disable displaying the color box
+            tooltip.options.displayColors = false
+          },
+          callbacks: {
+            label: (tooltip: TooltipItem<any>) => `${tooltip.formattedValue} views`
+          }
+        }
       },
       scales: {
-        xAxes: [ {
+        x: {
           display: false
-        } ],
-        yAxes: [ {
+        },
+        y: {
           display: false,
-          ticks: {
-            min: Math.max(0, this.videoChannelsMinimumDailyViews - (3 * this.videoChannelsMaximumDailyViews / 100)),
-            max: Math.max(1, this.videoChannelsMaximumDailyViews)
-          }
-        } ]
+          min: Math.max(0, this.videoChannelsMinimumDailyViews - (3 * this.videoChannelsMaximumDailyViews / 100)),
+          max: Math.max(1, this.videoChannelsMaximumDailyViews)
+        }
       },
       layout: {
         padding: {
@@ -145,18 +158,6 @@ channel with the same name (${videoChannel.name})!`,
           radius: 0
         }
       },
-      tooltips: {
-        mode: 'index',
-        intersect: false,
-        custom: function (tooltip: any) {
-          if (!tooltip) return
-          // disable displaying the color box
-          tooltip.displayColors = false
-        },
-        callbacks: {
-          label: (tooltip: any, data: any) => `${tooltip.value} views`
-        }
-      },
       hover: {
         mode: 'index',
         intersect: false