fix: Persist value label colors when downloading images

Author: bprusinowski

CHANGELOG.md

@@ -27,6 +27,7 @@ You can also check the
   - Interactive 100% mode switch doesn't overlap with Y axis label anymore
   - Chart preview using hash parameters now correctly deals with spacial
     characters
+  - Value labels are not gray anymore when downloading an image
 
 # [5.7.0] - 2025-04-16
 

app/charts/bar/rendering-utils.ts

@@ -1,6 +1,6 @@
 import { select, Selection } from "d3-selection";
 
-import { setSegmentValueLabelStyles } from "@/charts/shared/render-value-labels";
+import { setSegmentValueLabelProps } from "@/charts/shared/render-value-labels";
 import {
   maybeTransition,
   RenderOptions,
@@ -71,7 +71,7 @@ export const renderBars = (
               .style("width", "100%")
               .style("height", "100%")
               .append("xhtml:p")
-              .call(setSegmentValueLabelStyles)
+              .call(setSegmentValueLabelProps)
               .style("padding-left", "2px")
               .style("padding-right", "2px")
               .style("color", function (d) {

app/charts/column/rendering-utils.ts

@@ -1,6 +1,6 @@
 import { select, Selection } from "d3-selection";
 
-import { setSegmentValueLabelStyles } from "@/charts/shared/render-value-labels";
+import { setSegmentValueLabelProps } from "@/charts/shared/render-value-labels";
 import {
   maybeTransition,
   RenderOptions,
@@ -62,7 +62,7 @@ export const renderColumns = (
                 })
               )
               .append("xhtml:p")
-              .call(setSegmentValueLabelStyles)
+              .call(setSegmentValueLabelProps)
               .style("padding-top", "4px")
               .style("padding-left", "2px")
               .style("padding-right", "2px")

app/charts/shared/render-value-labels.ts

@@ -4,6 +4,7 @@ import {
   maybeTransition,
   RenderOptions,
 } from "@/charts/shared/rendering-utils";
+import { DISABLE_SCREENSHOT_COLOR_WIPE_KEY } from "@/components/chart-shared";
 
 export type RenderTotalValueLabelDatum = {
   key: string;
@@ -116,12 +117,13 @@ const getValueLabelTextAnchor = (rotate: boolean) => {
   return rotate ? "start" : "middle";
 };
 
-export const setSegmentValueLabelStyles = <
+export const setSegmentValueLabelProps = <
   T extends { valueLabel?: string; valueLabelColor?: string },
 >(
   g: Selection<BaseType, T, SVGGElement, null>
 ) => {
   return g
+    .attr(DISABLE_SCREENSHOT_COLOR_WIPE_KEY, true)
     .style("overflow", "hidden")
     .style("width", "100%")
     .style("margin", 0)

app/components/chart-shared.tsx

@@ -504,7 +504,8 @@ const useModifyNode = (configKey?: string) => {
   );
 };
 
-const DISABLE_SCREENSHOT_COLOR_WIPE_KEY = "data-disable-screenshot-color";
+export const DISABLE_SCREENSHOT_COLOR_WIPE_KEY =
+  "data-disable-screenshot-color";
 export const DISABLE_SCREENSHOT_COLOR_WIPE_ATTR = {
   [DISABLE_SCREENSHOT_COLOR_WIPE_KEY]: true,
 };