docs(BarChart): truncated label tooltip sample added

packages/viz/src/BarChart/stories/BarChart.stories.tsx

@@ -15,6 +15,8 @@ import {
 } from "@hitachivantara/uikit-react-viz";
 
 import { vizDecorator } from "../../BaseChart/stories/utils";
+import { CustomEchartsOptions as CustomEchartsOptionsStory } from "./CustomEchartsOptions";
+import CustomEchartsOptionsRaw from "./CustomEchartsOptions?raw";
 import { renderTooltip } from "./customTooltip";
 import { customChartData } from "./mockData";
 
@@ -484,30 +486,10 @@ export const CustomEchartsOptions: StoryObj<HvBarChartProps> = {
     docs: {
       description: {
         story:
-          "If necessary, you can customize the chart's option and take advantage of the additional properties offered by ECharts.",
+          "If necessary, you can customize the chart's option and take advantage of the additional properties offered by ECharts. In this sample, the Y axis labels are truncated when they are too long and a tooltip is shown when hovered.",
       },
+      source: { code: CustomEchartsOptionsRaw },
     },
   },
-  render: () => {
-    return (
-      <HvBarChart
-        data={{
-          Month: ["January", "February", "March"],
-          "Sales Target": [2000, 1000, 6000],
-        }}
-        groupBy="Month"
-        measures="Sales Target"
-        tooltip={{
-          type: "single",
-        }}
-        onOptionChange={(option) => {
-          if (Array.isArray(option.yAxis) && option.yAxis.length === 1) {
-            option.yAxis = [{ ...option.yAxis[0], splitNumber: 3 }];
-          }
-
-          return option;
-        }}
-      />
-    );
-  },
+  render: () => <CustomEchartsOptionsStory />,
 };

packages/viz/src/BarChart/stories/CustomEchartsOptions.tsx

@@ -0,0 +1,104 @@
+import { css, keyframes } from "@emotion/css";
+import { theme } from "@hitachivantara/uikit-react-core";
+import { HvBarChart, HvBarChartProps } from "@hitachivantara/uikit-react-viz";
+
+const appear = keyframes`
+  0% { 
+    opacity: 0;
+  }
+  100% { 
+    opacity: 1;
+  } 
+`;
+
+const styles = {
+  root: css({
+    position: "absolute",
+    width: "fit-content",
+    boxShadow: theme.colors.shadow,
+    backgroundColor: theme.colors.atmo1,
+    padding: theme.space.sm,
+    display: "flex",
+    fontFamily: theme.fontFamily.body,
+    fontWeight: theme.fontWeights.normal,
+    fontSize: theme.fontSizes.sm,
+    color: theme.colors.secondary,
+    animation: `${appear} .2s ease-in-out`,
+  }),
+};
+
+const tooltipId = "viz-truncated-tooltip";
+
+const events: HvBarChartProps["onEvents"] = {
+  mouseover: (params, instance) => {
+    if (params.componentType !== "yAxis") return;
+    if (params.targetType !== "axisLabel") return;
+
+    const fullValue = params.value;
+    const targetValue = params.event?.target;
+    const displayValue = targetValue?.style?.text;
+
+    if (fullValue === displayValue) return;
+
+    // Create tooltip
+    const tooltip = document.createElement("div");
+    tooltip.setAttribute("id", tooltipId);
+    tooltip.className = `${styles.root} ${css({
+      left: `${targetValue?.transform[4]}px`,
+      top: `${targetValue?.transform[5]}px`,
+    })}`;
+    tooltip.innerText = fullValue;
+
+    // Add tooltip
+    instance?.getDom().appendChild(tooltip);
+  },
+  mouseout: (params) => {
+    if (params.componentType !== "yAxis") return;
+    if (params.targetType !== "axisLabel") return;
+
+    // Remove tooltip
+    document.getElementById(tooltipId)?.remove();
+  },
+};
+
+export const CustomEchartsOptions = () => {
+  const formatter = (value?: string | number) => `${Number(value) / 1000}k`;
+
+  return (
+    <HvBarChart
+      data={{
+        Group: [
+          "Group 1 with a very very long label",
+          "Group 2",
+          "Group 3 with a very very long label",
+        ],
+        Sales: [2300, 1000, 7800],
+        Target: [2100, 7700, 3000],
+      }}
+      groupBy="Group"
+      measures={["Sales", "Target"]}
+      xAxis={{
+        labelFormatter: formatter,
+      }}
+      tooltip={{
+        valueFormatter: formatter,
+      }}
+      horizontal
+      stack="total"
+      onOptionChange={(option) => {
+        // Truncate axis label
+        option.yAxis[0] = {
+          ...option.yAxis[0],
+          triggerEvent: true,
+          axisLabel: {
+            ...option.yAxis[0].axisLabel,
+            overflow: "truncate",
+            width: 80,
+          },
+        };
+        return option;
+      }}
+      onEvents={events}
+    />
+  );
+};