From 44b254b0d485ae1920da700676ca83165064a732 Mon Sep 17 00:00:00 2001
From: Linus Pahl <46300478+linuspahl@users.noreply.github.com>
Date: Wed, 20 Nov 2024 12:58:52 +0100
Subject: [PATCH] Fixing text color of bar labels in bar chart, which are
 displayed outside of a bar. (#20948) (#20994)

* Fixing text color for bar labels in bar chart, which are displayed outside of the bar.

* Fixing typo

* Set `outsidetextfont` for all charts.

* Adding changelog.
---
 changelog/unreleased/issue-20789.toml                     | 5 +++++
 .../src/views/components/visualizations/GenericPlot.tsx   | 8 +++-----
 2 files changed, 8 insertions(+), 5 deletions(-)
 create mode 100644 changelog/unreleased/issue-20789.toml

diff --git a/changelog/unreleased/issue-20789.toml b/changelog/unreleased/issue-20789.toml
new file mode 100644
index 000000000000..ee4fe1231396
--- /dev/null
+++ b/changelog/unreleased/issue-20789.toml
@@ -0,0 +1,5 @@
+type = "fixed"
+message = "Fixing text color of bar labels in bar chart, which are displayed outside of a bar."
+
+issues = ["20789"]
+pulls = ["20948"]
diff --git a/graylog2-web-interface/src/views/components/visualizations/GenericPlot.tsx b/graylog2-web-interface/src/views/components/visualizations/GenericPlot.tsx
index 9f153f6de522..9506b057be78 100644
--- a/graylog2-web-interface/src/views/components/visualizations/GenericPlot.tsx
+++ b/graylog2-web-interface/src/views/components/visualizations/GenericPlot.tsx
@@ -174,7 +174,7 @@ const usePlotLayout = (layout: Partial<Layout>) => {
   }, [colors, interactive, layout, theme]);
 };
 
-const usePlotChatData = (chartData: Array<any>, setChartColor: (data: ChartConfig, color: ColorMapper) => ChartColor) => {
+const usePlotChartData = (chartData: Array<any>, setChartColor: (data: ChartConfig, color: ColorMapper) => ChartColor) => {
   const theme = useTheme();
   const { colors } = useContext(ChartColorContext);
 
@@ -182,9 +182,7 @@ const usePlotChatData = (chartData: Array<any>, setChartColor: (data: ChartConfi
     if (setChartColor && colors) {
       const conf = setChartColor(chart, colors);
 
-      if (chart.type === 'pie') {
-        conf.outsidetextfont = { color: theme.colors.global.textDefault };
-      }
+      conf.outsidetextfont = { color: theme.colors.global.textDefault };
 
       if (chart?.name === eventsDisplayName) {
         const eventColor = colors.get(eventsDisplayName, EVENT_COLOR);
@@ -206,7 +204,7 @@ const usePlotChatData = (chartData: Array<any>, setChartColor: (data: ChartConfi
 const GenericPlot = ({ chartData, layout, setChartColor, onClickMarker, onHoverMarker, onUnhoverMarker, onZoom, onAfterPlot }: Props) => {
   const interactive = useContext(InteractiveContext);
   const plotLayout = usePlotLayout(layout);
-  const plotChartData = usePlotChatData(chartData, setChartColor);
+  const plotChartData = usePlotChartData(chartData, setChartColor);
   const onRenderComplete = useContext(RenderCompletionCallback);
 
   const _onRelayout = useCallback((axis: Axis) => {