From b92d878fc29a00b2ca9ed48c1b18229ebf7c58f1 Mon Sep 17 00:00:00 2001
From: Josh Romero <rmerqg@amazon.com>
Date: Fri, 31 Mar 2023 09:46:57 -0700
Subject: [PATCH] fix(timeline): Fix yaxis label color in dark mode (#3698)

- Render label as HTML instead of in the Canvas so that it picks up text color from CSS theme
- Update CSS styles of yaxis label to match chart title
- Update HTML rendering to support custom color overrides via inline styles

Fixes https://github.com/opensearch-project/OpenSearch-Dashboards/issues/2250

Signed-off-by: Josh Romero <rmerqg@amazon.com>
Signed-off-by: vagimeli <vagimeli@amazon.com>
---
 CHANGELOG.md                                              | 1 +
 .../flot_charts/jquery_flot_axislabels.js                 | 6 ++++++
 .../vis_type_timeline/public/components/timeline_vis.scss | 8 ++++++--
 .../vis_type_timeline/server/series_functions/yaxis.js    | 2 +-
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d96af633e11c..3299d655e4be 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -111,6 +111,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Search Telemetry] Fixes search telemetry's observable object that won't be GC-ed([#3390](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3390))
 - Clean up and rebuild `@osd/pm` ([#3570](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3570))
 - [Vega] Add Filter custom label for opensearchDashboardsAddFilter ([#3640](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3640))
+- [Timeline] Fix y-axis label color in dark mode ([#3698](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3698))
 
 ### 🚞 Infrastructure
 
diff --git a/packages/osd-ui-shared-deps/flot_charts/jquery_flot_axislabels.js b/packages/osd-ui-shared-deps/flot_charts/jquery_flot_axislabels.js
index cda8038953c7..a656bce50fab 100644
--- a/packages/osd-ui-shared-deps/flot_charts/jquery_flot_axislabels.js
+++ b/packages/osd-ui-shared-deps/flot_charts/jquery_flot_axislabels.js
@@ -159,6 +159,9 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
                       'Label" " class="axisLabels" style="position:absolute;">'
                       + this.opts.axisLabel + '</div>');
         this.plot.getPlaceholder().append(this.elem);
+        if (this.opts.axisLabelColour) {
+            this.elem.css('color', this.opts.axisLabelColour);
+        }
         if (this.position == 'top') {
             this.elem.css('left', box.left + box.width/2 - this.labelWidth/2 +
                           'px');
@@ -261,6 +264,9 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
                       'Label" style="position:absolute; ' +
                       this.transforms(offsets.degrees, offsets.x, offsets.y) +
                       '">' + this.opts.axisLabel + '</div>');
+        if (this.opts.axisLabelColour) {
+            this.elem.css('color', this.opts.axisLabelColour);
+        }
         this.plot.getPlaceholder().append(this.elem);
     };
 
diff --git a/src/plugins/vis_type_timeline/public/components/timeline_vis.scss b/src/plugins/vis_type_timeline/public/components/timeline_vis.scss
index cdcb4253eb13..290a0a8b74da 100644
--- a/src/plugins/vis_type_timeline/public/components/timeline_vis.scss
+++ b/src/plugins/vis_type_timeline/public/components/timeline_vis.scss
@@ -7,12 +7,16 @@
   // Custom Jquery FLOT / schema selectors
   // Cannot change at the moment
 
-  .chart-top-title {
+  .chart-top-title,
+  .axisLabels {
     @include euiFontSizeXS;
 
+    font-weight: $euiFontWeightBold;
+  }
+
+  .chart-top-title {
     flex: 0;
     text-align: center;
-    font-weight: $euiFontWeightBold;
   }
 
   .chart-canvas {
diff --git a/src/plugins/vis_type_timeline/server/series_functions/yaxis.js b/src/plugins/vis_type_timeline/server/series_functions/yaxis.js
index d5b4eebf1283..66f38264965f 100644
--- a/src/plugins/vis_type_timeline/server/series_functions/yaxis.js
+++ b/src/plugins/vis_type_timeline/server/series_functions/yaxis.js
@@ -143,7 +143,7 @@ export default new Chainable('yaxis', {
       myAxis.axisLabelFontSizePixels = 11;
       myAxis.axisLabel = label;
       myAxis.axisLabelColour = color;
-      myAxis.axisLabelUseCanvas = true;
+      myAxis.axisLabelUseCanvas = false;
 
       if (tickDecimals) {
         myAxis.tickDecimals = tickDecimals < 0 ? 0 : tickDecimals;