fix x-axis label collision (#4269)

* added custom class to labels

* added rotation of -45deg to horizontal labels

lib/plugins/html/src/sass/dark/components/chartist.scss

@@ -644,3 +644,8 @@
 .current-series .ct-point, .current-series .ct-line {
   stroke: blue;
 }
+
+// Custom override of chartist classes
+.ct-custom-label.ct-horizontal {
+  rotate: -45deg;
+}

lib/plugins/html/src/sass/light/components/chartist.scss

@@ -643,4 +643,9 @@
 
 .current-series .ct-point, .current-series .ct-line {
   stroke: blue;
+}
+
+// Custom override of chartist classes
+.ct-custom-label.ct-horizontal {
+  rotate: -45deg;
 }

lib/plugins/html/templates/url/metrics/visualProgress.pug

@@ -15,6 +15,9 @@ script(type='text/javascript').
       const visualProgressChart = new Chartist.Line('#ct-visualprogress', {
         series: [!{JSON.stringify(seriesVisualProgress)}],
         }, {
+        classNames: {
+          label: 'ct-label ct-custom-label'
+        },
         showArea: true,
         showPoint: true,
         chartPadding: {