Chart style updates

frontend/src/Components/Chart/BarChart.js

@@ -2,6 +2,7 @@ import Chart from 'chart.js/auto';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { kinds } from 'Helpers/Props';
+import { defaultFontFamily } from 'Styles/Variables/fonts';
 
 function getColors(kind) {
 
@@ -39,7 +40,15 @@ class BarChart extends Component {
         plugins: {
           title: {
             display: true,
-            text: this.props.title
+            align: 'start',
+            text: this.props.title,
+            padding: {
+              bottom: 30
+            },
+            font: {
+              size: 14,
+              family: defaultFontFamily
+            }
           },
           legend: {
             display: this.props.legend

frontend/src/Components/Chart/DoughnutChart.js

@@ -1,6 +1,7 @@
 import Chart from 'chart.js/auto';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import { defaultFontFamily } from 'Styles/Variables/fonts';
 
 function getColors(kind) {
 
@@ -22,7 +23,15 @@ class DoughnutChart extends Component {
         plugins: {
           title: {
             display: true,
-            text: this.props.title
+            align: 'start',
+            text: this.props.title,
+            padding: {
+              bottom: 30
+            },
+            font: {
+              size: 14,
+              family: defaultFontFamily
+            }
           },
           legend: {
             position: 'bottom'

frontend/src/Components/Chart/StackedBarChart.js

@@ -1,6 +1,7 @@
 import Chart from 'chart.js/auto';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import { defaultFontFamily } from 'Styles/Variables/fonts';
 
 function getColors(index) {
 
@@ -36,7 +37,15 @@ class StackedBarChart extends Component {
         plugins: {
           title: {
             display: true,
-            text: this.props.title
+            align: 'start',
+            text: this.props.title,
+            padding: {
+              bottom: 30
+            },
+            font: {
+              size: 14,
+              family: defaultFontFamily
+            }
           }
         }
       },

frontend/src/Indexer/Stats/IndexerStats.tsx

@@ -233,6 +233,7 @@ function IndexerStats() {
                 <BarChart
                   data={getAverageResponseTimeData(item.indexers)}
                   title={translate('AverageResponseTimesMs')}
+                  stepSize={100}
                 />
               </div>
             </div>
@@ -241,6 +242,7 @@ function IndexerStats() {
                 <BarChart
                   data={getFailureRateData(item.indexers)}
                   title={translate('IndexerFailureRate')}
+                  stepSize={0.1}
                   kind={kinds.WARNING}
                 />
               </div>

src/NzbDrone.Core/Localization/Core/en.json

@@ -79,7 +79,7 @@
   "Author": "Author",
   "Automatic": "Automatic",
   "AutomaticSearch": "Automatic Search",
-  "AverageResponseTimesMs": "Average Response Times (Ms)",
+  "AverageResponseTimesMs": "Average Indexer Response Times (ms)",
   "Backup": "Backup",
   "BackupFolderHelpText": "Relative paths will be under Prowlarr's AppData directory",
   "BackupIntervalHelpText": "Interval between automatic backups",