Fixing text color of bar labels in bar chart, which are displayed out…

…side of a bar. (#20948)

* 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

@@ -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"]

graylog2-web-interface/src/views/components/visualizations/GenericPlot.tsx

@@ -174,17 +174,15 @@ 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);
 
   return useMemo(() => chartData.map((chart) => {
     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) => {