@fluentui/react-charting 5.25.4 → 5.25.6

package/lib/types/IDataPoint.d.ts

@@ -195,6 +195,11 @@ export interface IVerticalBarChartDataPoint {
      * Accessibility data for callout
      */
     callOutAccessibilityData?: IAccessibilityProps;
+    /**
+     * Label to display on the bar
+     * This is an optional prop that can be used to show custom text on bars
+     */
+    barLabel?: string;
 }
 /**
  * {@docCategory IChartData}
@@ -233,6 +238,10 @@ export interface IHorizontalBarChartWithAxisDataPoint {
      * This is an optional prop, If haven't given data will take
      */
     yAxisCalloutData?: string;
+    /**
+     * Label to display on the bar
+     */
+    barLabel?: string;
     /**
      * onClick action for each datapoint in the chart
      */
@@ -500,6 +509,7 @@ interface ISLinkExtra {
      */
     value: number;
     unnormalizedValue?: number;
+    color?: string;
 }
 export type SNode = SankeyNode<ISNodeExtra, ISLinkExtra>;
 export type SLink = SankeyLink<ISNodeExtra, ISLinkExtra>;
@@ -555,6 +565,11 @@ export interface IVSChartDataPoint {
      * Accessibility data for callout
      */
     callOutAccessibilityData?: IAccessibilityProps;
+    /**
+     * Label to display on the bar
+     * This is an optional prop that can be used to show custom text on bars
+     */
+    barLabel?: string;
 }
 /**
  * {@docCategory IChartProps}
@@ -652,6 +667,10 @@ export interface IGVBarChartSeriesPoint {
      * Accessibility data for callout
      */
     callOutAccessibilityData?: IAccessibilityProps;
+    /**
+     * Label to display on the bar
+     */
+    barLabel?: string;
     /**
      * Whether to use the secondary y scale or not
      * False by default.
@@ -1064,4 +1083,92 @@ export interface ILineSeries<X extends string | number | Date, Y extends string
      */
     onLineClick?: () => void;
 }
+/**
+ * Represents a single data point in a polar series.
+ */
+export interface IPolarDataPoint {
+    /**
+     * Radial value of the data point.
+     */
+    r: string | number | Date;
+    /**
+     * Angular value of the data point, specified as a category or in degrees.
+     */
+    theta: string | number;
+    /**
+     * Optional click handler for the data point.
+     */
+    onClick?: () => void;
+    /**
+     * Custom text to show in the callout in place of the radial axis value.
+     */
+    radialAxisCalloutData?: string;
+    /**
+     * Custom text to show in the callout in place of the angular axis value.
+     */
+    angularAxisCalloutData?: string;
+    /**
+     * Accessibility properties for the data point.
+     */
+    callOutAccessibilityData?: IAccessibilityProps;
+    /**
+     * Custom marker size for the data point.
+     */
+    markerSize?: number;
+    /**
+     * Optional text to annotate or label the data point.
+     */
+    text?: string;
+    /**
+     * Color of the data point. If not provided, it will inherit the series color.
+     */
+    color?: string;
+}
+/**
+ * Represents a scatterpolar series.
+ */
+export interface IScatterPolarSeries extends IDataSeries {
+    /**
+     * Type discriminator: always 'scatterpolar' for this series.
+     */
+    type: 'scatterpolar';
+    /**
+     * Array of data points for the series.
+     */
+    data: IPolarDataPoint[];
+}
+/**
+ * Represents a linepolar series.
+ */
+export interface ILinePolarSeries extends IDataSeries {
+    /**
+     * Type discriminator: always 'linepolar' for this series.
+     */
+    type: 'linepolar';
+    /**
+     * Array of data points for the series.
+     */
+    data: IPolarDataPoint[];
+    /**
+     * Additional line rendering options (e.g., stroke width, curve type).
+     */
+    lineOptions?: ILineChartLineOptions;
+}
+/**
+ * Represents a areapolar series.
+ */
+export interface IAreaPolarSeries extends IDataSeries {
+    /**
+     * Type discriminator: always 'areapolar' for this series.
+     */
+    type: 'areapolar';
+    /**
+     * Array of data points for the series.
+     */
+    data: IPolarDataPoint[];
+    /**
+     * Additional line rendering options (e.g., stroke width, curve type).
+     */
+    lineOptions?: ILineChartLineOptions;
+}
 export {};

package/lib/types/IDataPoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"IDataPoint.js","sourceRoot":"../src/","sources":["types/IDataPoint.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { SankeyLink, SankeyNode } from 'd3-sankey';\nimport { LegendShape } from '../components/Legends/Legends.types';\nimport { CurveFactory } from 'd3-shape';\n\nexport interface IBasestate {\n  _width?: number;\n  _height?: number;\n  activeLegend?: string;\n  color?: string;\n  dataForHoverCard?: number | string;\n  isCalloutVisible: boolean;\n  isLegendSelected?: boolean;\n  isLegendHovered?: boolean;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  refSelected?: any;\n  YValueHover?: { legend?: string; y?: number | string; color?: string }[];\n  hoverYValue?: string | number | null;\n  hoverXValue?: string | number | null;\n  xCalloutValue?: string;\n  yCalloutValue?: string;\n  lineColor?: string;\n  hoveredLineColor?: string;\n  selectedLegend?: string;\n  containerWidth?: number;\n  containerHeight?: number;\n}\n\nexport interface IRefArrayData {\n  index?: string;\n  refElement?: SVGGElement;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IMargins {\n  /**\n   * left margin for the chart.\n   */\n  left?: number;\n  /**\n   * Right margin for the chart.\n   */\n  right?: number;\n  /**\n   * Top margin for the chart.\n   */\n  top?: number;\n  /**\n   * Bottom margin for the chart.\n   */\n  bottom?: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number | string;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  // NOTE: VerticalStackedBarChart, PieChart\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IVerticalStackedBarDataPoint extends Omit<IDataPoint, 'x'> {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   * If data type on x is Date, then the data is spaced evenly by d3-scale.\n   */\n  x: number | string | Date;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHorizontalDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IChartDataPoint {\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * data the datapoint in the chart\n   */\n  data?: number;\n\n  /**\n   * data the datapoint in the chart\n   */\n  horizontalBarChartdata?: IHorizontalDataPoint;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Color for the legend in the chart. If not provided, it will fallback on the default color palette.\n   */\n  color?: string;\n\n  /**\n   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n   * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n   */\n  gradient?: [string, string];\n\n  /**\n   * placeholder data point\n   */\n  placeHolder?: boolean;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IVerticalBarChartDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number | string | Date;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n   * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n   */\n  gradient?: [string, string];\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * data to render the line along with bars\n   */\n  lineData?: ILineDataInVerticalBarChart;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHorizontalBarChartWithAxisDataPoint {\n  /**\n   * Dependent value of the data point, rendered along the x-axis.\n   */\n  x: number;\n\n  /**\n   * Independent value of the data point, rendered along the y-axis.\n   * If y is a number, then each y-coordinate is plotted at its y-coordinate.\n   * If y is a string, then the data is evenly spaced along the y-axis.\n   */\n  y: number | string;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n   * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n   */\n  gradient?: [string, string];\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineDataInVerticalBarChart {\n  y: IVerticalBarChartDataPoint['y'];\n  yAxisCalloutData?: string | undefined;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IBaseDataPoint {\n  /**\n   * Defines the function that is executed on clicking  line\n   */\n  onDataPointClick?: () => void;\n\n  /**\n   * Callout data for x axis\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   */\n  yAxisCalloutData?: string | { [id: string]: number };\n\n  /**\n   * Whether to hide callout data for the point.\n   */\n  hideCallout?: boolean;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * X axis Accessibility data for callout\n   */\n  xAxisCalloutAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * Marker size of the points\n   */\n  markerSize?: number;\n\n  /**\n   * text labels of marker points\n   */\n  text?: string;\n\n  /**\n   * Per-point marker color (overrides series color when present)\n   */\n  markerColor?: string;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineChartDataPoint extends IBaseDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If data type on x is Date, then the data is spaced evenly by d3-scale\n   */\n  x: number | Date;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineChartGap {\n  /**\n   * Starting index of the gap.\n   */\n  startIndex: number;\n\n  /**\n   * Ending index of the gap.\n   */\n  endIndex: number;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface ILineChartLineOptions extends React.SVGProps<SVGPathElement> {\n  /**\n   * Width of the line/stroke.\n   * Overrides the strokeWidth set on ICartesianChartProps level.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width\n   */\n  strokeWidth?: number | string;\n\n  /**\n   * Pattern of dashes and gaps.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\n   */\n  strokeDasharray?: string | number;\n\n  /**\n   * Offset on rendering of stroke dash array.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset\n   */\n  strokeDashoffset?: string | number;\n\n  /**\n   * Shape at the end of a subpath.\n   * Default round.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap\n   */\n  strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';\n\n  /**\n   * Width of border around the line. Default no border.\n   */\n  lineBorderWidth?: string | number;\n\n  /**\n   * Color of border around the line. Default white.\n   */\n  lineBorderColor?: string;\n\n  /**\n   * Defines the type of interpolation used to render the line.\n   * @default 'linear'\n   */\n  curve?: 'linear' | 'natural' | 'step' | 'stepAfter' | 'stepBefore' | CurveFactory;\n\n  /**\n   * Defines the mode of points to be rendered.\n   */\n  mode?:\n    | 'lines'\n    | 'markers'\n    | 'text'\n    | 'lines+markers'\n    | 'text+markers'\n    | 'text+lines'\n    | 'text+lines+markers'\n    | 'none'\n    | 'gauge'\n    | 'number'\n    | 'delta'\n    | 'number+delta'\n    | 'gauge+number'\n    | 'gauge+number+delta'\n    | 'gauge+delta'\n    | 'markers+text'\n    | 'lines+text'\n    | 'lines+markers+text';\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineChartPoints {\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend: string;\n\n  /**\n   * The shape for the legend\n   * default: show the rect legend\n   */\n  legendShape?: LegendShape;\n\n  /**\n   * dataPoints for the line chart\n   */\n  data: ILineChartDataPoint[];\n\n  /**\n   * gaps in the line chart where a line is not drawn\n   */\n  gaps?: ILineChartGap[];\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * opacity for chart fill color\n   */\n  opacity?: number;\n\n  /**\n   * options for the line drawn\n   */\n  lineOptions?: ILineChartLineOptions;\n\n  /**\n   * hide dots for points that are not active\n   */\n  hideNonActiveDots?: boolean;\n\n  /**\n   * Defines the function that is executed on clicking this legend\n   */\n  onLegendClick?: (selectedLegend: string | null | string[]) => void;\n\n  /**\n   * Defines the function that is executed on clicking  line\n   */\n  onLineClick?: () => void;\n\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IChartProps {\n  /**\n   * chart title for the chart\n   */\n  chartTitle?: string;\n\n  /**\n   * Accessibility data for chart title\n   */\n  chartTitleAccessibilityData?: IAccessibilityProps;\n  /**\n   * data for the points in the chart\n   */\n  chartData?: IChartDataPoint[];\n\n  /**\n   * Accessibility data for chart data\n   */\n  chartDataAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * data for the points in the line chart\n   */\n  lineChartData?: ILineChartPoints[];\n\n  /**\n   * data for the points in the scatter chart\n   */\n  scatterChartData?: IScatterChartPoints[];\n\n  /**\n   * data for the points in the line chart\n   */\n  SankeyChartData?: ISankeyChartData;\n\n  /**\n   * data for the points in the line chart\n   */\n  pointOptions?: React.SVGProps<SVGCircleElement>;\n\n  /**\n   * data for the dotted line on hovering the point\n   */\n  pointLineOptions?: React.SVGProps<SVGLineElement>;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ISankeyChartData {\n  nodes: SNode[];\n  links: SLink[];\n}\n\ninterface ISNodeExtra {\n  /**\n   * A unique identifier for this node.\n   */\n  nodeId: number | string;\n  /**\n   * The display name for this node in the UX.\n   */\n  name: string;\n  color?: string;\n  borderColor?: string;\n  actualValue?: number;\n  layer?: number;\n}\n\ninterface ISLinkExtra {\n  /**\n   * The index within `ISankeyChartData.nodes` of the source node.\n   */\n  source: number;\n  /**\n   * The index within `ISankeyChartData.nodes` of the target node.\n   */\n  target: number;\n  /**\n   * The weight of this link between the two nodes.\n   */\n  value: number;\n  unnormalizedValue?: number;\n}\n\nexport type SNode = SankeyNode<ISNodeExtra, ISLinkExtra>;\nexport type SLink = SankeyLink<ISNodeExtra, ISLinkExtra>;\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IAccessibilityProps {\n  /**\n   * Accessibility aria-label\n   */\n  ariaLabel?: string;\n\n  /**\n   * Accessibility aria-labelledBy\n   */\n  ariaLabelledBy?: string;\n\n  /**\n   * Accessibility aria-describedBy\n   */\n  ariaDescribedBy?: string;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IVSChartDataPoint {\n  /**\n   * data the datapoint in the chart\n   */\n  data: number | string;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n   * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n   */\n  gradient?: [string, string];\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IVerticalStackedChartProps {\n  /**\n   * data for the points in the chart\n   */\n  chartData: IVSChartDataPoint[];\n\n  /**\n   * Data for x axis label for multistacked Vertical bar chart\n   */\n  xAxisPoint: number | string | Date;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven't given, legend will take\n   */\n  xAxisCalloutData?: string;\n  /**\n   * line data to render lines on stacked bar chart\n   */\n  lineData?: ILineDataInVerticalStackedBarChart[];\n  /**\n   * Accessibility data for Whole stack callout\n   */\n  stackCallOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineDataInVerticalStackedBarChart {\n  y: number | string;\n  color: string;\n  legend: string;\n  /**\n   * The shape for the legend\n   * default: show the rect legend\n   */\n  legendShape?: LegendShape;\n  /**\n   * Data to show in callout\n   */\n  data?: number | string;\n  yAxisCalloutData?: string;\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n  /**\n   * options for the line drawn\n   */\n  lineOptions?: ILineChartLineOptions;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IGVBarChartSeriesPoint {\n  /**\n   * Text for // need to check use of this\n   */\n  key: string;\n\n  /**\n   * Data for bar height of Grouped vertical bar chart\n   */\n  data: number;\n\n  /**\n   * Color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n   * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n   */\n  gradient?: [string, string];\n\n  /**\n   * Legend text in the chart\n   */\n  legend: string;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IGroupedVerticalBarChartData {\n  /**\n   * Data for X axis label\n   */\n  name: string;\n\n  /**\n   * Data points for Grouped vertical bar chart\n   */\n  series: IGVBarChartSeriesPoint[];\n\n  /**\n   * Accessibility data for Group Bars Stack Callout\n   */\n  stackCallOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport interface IGVDataPoint {\n  /**\n   * This interface used for - While forming datapoints from given prop \"data\" in code\n   * datapoints are used for to draw graph\n   */\n  [key: string]: number | string;\n}\n\nexport interface IGVSingleDataPoint {\n  /**\n   * While forming datapoints from given prop \"data\" in code.\n   * These datapoints are used for to draw graph easily.\n   */\n  [key: string]: IGVDataPoint;\n}\n\nexport interface IGVForBarChart {\n  /**\n   * While forming datapoints from given prop \"data\"\n   * These datapoints are used for to draw graph.\n   */\n  [key: string]: IGVBarChartSeriesPoint;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHeatMapChartDataPoint {\n  x: string | Date | number;\n  y: string | Date | number;\n  value: number;\n  /**\n   * The value/ text to be rendered in the rectange\n   */\n  rectText?: string | number;\n  /**\n   * denomination to show in the callout\n   */\n  ratio?: [number, number];\n  /**\n   * description message to the callout\n   */\n  descriptionMessage?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHeatMapChartData {\n  /**\n   * name of the legend\n   */\n  legend: string;\n  data: IHeatMapChartDataPoint[];\n  /**\n   * This  number will be used to get the color for the legend\n   */\n  value: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ICustomizedCalloutDataPoint {\n  legend: string;\n  y: number;\n  color: string;\n  xAxisCalloutData?: string;\n  yAxisCalloutData?: string | { [id: string]: number };\n}\n\n/**\n * Used for custom callout data interface. As Area chart callout data will be prepared from given props.data,\n * Those required data passing to onRenderCalloutPerDataPoint and onRenderCalloutPerStack.\n * {@docCategory IChartData}\n */\nexport interface ICustomizedCalloutData {\n  x: number | string | Date;\n  values: ICustomizedCalloutDataPoint[];\n}\n\n/**\n * {@docCategory Chart}\n */\nexport interface IChart {\n  chartContainer: HTMLElement | null;\n  toImage?: (opts?: IImageExportOptions) => Promise<string>;\n}\n\n/**\n * {@docCategory Chart}\n */\nexport interface IImageExportOptions {\n  width?: number;\n  height?: number;\n  scale?: number;\n  background?: string;\n}\n\n/**\n * {@docCategory IChartData}\n * ScatterChartDataPoint interface.\n */\nexport interface IScatterChartDataPoint extends IBaseDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   */\n  x: number | Date | string;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IScatterChartPoints {\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend: string;\n\n  /**\n   * The shape for the legend\n   * default: show the rect legend\n   */\n  legendShape?: LegendShape;\n\n  /**\n   * dataPoints for the line chart\n   */\n  data: IScatterChartDataPoint[];\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * opacity for chart fill color\n   */\n  opacity?: number;\n\n  /**\n   * hide dots for points that are not active\n   */\n  hideNonActiveDots?: boolean;\n\n  /**\n   * Defines the function that is executed on clicking this legend\n   */\n  onLegendClick?: (selectedLegend: string | null | string[]) => void;\n\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n}\n\n/**\n * Specifies the ordering options for axis categories in Cartesian charts.\n *\n * - `'default'`: Uses the original order before custom ordering was supported.\n *   In some charts, this behaves the same as `'data'`.\n * - `'data'`: Preserves the order of categories as provided in the input data.\n * - `string[]`: Explicitly defines the custom order of categories as an array of category names.\n * - `'category ascending' | 'category descending'`: Orders categories alphanumerically.\n * - `'total ascending' | 'total descending'`: Orders categories by the total of their associated values.\n * - `'min ascending' | 'min descending'`: Orders by the minimum value within each category.\n * - `'max ascending' | 'max descending'`: Orders by the maximum value within each category.\n * - `'sum ascending' | 'sum descending'`: Orders by the sum of values for each category (same as 'total').\n * - `'mean ascending' | 'mean descending'`: Orders by the average of values in each category.\n * - `'median ascending' | 'median descending'`: Orders by the median value of each category.\n *\n * {@docCategory CartesianChart}\n */\nexport type AxisCategoryOrder =\n  | 'default'\n  | 'data'\n  | string[]\n  | 'category ascending'\n  | 'category descending'\n  | 'total ascending'\n  | 'total descending'\n  | 'min ascending'\n  | 'min descending'\n  | 'max ascending'\n  | 'max descending'\n  | 'sum ascending'\n  | 'sum descending'\n  | 'mean ascending'\n  | 'mean descending'\n  | 'median ascending'\n  | 'median descending';\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IGanttChartDataPoint {\n  /**\n   * Dependent value of the data point, rendered along the x-axis.\n   * `start` and `end` represent the beginning and end of the data point.\n   */\n  x: {\n    start: Date | number;\n    end: Date | number;\n  };\n\n  /**\n   * Independent value of the data point, rendered along the y-axis.\n   * If y is a number, then each y-coordinate is plotted at its y-coordinate.\n   * If y is a string, then the data is evenly spaced along the y-axis.\n   */\n  y: number | string;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n   * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n   */\n  gradient?: [string, string];\n\n  /**\n   * Optional label shown in place of `x` in the callout.\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Optional label shown in place of `y` in the callout.\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * Available scale types for axes.\n *\n * - `'default'`: Uses an automatic scale (linear, band, or time) based on axis data type.\n * - `'log'`: Uses a logarithmic scale. Only supported for numeric axes in LineChart and ScatterChart.\n *\n * {@docCategory CartesianChart}\n */\nexport type AxisScaleType = 'default' | 'log';\n\n/**\n * Configuration options for an axis.\n *\n * {@docCategory CartesianChart}\n */\nexport type AxisProps = {\n  /**\n   * Defines the step between tick marks on the axis.\n   * Works in combination with `tick0`.\n   * Must be a positive number.\n   *\n   * - **Log scale**:\n   *   - Ticks are placed at `10^(n * tickStep)` where `n` is the tick index.\n   *     - Example: `tickStep = 2` → ticks at 1, 100, 10,000...\n   *     - Example: `tickStep = log10(5)` → ticks at 1, 5, 25, 125...\n   *   - Special format `\"L<f>\"`: Creates ticks that are linearly spaced in value (not position).\n   *     - Example: `tick0 = 0.1`, `tickStep = \"L0.5\"` → ticks at 0.1, 0.6, 1.1, 1.6...\n   *\n   * - **Date axis**:\n   *   - Must be in milliseconds.\n   *     - Example: one day = `tickStep = 86400000`.\n   *   - Special format `\"M<n>\"`: Places ticks every `n` months.\n   *     - Example: `tick0 = \"2000-01-15\"`, `tickStep = \"M3\"` → ticks on the 15th every third month.\n   *     - Example: `tickStep = \"M48\"` → ticks every 4 years.\n   */\n  tickStep?: number | string;\n\n  /**\n   * Sets the reference value for axis ticks.\n   * Works in combination with `tickStep`.\n   *\n   * - **Log scale**:\n   *   - `tick0` must be given as the logarithm of the reference tick.\n   *     - Example: to align ticks with 100, use `tick0 = 2`.\n   *   - Exception: when `tickStep` uses `\"L<f>\"`, you can specify the raw value directly.\n   */\n  tick0?: number | Date;\n\n  /**\n   * Sets the text displayed at each tick position specified by `tickValues`. Used with `tickValues`.\n   */\n  tickText?: string[];\n};\n\n/**\n * Represents a single data point in a series.\n */\nexport interface IDataPointV2<X extends string | number | Date, Y extends string | number | Date> {\n  /**\n   * X-axis value of the data point.\n   */\n  x: X;\n\n  /**\n   * Y-axis value of the data point.\n   */\n  y: Y;\n\n  /**\n   * Optional click handler for the data point.\n   */\n  onClick?: () => void;\n\n  /**\n   * Custom text to show in the callout in place of the x-axis value.\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Custom text to show in the callout in place of the y-axis value.\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * Accessibility properties for the data point.\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * Custom marker size for the data point.\n   */\n  markerSize?: number;\n\n  /**\n   * Optional text to annotate or label the data point.\n   */\n  text?: string;\n\n  /**\n   * Color of the data point. If not provided, it will inherit the series color.\n   */\n  color?: string;\n}\n\n/**\n * Base interface for a series.\n */\nexport interface IDataSeries {\n  /**\n   * Name of the series to be displayed in the legend.\n   */\n  legend: string;\n\n  /**\n   * Shape used in the legend (e.g., circle, square).\n   */\n  legendShape?: LegendShape;\n\n  /**\n   * Color of the series.\n   */\n  color?: string;\n\n  /**\n   * Opacity of the series.\n   */\n  opacity?: number;\n\n  /**\n   * Gradient fill for the series (start and end colors).\n   */\n  gradient?: [string, string];\n\n  /**\n   * Whether this series should be plotted against a secondary Y-axis.\n   */\n  useSecondaryYScale?: boolean;\n\n  /**\n   * Callback invoked when the legend item is clicked.\n   */\n  onLegendClick?: (selectedLegend: string | null | string[]) => void;\n}\n\n/**\n * Represents a bar series.\n */\nexport interface IBarSeries<X extends string | number | Date, Y extends string | number | Date> extends IDataSeries {\n  /**\n   * Type discriminator: always 'bar' for this series.\n   */\n  type: 'bar';\n\n  /**\n   * Array of data points for the series.\n   */\n  data: IDataPointV2<X, Y>[];\n\n  /**\n   * Optional group identifier for the series.\n   */\n  key?: string;\n}\n\n/**\n * Represents a line series.\n */\nexport interface ILineSeries<X extends string | number | Date, Y extends string | number | Date> extends IDataSeries {\n  /**\n   * Type discriminator: always 'line' for this series.\n   */\n  type: 'line';\n\n  /**\n   * Array of data points for the series.\n   */\n  data: IDataPointV2<X, Y>[];\n\n  /**\n   * Optional gaps to render in the line.\n   */\n  gaps?: ILineChartGap[];\n\n  /**\n   * Additional line rendering options (e.g., stroke width, curve type).\n   */\n  lineOptions?: ILineChartLineOptions;\n\n  /**\n   * If true, hides dots for inactive (unfocused/unhovered) data points.\n   */\n  hideInactiveDots?: boolean;\n\n  /**\n   * Callback invoked when the line itself is clicked.\n   */\n  onLineClick?: () => void;\n}\n"]}
+{"version":3,"file":"IDataPoint.js","sourceRoot":"../src/","sources":["types/IDataPoint.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { SankeyLink, SankeyNode } from 'd3-sankey';\nimport { LegendShape } from '../components/Legends/Legends.types';\nimport { CurveFactory } from 'd3-shape';\n\nexport interface IBasestate {\n  _width?: number;\n  _height?: number;\n  activeLegend?: string;\n  color?: string;\n  dataForHoverCard?: number | string;\n  isCalloutVisible: boolean;\n  isLegendSelected?: boolean;\n  isLegendHovered?: boolean;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  refSelected?: any;\n  YValueHover?: { legend?: string; y?: number | string; color?: string }[];\n  hoverYValue?: string | number | null;\n  hoverXValue?: string | number | null;\n  xCalloutValue?: string;\n  yCalloutValue?: string;\n  lineColor?: string;\n  hoveredLineColor?: string;\n  selectedLegend?: string;\n  containerWidth?: number;\n  containerHeight?: number;\n}\n\nexport interface IRefArrayData {\n  index?: string;\n  refElement?: SVGGElement;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IMargins {\n  /**\n   * left margin for the chart.\n   */\n  left?: number;\n  /**\n   * Right margin for the chart.\n   */\n  right?: number;\n  /**\n   * Top margin for the chart.\n   */\n  top?: number;\n  /**\n   * Bottom margin for the chart.\n   */\n  bottom?: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number | string;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  // NOTE: VerticalStackedBarChart, PieChart\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IVerticalStackedBarDataPoint extends Omit<IDataPoint, 'x'> {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   * If data type on x is Date, then the data is spaced evenly by d3-scale.\n   */\n  x: number | string | Date;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHorizontalDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IChartDataPoint {\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * data the datapoint in the chart\n   */\n  data?: number;\n\n  /**\n   * data the datapoint in the chart\n   */\n  horizontalBarChartdata?: IHorizontalDataPoint;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Color for the legend in the chart. If not provided, it will fallback on the default color palette.\n   */\n  color?: string;\n\n  /**\n   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n   * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n   */\n  gradient?: [string, string];\n\n  /**\n   * placeholder data point\n   */\n  placeHolder?: boolean;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IVerticalBarChartDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If x is a string, then the data is evenly spaced along the x-axis.\n   */\n  x: number | string | Date;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n   * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n   */\n  gradient?: [string, string];\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * data to render the line along with bars\n   */\n  lineData?: ILineDataInVerticalBarChart;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * Label to display on the bar\n   * This is an optional prop that can be used to show custom text on bars\n   */\n  barLabel?: string;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHorizontalBarChartWithAxisDataPoint {\n  /**\n   * Dependent value of the data point, rendered along the x-axis.\n   */\n  x: number;\n\n  /**\n   * Independent value of the data point, rendered along the y-axis.\n   * If y is a number, then each y-coordinate is plotted at its y-coordinate.\n   * If y is a string, then the data is evenly spaced along the y-axis.\n   */\n  y: number | string;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n   * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n   */\n  gradient?: [string, string];\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * Label to display on the bar\n   */\n  barLabel?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineDataInVerticalBarChart {\n  y: IVerticalBarChartDataPoint['y'];\n  yAxisCalloutData?: string | undefined;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IBaseDataPoint {\n  /**\n   * Defines the function that is executed on clicking  line\n   */\n  onDataPointClick?: () => void;\n\n  /**\n   * Callout data for x axis\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   */\n  yAxisCalloutData?: string | { [id: string]: number };\n\n  /**\n   * Whether to hide callout data for the point.\n   */\n  hideCallout?: boolean;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * X axis Accessibility data for callout\n   */\n  xAxisCalloutAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * Marker size of the points\n   */\n  markerSize?: number;\n\n  /**\n   * text labels of marker points\n   */\n  text?: string;\n\n  /**\n   * Per-point marker color (overrides series color when present)\n   */\n  markerColor?: string;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineChartDataPoint extends IBaseDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   * If x is a number, then each y-coordinate is plotted at its x-coordinate.\n   * If data type on x is Date, then the data is spaced evenly by d3-scale\n   */\n  x: number | Date;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineChartGap {\n  /**\n   * Starting index of the gap.\n   */\n  startIndex: number;\n\n  /**\n   * Ending index of the gap.\n   */\n  endIndex: number;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface ILineChartLineOptions extends React.SVGProps<SVGPathElement> {\n  /**\n   * Width of the line/stroke.\n   * Overrides the strokeWidth set on ICartesianChartProps level.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width\n   */\n  strokeWidth?: number | string;\n\n  /**\n   * Pattern of dashes and gaps.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray\n   */\n  strokeDasharray?: string | number;\n\n  /**\n   * Offset on rendering of stroke dash array.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset\n   */\n  strokeDashoffset?: string | number;\n\n  /**\n   * Shape at the end of a subpath.\n   * Default round.\n   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap\n   */\n  strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';\n\n  /**\n   * Width of border around the line. Default no border.\n   */\n  lineBorderWidth?: string | number;\n\n  /**\n   * Color of border around the line. Default white.\n   */\n  lineBorderColor?: string;\n\n  /**\n   * Defines the type of interpolation used to render the line.\n   * @default 'linear'\n   */\n  curve?: 'linear' | 'natural' | 'step' | 'stepAfter' | 'stepBefore' | CurveFactory;\n\n  /**\n   * Defines the mode of points to be rendered.\n   */\n  mode?:\n    | 'lines'\n    | 'markers'\n    | 'text'\n    | 'lines+markers'\n    | 'text+markers'\n    | 'text+lines'\n    | 'text+lines+markers'\n    | 'none'\n    | 'gauge'\n    | 'number'\n    | 'delta'\n    | 'number+delta'\n    | 'gauge+number'\n    | 'gauge+number+delta'\n    | 'gauge+delta'\n    | 'markers+text'\n    | 'lines+text'\n    | 'lines+markers+text';\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineChartPoints {\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend: string;\n\n  /**\n   * The shape for the legend\n   * default: show the rect legend\n   */\n  legendShape?: LegendShape;\n\n  /**\n   * dataPoints for the line chart\n   */\n  data: ILineChartDataPoint[];\n\n  /**\n   * gaps in the line chart where a line is not drawn\n   */\n  gaps?: ILineChartGap[];\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * opacity for chart fill color\n   */\n  opacity?: number;\n\n  /**\n   * options for the line drawn\n   */\n  lineOptions?: ILineChartLineOptions;\n\n  /**\n   * hide dots for points that are not active\n   */\n  hideNonActiveDots?: boolean;\n\n  /**\n   * Defines the function that is executed on clicking this legend\n   */\n  onLegendClick?: (selectedLegend: string | null | string[]) => void;\n\n  /**\n   * Defines the function that is executed on clicking  line\n   */\n  onLineClick?: () => void;\n\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IChartProps {\n  /**\n   * chart title for the chart\n   */\n  chartTitle?: string;\n\n  /**\n   * Accessibility data for chart title\n   */\n  chartTitleAccessibilityData?: IAccessibilityProps;\n  /**\n   * data for the points in the chart\n   */\n  chartData?: IChartDataPoint[];\n\n  /**\n   * Accessibility data for chart data\n   */\n  chartDataAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * data for the points in the line chart\n   */\n  lineChartData?: ILineChartPoints[];\n\n  /**\n   * data for the points in the scatter chart\n   */\n  scatterChartData?: IScatterChartPoints[];\n\n  /**\n   * data for the points in the line chart\n   */\n  SankeyChartData?: ISankeyChartData;\n\n  /**\n   * data for the points in the line chart\n   */\n  pointOptions?: React.SVGProps<SVGCircleElement>;\n\n  /**\n   * data for the dotted line on hovering the point\n   */\n  pointLineOptions?: React.SVGProps<SVGLineElement>;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ISankeyChartData {\n  nodes: SNode[];\n  links: SLink[];\n}\n\ninterface ISNodeExtra {\n  /**\n   * A unique identifier for this node.\n   */\n  nodeId: number | string;\n  /**\n   * The display name for this node in the UX.\n   */\n  name: string;\n  color?: string;\n  borderColor?: string;\n  actualValue?: number;\n  layer?: number;\n}\n\ninterface ISLinkExtra {\n  /**\n   * The index within `ISankeyChartData.nodes` of the source node.\n   */\n  source: number;\n  /**\n   * The index within `ISankeyChartData.nodes` of the target node.\n   */\n  target: number;\n  /**\n   * The weight of this link between the two nodes.\n   */\n  value: number;\n  unnormalizedValue?: number;\n  color?: string;\n}\n\nexport type SNode = SankeyNode<ISNodeExtra, ISLinkExtra>;\nexport type SLink = SankeyLink<ISNodeExtra, ISLinkExtra>;\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IAccessibilityProps {\n  /**\n   * Accessibility aria-label\n   */\n  ariaLabel?: string;\n\n  /**\n   * Accessibility aria-labelledBy\n   */\n  ariaLabelledBy?: string;\n\n  /**\n   * Accessibility aria-describedBy\n   */\n  ariaDescribedBy?: string;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IVSChartDataPoint {\n  /**\n   * data the datapoint in the chart\n   */\n  data: number | string;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n   * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n   */\n  gradient?: [string, string];\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * Label to display on the bar\n   * This is an optional prop that can be used to show custom text on bars\n   */\n  barLabel?: string;\n}\n\n/**\n * {@docCategory IChartProps}\n */\nexport interface IVerticalStackedChartProps {\n  /**\n   * data for the points in the chart\n   */\n  chartData: IVSChartDataPoint[];\n\n  /**\n   * Data for x axis label for multistacked Vertical bar chart\n   */\n  xAxisPoint: number | string | Date;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven't given, legend will take\n   */\n  xAxisCalloutData?: string;\n  /**\n   * line data to render lines on stacked bar chart\n   */\n  lineData?: ILineDataInVerticalStackedBarChart[];\n  /**\n   * Accessibility data for Whole stack callout\n   */\n  stackCallOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ILineDataInVerticalStackedBarChart {\n  y: number | string;\n  color: string;\n  legend: string;\n  /**\n   * The shape for the legend\n   * default: show the rect legend\n   */\n  legendShape?: LegendShape;\n  /**\n   * Data to show in callout\n   */\n  data?: number | string;\n  yAxisCalloutData?: string;\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n  /**\n   * options for the line drawn\n   */\n  lineOptions?: ILineChartLineOptions;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IGVBarChartSeriesPoint {\n  /**\n   * Text for // need to check use of this\n   */\n  key: string;\n\n  /**\n   * Data for bar height of Grouped vertical bar chart\n   */\n  data: number;\n\n  /**\n   * Color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n   * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n   */\n  gradient?: [string, string];\n\n  /**\n   * Legend text in the chart\n   */\n  legend: string;\n\n  /**\n   * Callout data for x axis\n   * This is an optional prop, If haven;t given legend will take\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Callout data for y axis\n   * This is an optional prop, If haven't given data will take\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * Label to display on the bar\n   */\n  barLabel?: string;\n\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IGroupedVerticalBarChartData {\n  /**\n   * Data for X axis label\n   */\n  name: string;\n\n  /**\n   * Data points for Grouped vertical bar chart\n   */\n  series: IGVBarChartSeriesPoint[];\n\n  /**\n   * Accessibility data for Group Bars Stack Callout\n   */\n  stackCallOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport interface IGVDataPoint {\n  /**\n   * This interface used for - While forming datapoints from given prop \"data\" in code\n   * datapoints are used for to draw graph\n   */\n  [key: string]: number | string;\n}\n\nexport interface IGVSingleDataPoint {\n  /**\n   * While forming datapoints from given prop \"data\" in code.\n   * These datapoints are used for to draw graph easily.\n   */\n  [key: string]: IGVDataPoint;\n}\n\nexport interface IGVForBarChart {\n  /**\n   * While forming datapoints from given prop \"data\"\n   * These datapoints are used for to draw graph.\n   */\n  [key: string]: IGVBarChartSeriesPoint;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHeatMapChartDataPoint {\n  x: string | Date | number;\n  y: string | Date | number;\n  value: number;\n  /**\n   * The value/ text to be rendered in the rectange\n   */\n  rectText?: string | number;\n  /**\n   * denomination to show in the callout\n   */\n  ratio?: [number, number];\n  /**\n   * description message to the callout\n   */\n  descriptionMessage?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IHeatMapChartData {\n  /**\n   * name of the legend\n   */\n  legend: string;\n  data: IHeatMapChartDataPoint[];\n  /**\n   * This  number will be used to get the color for the legend\n   */\n  value: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface ICustomizedCalloutDataPoint {\n  legend: string;\n  y: number;\n  color: string;\n  xAxisCalloutData?: string;\n  yAxisCalloutData?: string | { [id: string]: number };\n}\n\n/**\n * Used for custom callout data interface. As Area chart callout data will be prepared from given props.data,\n * Those required data passing to onRenderCalloutPerDataPoint and onRenderCalloutPerStack.\n * {@docCategory IChartData}\n */\nexport interface ICustomizedCalloutData {\n  x: number | string | Date;\n  values: ICustomizedCalloutDataPoint[];\n}\n\n/**\n * {@docCategory Chart}\n */\nexport interface IChart {\n  chartContainer: HTMLElement | null;\n  toImage?: (opts?: IImageExportOptions) => Promise<string>;\n}\n\n/**\n * {@docCategory Chart}\n */\nexport interface IImageExportOptions {\n  width?: number;\n  height?: number;\n  scale?: number;\n  background?: string;\n}\n\n/**\n * {@docCategory IChartData}\n * ScatterChartDataPoint interface.\n */\nexport interface IScatterChartDataPoint extends IBaseDataPoint {\n  /**\n   * Independent value of the data point, rendered along the x-axis.\n   */\n  x: number | Date | string;\n\n  /**\n   * Dependent value of the data point, rendered along the y-axis.\n   */\n  y: number;\n}\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IScatterChartPoints {\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend: string;\n\n  /**\n   * The shape for the legend\n   * default: show the rect legend\n   */\n  legendShape?: LegendShape;\n\n  /**\n   * dataPoints for the line chart\n   */\n  data: IScatterChartDataPoint[];\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * opacity for chart fill color\n   */\n  opacity?: number;\n\n  /**\n   * hide dots for points that are not active\n   */\n  hideNonActiveDots?: boolean;\n\n  /**\n   * Defines the function that is executed on clicking this legend\n   */\n  onLegendClick?: (selectedLegend: string | null | string[]) => void;\n\n  /**\n   * Whether to use the secondary y scale or not\n   * False by default.\n   */\n  useSecondaryYScale?: boolean;\n}\n\n/**\n * Specifies the ordering options for axis categories in Cartesian charts.\n *\n * - `'default'`: Uses the original order before custom ordering was supported.\n *   In some charts, this behaves the same as `'data'`.\n * - `'data'`: Preserves the order of categories as provided in the input data.\n * - `string[]`: Explicitly defines the custom order of categories as an array of category names.\n * - `'category ascending' | 'category descending'`: Orders categories alphanumerically.\n * - `'total ascending' | 'total descending'`: Orders categories by the total of their associated values.\n * - `'min ascending' | 'min descending'`: Orders by the minimum value within each category.\n * - `'max ascending' | 'max descending'`: Orders by the maximum value within each category.\n * - `'sum ascending' | 'sum descending'`: Orders by the sum of values for each category (same as 'total').\n * - `'mean ascending' | 'mean descending'`: Orders by the average of values in each category.\n * - `'median ascending' | 'median descending'`: Orders by the median value of each category.\n *\n * {@docCategory CartesianChart}\n */\nexport type AxisCategoryOrder =\n  | 'default'\n  | 'data'\n  | string[]\n  | 'category ascending'\n  | 'category descending'\n  | 'total ascending'\n  | 'total descending'\n  | 'min ascending'\n  | 'min descending'\n  | 'max ascending'\n  | 'max descending'\n  | 'sum ascending'\n  | 'sum descending'\n  | 'mean ascending'\n  | 'mean descending'\n  | 'median ascending'\n  | 'median descending';\n\n/**\n * {@docCategory IChartData}\n */\nexport interface IGanttChartDataPoint {\n  /**\n   * Dependent value of the data point, rendered along the x-axis.\n   * `start` and `end` represent the beginning and end of the data point.\n   */\n  x: {\n    start: Date | number;\n    end: Date | number;\n  };\n\n  /**\n   * Independent value of the data point, rendered along the y-axis.\n   * If y is a number, then each y-coordinate is plotted at its y-coordinate.\n   * If y is a string, then the data is evenly spaced along the y-axis.\n   */\n  y: number | string;\n\n  /**\n   * Legend text for the datapoint in the chart\n   */\n  legend?: string;\n\n  /**\n   * color for the legend in the chart\n   */\n  color?: string;\n\n  /**\n   * Gradient for the legend in the chart. If not provided, it will fallback on the default color palette.\n   * If provided, it will override the color prop. granted `enableGradient` is set to true for the chart.\n   */\n  gradient?: [string, string];\n\n  /**\n   * Optional label shown in place of `x` in the callout.\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Optional label shown in place of `y` in the callout.\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * onClick action for each datapoint in the chart\n   */\n  onClick?: VoidFunction;\n\n  /**\n   * Accessibility data for callout\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\n/**\n * Available scale types for axes.\n *\n * - `'default'`: Uses an automatic scale (linear, band, or time) based on axis data type.\n * - `'log'`: Uses a logarithmic scale. Only supported for numeric axes in LineChart and ScatterChart.\n *\n * {@docCategory CartesianChart}\n */\nexport type AxisScaleType = 'default' | 'log';\n\n/**\n * Configuration options for an axis.\n *\n * {@docCategory CartesianChart}\n */\nexport type AxisProps = {\n  /**\n   * Defines the step between tick marks on the axis.\n   * Works in combination with `tick0`.\n   * Must be a positive number.\n   *\n   * - **Log scale**:\n   *   - Ticks are placed at `10^(n * tickStep)` where `n` is the tick index.\n   *     - Example: `tickStep = 2` → ticks at 1, 100, 10,000...\n   *     - Example: `tickStep = log10(5)` → ticks at 1, 5, 25, 125...\n   *   - Special format `\"L<f>\"`: Creates ticks that are linearly spaced in value (not position).\n   *     - Example: `tick0 = 0.1`, `tickStep = \"L0.5\"` → ticks at 0.1, 0.6, 1.1, 1.6...\n   *\n   * - **Date axis**:\n   *   - Must be in milliseconds.\n   *     - Example: one day = `tickStep = 86400000`.\n   *   - Special format `\"M<n>\"`: Places ticks every `n` months.\n   *     - Example: `tick0 = \"2000-01-15\"`, `tickStep = \"M3\"` → ticks on the 15th every third month.\n   *     - Example: `tickStep = \"M48\"` → ticks every 4 years.\n   */\n  tickStep?: number | string;\n\n  /**\n   * Sets the reference value for axis ticks.\n   * Works in combination with `tickStep`.\n   *\n   * - **Log scale**:\n   *   - `tick0` must be given as the logarithm of the reference tick.\n   *     - Example: to align ticks with 100, use `tick0 = 2`.\n   *   - Exception: when `tickStep` uses `\"L<f>\"`, you can specify the raw value directly.\n   */\n  tick0?: number | Date;\n\n  /**\n   * Sets the text displayed at each tick position specified by `tickValues`. Used with `tickValues`.\n   */\n  tickText?: string[];\n};\n\n/**\n * Represents a single data point in a series.\n */\nexport interface IDataPointV2<X extends string | number | Date, Y extends string | number | Date> {\n  /**\n   * X-axis value of the data point.\n   */\n  x: X;\n\n  /**\n   * Y-axis value of the data point.\n   */\n  y: Y;\n\n  /**\n   * Optional click handler for the data point.\n   */\n  onClick?: () => void;\n\n  /**\n   * Custom text to show in the callout in place of the x-axis value.\n   */\n  xAxisCalloutData?: string;\n\n  /**\n   * Custom text to show in the callout in place of the y-axis value.\n   */\n  yAxisCalloutData?: string;\n\n  /**\n   * Accessibility properties for the data point.\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * Custom marker size for the data point.\n   */\n  markerSize?: number;\n\n  /**\n   * Optional text to annotate or label the data point.\n   */\n  text?: string;\n\n  /**\n   * Color of the data point. If not provided, it will inherit the series color.\n   */\n  color?: string;\n}\n\n/**\n * Base interface for a series.\n */\nexport interface IDataSeries {\n  /**\n   * Name of the series to be displayed in the legend.\n   */\n  legend: string;\n\n  /**\n   * Shape used in the legend (e.g., circle, square).\n   */\n  legendShape?: LegendShape;\n\n  /**\n   * Color of the series.\n   */\n  color?: string;\n\n  /**\n   * Opacity of the series.\n   */\n  opacity?: number;\n\n  /**\n   * Gradient fill for the series (start and end colors).\n   */\n  gradient?: [string, string];\n\n  /**\n   * Whether this series should be plotted against a secondary Y-axis.\n   */\n  useSecondaryYScale?: boolean;\n\n  /**\n   * Callback invoked when the legend item is clicked.\n   */\n  onLegendClick?: (selectedLegend: string | null | string[]) => void;\n}\n\n/**\n * Represents a bar series.\n */\nexport interface IBarSeries<X extends string | number | Date, Y extends string | number | Date> extends IDataSeries {\n  /**\n   * Type discriminator: always 'bar' for this series.\n   */\n  type: 'bar';\n\n  /**\n   * Array of data points for the series.\n   */\n  data: IDataPointV2<X, Y>[];\n\n  /**\n   * Optional group identifier for the series.\n   */\n  key?: string;\n}\n\n/**\n * Represents a line series.\n */\nexport interface ILineSeries<X extends string | number | Date, Y extends string | number | Date> extends IDataSeries {\n  /**\n   * Type discriminator: always 'line' for this series.\n   */\n  type: 'line';\n\n  /**\n   * Array of data points for the series.\n   */\n  data: IDataPointV2<X, Y>[];\n\n  /**\n   * Optional gaps to render in the line.\n   */\n  gaps?: ILineChartGap[];\n\n  /**\n   * Additional line rendering options (e.g., stroke width, curve type).\n   */\n  lineOptions?: ILineChartLineOptions;\n\n  /**\n   * If true, hides dots for inactive (unfocused/unhovered) data points.\n   */\n  hideInactiveDots?: boolean;\n\n  /**\n   * Callback invoked when the line itself is clicked.\n   */\n  onLineClick?: () => void;\n}\n\n/**\n * Represents a single data point in a polar series.\n */\nexport interface IPolarDataPoint {\n  /**\n   * Radial value of the data point.\n   */\n  r: string | number | Date;\n\n  /**\n   * Angular value of the data point, specified as a category or in degrees.\n   */\n  theta: string | number;\n\n  /**\n   * Optional click handler for the data point.\n   */\n  onClick?: () => void;\n\n  /**\n   * Custom text to show in the callout in place of the radial axis value.\n   */\n  radialAxisCalloutData?: string;\n\n  /**\n   * Custom text to show in the callout in place of the angular axis value.\n   */\n  angularAxisCalloutData?: string;\n\n  /**\n   * Accessibility properties for the data point.\n   */\n  callOutAccessibilityData?: IAccessibilityProps;\n\n  /**\n   * Custom marker size for the data point.\n   */\n  markerSize?: number;\n\n  /**\n   * Optional text to annotate or label the data point.\n   */\n  text?: string;\n\n  /**\n   * Color of the data point. If not provided, it will inherit the series color.\n   */\n  color?: string;\n}\n\n/**\n * Represents a scatterpolar series.\n */\nexport interface IScatterPolarSeries extends IDataSeries {\n  /**\n   * Type discriminator: always 'scatterpolar' for this series.\n   */\n  type: 'scatterpolar';\n\n  /**\n   * Array of data points for the series.\n   */\n  data: IPolarDataPoint[];\n}\n\n/**\n * Represents a linepolar series.\n */\nexport interface ILinePolarSeries extends IDataSeries {\n  /**\n   * Type discriminator: always 'linepolar' for this series.\n   */\n  type: 'linepolar';\n\n  /**\n   * Array of data points for the series.\n   */\n  data: IPolarDataPoint[];\n\n  /**\n   * Additional line rendering options (e.g., stroke width, curve type).\n   */\n  lineOptions?: ILineChartLineOptions;\n}\n\n/**\n * Represents a areapolar series.\n */\nexport interface IAreaPolarSeries extends IDataSeries {\n  /**\n   * Type discriminator: always 'areapolar' for this series.\n   */\n  type: 'areapolar';\n\n  /**\n   * Array of data points for the series.\n   */\n  data: IPolarDataPoint[];\n\n  /**\n   * Additional line rendering options (e.g., stroke width, curve type).\n   */\n  lineOptions?: ILineChartLineOptions;\n}\n"]}

package/lib/utilities/ChartTitle.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { ISVGTooltipTextProps } from './SVGTooltipText';
+import { ITitleStyles } from './Common.styles';
+import { ITheme } from '@fluentui/react/lib/Styling';
+/**
+ * Props for the ChartTitle component
+ */
+export interface IChartTitleProps {
+    /**
+     * The title text to display
+     */
+    title: string;
+    /**
+     * The x position for the title (typically center of chart)
+     */
+    x: number;
+    /**
+     * Optional custom y position. If not provided, calculated based on font size.
+     */
+    y?: number;
+    /**
+     * Maximum width for the title text before wrapping/truncation
+     */
+    maxWidth?: number;
+    /**
+     * CSS class name for the title text element
+     */
+    className?: string;
+    /**
+     * Title styles configuration (font, anchors, padding)
+     */
+    titleStyles?: ITitleStyles;
+    /**
+     * Text anchor for SVG text element
+     * @default 'middle'
+     */
+    textAnchor?: 'start' | 'middle' | 'end';
+    /**
+     * Additional SVGTooltipText props to pass through
+     */
+    tooltipProps?: Partial<ISVGTooltipTextProps>;
+    /**
+     * CSS class for the tooltip
+     */
+    tooltipClassName?: string;
+    /**
+     * Theme provided by High Order Component
+     */
+    theme?: ITheme;
+}
+/**
+ * A reusable chart title component that renders an SVG text element with tooltip support.
+ * This component encapsulates the common pattern for rendering chart titles across all chart types.
+ */
+export declare const ChartTitle: React.FunctionComponent<IChartTitleProps>;

package/lib/utilities/ChartTitle.js

@@ -0,0 +1,45 @@
+import { __assign } from "tslib";
+import * as React from 'react';
+import { SVGTooltipText } from './SVGTooltipText';
+import { CHART_TITLE_PADDING, getChartTitleInlineStyles } from './Common.styles';
+import { wrapContent } from './utilities';
+var AXIS_TITLE_PADDING = 8;
+/**
+ * A reusable chart title component that renders an SVG text element with tooltip support.
+ * This component encapsulates the common pattern for rendering chart titles across all chart types.
+ */
+export var ChartTitle = function (props) {
+    var _a, _b, _c, _d;
+    var title = props.title, x = props.x, y = props.y, maxWidth = props.maxWidth, className = props.className, titleStyles = props.titleStyles, tooltipProps = props.tooltipProps, tooltipClassName = props.tooltipClassName, theme = props.theme;
+    var _e = titleStyles !== null && titleStyles !== void 0 ? titleStyles : {}, titleFont = _e.titleFont, titleXAnchor = _e.titleXAnchor, titleYAnchor = _e.titleYAnchor, titlePad = _e.titlePad;
+    var computedTextAnchor = titleXAnchor === 'left' ? 'start' : titleXAnchor === 'right' ? 'end' : 'middle';
+    // Calculate dominantBaseline from titleYAnchor for vertical alignment
+    // 'top' means text hangs below the y position (text-before-edge/hanging)
+    // 'bottom' means text sits above the y position (text-after-edge/alphabetic)
+    // 'middle' means text is centered on the y position (central)
+    var computedDominantBaseline = titleYAnchor === 'top'
+        ? 'hanging'
+        : titleYAnchor === 'bottom'
+            ? 'alphabetic'
+            : titleYAnchor === 'middle'
+                ? 'central'
+                : 'auto';
+    // Calculate x position with padding adjustments
+    var computedX = x + ((_a = titlePad === null || titlePad === void 0 ? void 0 : titlePad.l) !== null && _a !== void 0 ? _a : 0) - ((_b = titlePad === null || titlePad === void 0 ? void 0 : titlePad.r) !== null && _b !== void 0 ? _b : 0);
+    // Calculate y position with padding adjustments
+    var calculatedY = (y !== null && y !== void 0 ? y : Math.max((typeof (titleFont === null || titleFont === void 0 ? void 0 : titleFont.size) === 'number' ? titleFont.size : 13) + AXIS_TITLE_PADDING, CHART_TITLE_PADDING - AXIS_TITLE_PADDING)) +
+        ((_c = titlePad === null || titlePad === void 0 ? void 0 : titlePad.t) !== null && _c !== void 0 ? _c : 0) -
+        ((_d = titlePad === null || titlePad === void 0 ? void 0 : titlePad.b) !== null && _d !== void 0 ? _d : 0);
+    var commonSvgToolTipProps = __assign({ wrapContent: wrapContent, showBackground: true, className: tooltipClassName, theme: theme }, tooltipProps);
+    return (React.createElement(SVGTooltipText, __assign({}, commonSvgToolTipProps, { content: title, textProps: {
+            x: computedX,
+            y: calculatedY,
+            textAnchor: computedTextAnchor,
+            dominantBaseline: computedDominantBaseline,
+            className: className,
+            'aria-hidden': true,
+            style: getChartTitleInlineStyles(titleFont),
+        }, maxWidth: maxWidth })));
+};
+ChartTitle.displayName = 'ChartTitle';
+//# sourceMappingURL=ChartTitle.js.map

package/lib/utilities/ChartTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTitle.js","sourceRoot":"../src/","sources":["utilities/ChartTitle.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { SVGTooltipText, ISVGTooltipTextProps } from './SVGTooltipText';\nimport { CHART_TITLE_PADDING, getChartTitleInlineStyles, ITitleStyles } from './Common.styles';\nimport { wrapContent } from './utilities';\nimport { ITheme } from '@fluentui/react/lib/Styling';\n\nconst AXIS_TITLE_PADDING = 8;\n\n/**\n * Props for the ChartTitle component\n */\nexport interface IChartTitleProps {\n  /**\n   * The title text to display\n   */\n  title: string;\n  /**\n   * The x position for the title (typically center of chart)\n   */\n  x: number;\n  /**\n   * Optional custom y position. If not provided, calculated based on font size.\n   */\n  y?: number;\n  /**\n   * Maximum width for the title text before wrapping/truncation\n   */\n  maxWidth?: number;\n  /**\n   * CSS class name for the title text element\n   */\n  className?: string;\n  /**\n   * Title styles configuration (font, anchors, padding)\n   */\n  titleStyles?: ITitleStyles;\n  /**\n   * Text anchor for SVG text element\n   * @default 'middle'\n   */\n  textAnchor?: 'start' | 'middle' | 'end';\n  /**\n   * Additional SVGTooltipText props to pass through\n   */\n  tooltipProps?: Partial<ISVGTooltipTextProps>;\n  /**\n   * CSS class for the tooltip\n   */\n  tooltipClassName?: string;\n  /**\n   * Theme provided by High Order Component\n   */\n  theme?: ITheme;\n}\n\n/**\n * A reusable chart title component that renders an SVG text element with tooltip support.\n * This component encapsulates the common pattern for rendering chart titles across all chart types.\n */\nexport const ChartTitle: React.FunctionComponent<IChartTitleProps> = props => {\n  const { title, x, y, maxWidth, className, titleStyles, tooltipProps, tooltipClassName, theme } = props;\n\n  const { titleFont, titleXAnchor, titleYAnchor, titlePad } = titleStyles ?? {};\n  const computedTextAnchor = titleXAnchor === 'left' ? 'start' : titleXAnchor === 'right' ? 'end' : 'middle';\n\n  // Calculate dominantBaseline from titleYAnchor for vertical alignment\n  // 'top' means text hangs below the y position (text-before-edge/hanging)\n  // 'bottom' means text sits above the y position (text-after-edge/alphabetic)\n  // 'middle' means text is centered on the y position (central)\n  const computedDominantBaseline =\n    titleYAnchor === 'top'\n      ? 'hanging'\n      : titleYAnchor === 'bottom'\n      ? 'alphabetic'\n      : titleYAnchor === 'middle'\n      ? 'central'\n      : 'auto';\n\n  // Calculate x position with padding adjustments\n  const computedX = x + (titlePad?.l ?? 0) - (titlePad?.r ?? 0);\n\n  // Calculate y position with padding adjustments\n  const calculatedY =\n    (y ??\n      Math.max(\n        (typeof titleFont?.size === 'number' ? titleFont.size : 13) + AXIS_TITLE_PADDING,\n        CHART_TITLE_PADDING - AXIS_TITLE_PADDING,\n      )) +\n    (titlePad?.t ?? 0) -\n    (titlePad?.b ?? 0);\n\n  const commonSvgToolTipProps: Partial<ISVGTooltipTextProps> = {\n    wrapContent,\n    showBackground: true,\n    className: tooltipClassName,\n    theme,\n    ...tooltipProps,\n  };\n  return (\n    <SVGTooltipText\n      {...commonSvgToolTipProps}\n      content={title}\n      textProps={{\n        x: computedX,\n        y: calculatedY,\n        textAnchor: computedTextAnchor,\n        dominantBaseline: computedDominantBaseline,\n        className,\n        'aria-hidden': true,\n        style: getChartTitleInlineStyles(titleFont),\n      }}\n      maxWidth={maxWidth}\n    />\n  );\n};\n\nChartTitle.displayName = 'ChartTitle';\n"]}

package/lib/utilities/Common.styles.d.ts

@@ -1,6 +1,57 @@
+import * as React from 'react';
 import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
 import type { IRawStyle } from '@fluentui/merge-styles';
+import type { Font } from '@fluentui/chart-utilities';
+/**
+ * Default padding below chart title (in pixels).
+ * Used consistently across all chart types for spacing between title and chart content.
+ */
+export declare const CHART_TITLE_PADDING = 20;
+/**
+ * Shared interface for chart title styling properties.
+ * Used by components that display a chart title with customizable font, alignment, and padding.
+ * {@docCategory TitleStyles}
+ */
+export interface ITitleStyles {
+    /**
+     * Font configuration for the title
+     */
+    titleFont?: Partial<Font>;
+    /**
+     * Horizontal anchor/alignment for the chart title
+     */
+    titleXAnchor?: 'auto' | 'left' | 'center' | 'right';
+    /**
+     * Vertical anchor/alignment for the chart title
+     */
+    titleYAnchor?: 'auto' | 'top' | 'middle' | 'bottom';
+    /**
+     * Padding for the chart title
+     */
+    titlePad?: {
+        t?: number;
+        r?: number;
+        b?: number;
+        l?: number;
+    };
+}
 export declare const getTooltipStyle: (theme: ITheme) => IStyle;
 export declare const getAxisTitleStyle: (theme: ITheme, font: IRawStyle) => IStyle;
 export declare const getBarLabelStyle: (theme: ITheme) => IStyle;
 export declare const getMarkerLabelStyle: (theme: ITheme) => IStyle;
+export declare const getChartTitleStyle: (theme: ITheme) => IStyle;
+export declare const getSvgTooltipStyle: (theme: ITheme) => IStyle;
+/**
+ * Creates dynamic chart title styles using CSS properties.
+ * @param titleFont - Optional font configuration from Plotly layout
+ * @param xanchor - Optional horizontal anchor/alignment ('auto' | 'left' | 'center' | 'right')
+ * @param yanchor - Optional vertical anchor/alignment ('auto' | 'top' | 'middle' | 'bottom')
+ * @param pad - Optional padding configuration
+ * @returns Style object with CSS properties for dynamic styling
+ */
+export declare function getChartTitleInlineStyles(titleFont: Partial<Font> | undefined, xanchor?: string, yanchor?: string, pad?: {
+    t?: number;
+    r?: number;
+    b?: number;
+    l?: number;
+}): React.CSSProperties;

package/lib/utilities/Common.styles.js

@@ -1,8 +1,13 @@
 import { __assign } from "tslib";
 import { FontSizes, FontWeights, HighContrastSelector } from '@fluentui/react/lib/Styling';
 import { NeutralColors } from '@fluentui/react';
+/**
+ * Default padding below chart title (in pixels).
+ * Used consistently across all chart types for spacing between title and chart content.
+ */
+export var CHART_TITLE_PADDING = 20;
 export var getTooltipStyle = function (theme) {
-    return __assign(__assign({}, theme.fonts.medium), { display: 'flex', flexDirection: 'column', padding: '8px', position: 'absolute', textAlign: 'center', top: '0px', background: theme.semanticColors.bodyBackground, borderRadius: '2px', pointerEvents: 'none', color: theme.semanticColors.bodyText });
+    return __assign(__assign({}, theme.fonts.medium), { display: 'flex', flexDirection: 'column', padding: '8px', position: 'absolute', textAlign: 'center', background: theme.semanticColors.bodyBackground, borderRadius: '2px', pointerEvents: 'none', color: theme.semanticColors.bodyText });
 };
 export var getAxisTitleStyle = function (theme, font) {
     var _a;
@@ -48,4 +53,68 @@ export var getMarkerLabelStyle = function (theme) {
             _a),
     };
 };
+export var getChartTitleStyle = function (theme) {
+    var _a;
+    return __assign(__assign({}, theme.fonts.small), { fontWeight: FontWeights.semibold, fontStyle: 'normal', fill: theme.semanticColors.bodyText, textAnchor: 'middle', selectors: (_a = {},
+            _a[HighContrastSelector] = {
+                fill: 'CanvasText',
+            },
+            _a) });
+};
+export var getSvgTooltipStyle = function (theme) {
+    var _a;
+    return {
+        fill: theme.semanticColors.bodyBackground,
+        selectors: (_a = {},
+            _a[HighContrastSelector] = {
+                fill: 'Canvas',
+            },
+            _a),
+    };
+};
+/**
+ * Creates dynamic chart title styles using CSS properties.
+ * @param titleFont - Optional font configuration from Plotly layout
+ * @param xanchor - Optional horizontal anchor/alignment ('auto' | 'left' | 'center' | 'right')
+ * @param yanchor - Optional vertical anchor/alignment ('auto' | 'top' | 'middle' | 'bottom')
+ * @param pad - Optional padding configuration
+ * @returns Style object with CSS properties for dynamic styling
+ */
+export function getChartTitleInlineStyles(titleFont, xanchor, yanchor, pad) {
+    var _a, _b, _c, _d;
+    var styles = {};
+    if (titleFont) {
+        Object.assign(styles, titleFont.family && { fontFamily: titleFont.family }, titleFont.size && { fontSize: "".concat(titleFont.size, "px") }, titleFont.weight && { fontWeight: titleFont.weight }, titleFont.color && { fill: titleFont.color }, titleFont.shadow && titleFont.shadow !== 'none' && { filter: "drop-shadow(".concat(titleFont.shadow, ")") });
+    }
+    if (xanchor) {
+        var anchorMap = {
+            left: 'left',
+            center: 'center',
+            right: 'right',
+        };
+        var alignmentKey = xanchor.toLowerCase();
+        if (anchorMap[alignmentKey]) {
+            styles.textAlign = anchorMap[alignmentKey];
+        }
+    }
+    if (yanchor) {
+        var anchorMap = {
+            top: 'flex-start',
+            middle: 'center',
+            bottom: 'flex-end',
+        };
+        var alignmentKey = yanchor.toLowerCase();
+        if (anchorMap[alignmentKey]) {
+            styles.alignSelf = anchorMap[alignmentKey];
+        }
+    }
+    if (pad) {
+        var t = (_a = pad.t) !== null && _a !== void 0 ? _a : 0;
+        var r = (_b = pad.r) !== null && _b !== void 0 ? _b : 0;
+        var b = (_c = pad.b) !== null && _c !== void 0 ? _c : 0;
+        var l = (_d = pad.l) !== null && _d !== void 0 ? _d : 0;
+        styles.padding = "".concat(t, "px ").concat(r, "px ").concat(b, "px ").concat(l, "px");
+    }
+    return styles;
+}
 //# sourceMappingURL=Common.styles.js.map

package/lib/utilities/Common.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Common.styles.js","sourceRoot":"../src/","sources":["utilities/Common.styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAC3F,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,KAAa;IAC3C,6BACK,KAAK,CAAC,KAAK,CAAC,MAAM,KACrB,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,QAAQ,EACvB,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,QAAQ,EACnB,GAAG,EAAE,KAAK,EACV,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,EAC/C,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,IACpC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,KAAa,EAAE,IAAe;;IAC9D,OAAO;QACL,IAAI;;gBAEF,SAAS,EAAE,QAAQ;gBACnB,UAAU,EAAE,WAAW,CAAC,QAAQ;gBAChC,SAAS,EAAE,QAAQ;gBACnB,UAAU,EAAE,SAAS,CAAC,MAAM;gBAC5B,KAAK,EAAE,aAAa,CAAC,OAAO;gBAC5B,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;;YACnC,GAAC,oBAAoB,IAAG;gBACtB,IAAI,EAAE,YAAY;aACnB;;KAEJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,KAAa;;IAC5C,OAAO;QACL,QAAQ,EAAE,SAAS,CAAC,KAAK;QACzB,UAAU,EAAE,WAAW,CAAC,QAAQ;QAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAClC,SAAS;YACP,GAAC,oBAAoB,IAAG;gBACtB,IAAI,EAAE,YAAY;aACnB;eACF;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAC,KAAa;;IAC/C,OAAO;QACL,QAAQ,EAAE,SAAS,CAAC,MAAM;QAC1B,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;QACnC,UAAU,EAAE,QAAQ;QACpB,SAAS;YACP,GAAC,oBAAoB,IAAG;gBACtB,IAAI,EAAE,YAAY;aACnB;eACF;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport type { IRawStyle } from '@fluentui/merge-styles';\nimport { FontSizes, FontWeights, HighContrastSelector } from '@fluentui/react/lib/Styling';\nimport { NeutralColors } from '@fluentui/react';\n\nexport const getTooltipStyle = (theme: ITheme): IStyle => {\n  return {\n    ...theme.fonts.medium,\n    display: 'flex',\n    flexDirection: 'column',\n    padding: '8px',\n    position: 'absolute',\n    textAlign: 'center',\n    top: '0px',\n    background: theme.semanticColors.bodyBackground,\n    borderRadius: '2px',\n    pointerEvents: 'none',\n    color: theme.semanticColors.bodyText,\n  };\n};\n\nexport const getAxisTitleStyle = (theme: ITheme, font: IRawStyle): IStyle => {\n  return [\n    font,\n    {\n      textAlign: 'center',\n      fontWeight: FontWeights.semibold,\n      fontStyle: 'normal',\n      lineHeight: FontSizes.medium,\n      color: NeutralColors.gray160,\n      fill: theme.semanticColors.bodyText,\n      [HighContrastSelector]: {\n        fill: 'CanvasText',\n      },\n    },\n  ];\n};\n\nexport const getBarLabelStyle = (theme: ITheme): IStyle => {\n  return {\n    fontSize: FontSizes.small,\n    fontWeight: FontWeights.semibold,\n    fill: theme.palette.neutralPrimary,\n    selectors: {\n      [HighContrastSelector]: {\n        fill: 'CanvasText',\n      },\n    },\n  };\n};\n\nexport const getMarkerLabelStyle = (theme: ITheme): IStyle => {\n  return {\n    fontSize: FontSizes.medium,\n    fill: theme.semanticColors.bodyText,\n    textAnchor: 'middle',\n    selectors: {\n      [HighContrastSelector]: {\n        fill: 'CanvasText',\n      },\n    },\n  };\n};\n"]}
+{"version":3,"file":"Common.styles.js","sourceRoot":"../src/","sources":["utilities/Common.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport type { IRawStyle } from '@fluentui/merge-styles';\nimport { FontSizes, FontWeights, HighContrastSelector } from '@fluentui/react/lib/Styling';\nimport { NeutralColors } from '@fluentui/react';\nimport type { Font } from '@fluentui/chart-utilities';\n\n/**\n * Default padding below chart title (in pixels).\n * Used consistently across all chart types for spacing between title and chart content.\n */\nexport const CHART_TITLE_PADDING = 20;\n\n/**\n * Shared interface for chart title styling properties.\n * Used by components that display a chart title with customizable font, alignment, and padding.\n * {@docCategory TitleStyles}\n */\nexport interface ITitleStyles {\n  /**\n   * Font configuration for the title\n   */\n  titleFont?: Partial<Font>;\n  /**\n   * Horizontal anchor/alignment for the chart title\n   */\n  titleXAnchor?: 'auto' | 'left' | 'center' | 'right';\n  /**\n   * Vertical anchor/alignment for the chart title\n   */\n  titleYAnchor?: 'auto' | 'top' | 'middle' | 'bottom';\n  /**\n   * Padding for the chart title\n   */\n  titlePad?: { t?: number; r?: number; b?: number; l?: number };\n}\n\nexport const getTooltipStyle = (theme: ITheme): IStyle => {\n  return {\n    ...theme.fonts.medium,\n    display: 'flex',\n    flexDirection: 'column',\n    padding: '8px',\n    position: 'absolute',\n    textAlign: 'center',\n    background: theme.semanticColors.bodyBackground,\n    borderRadius: '2px',\n    pointerEvents: 'none',\n    color: theme.semanticColors.bodyText,\n  };\n};\n\nexport const getAxisTitleStyle = (theme: ITheme, font: IRawStyle): IStyle => {\n  return [\n    font,\n    {\n      textAlign: 'center',\n      fontWeight: FontWeights.semibold,\n      fontStyle: 'normal',\n      lineHeight: FontSizes.medium,\n      color: NeutralColors.gray160,\n      fill: theme.semanticColors.bodyText,\n      [HighContrastSelector]: {\n        fill: 'CanvasText',\n      },\n    },\n  ];\n};\n\nexport const getBarLabelStyle = (theme: ITheme): IStyle => {\n  return {\n    fontSize: FontSizes.small,\n    fontWeight: FontWeights.semibold,\n    fill: theme.palette.neutralPrimary,\n    selectors: {\n      [HighContrastSelector]: {\n        fill: 'CanvasText',\n      },\n    },\n  };\n};\n\nexport const getMarkerLabelStyle = (theme: ITheme): IStyle => {\n  return {\n    fontSize: FontSizes.medium,\n    fill: theme.semanticColors.bodyText,\n    textAnchor: 'middle',\n    selectors: {\n      [HighContrastSelector]: {\n        fill: 'CanvasText',\n      },\n    },\n  };\n};\n\nexport const getChartTitleStyle = (theme: ITheme): IStyle => {\n  return {\n    ...theme.fonts.small,\n    fontWeight: FontWeights.semibold,\n    fontStyle: 'normal',\n    fill: theme.semanticColors.bodyText,\n    textAnchor: 'middle',\n    selectors: {\n      [HighContrastSelector]: {\n        fill: 'CanvasText',\n      },\n    },\n  };\n};\n\nexport const getSvgTooltipStyle = (theme: ITheme): IStyle => {\n  return {\n    fill: theme.semanticColors.bodyBackground,\n    selectors: {\n      [HighContrastSelector]: {\n        fill: 'Canvas',\n      },\n    },\n  };\n};\n\n/**\n * Creates dynamic chart title styles using CSS properties.\n * @param titleFont - Optional font configuration from Plotly layout\n * @param xanchor - Optional horizontal anchor/alignment ('auto' | 'left' | 'center' | 'right')\n * @param yanchor - Optional vertical anchor/alignment ('auto' | 'top' | 'middle' | 'bottom')\n * @param pad - Optional padding configuration\n * @returns Style object with CSS properties for dynamic styling\n */\nexport function getChartTitleInlineStyles(\n  titleFont: Partial<Font> | undefined,\n  xanchor?: string,\n  yanchor?: string,\n  pad?: { t?: number; r?: number; b?: number; l?: number },\n): React.CSSProperties {\n  const styles: React.CSSProperties = {};\n\n  if (titleFont) {\n    Object.assign(\n      styles,\n      titleFont.family && { fontFamily: titleFont.family },\n      titleFont.size && { fontSize: `${titleFont.size}px` },\n      titleFont.weight && { fontWeight: titleFont.weight },\n      titleFont.color && { fill: titleFont.color as string },\n      titleFont.shadow && titleFont.shadow !== 'none' && { filter: `drop-shadow(${titleFont.shadow})` },\n    );\n  }\n\n  if (xanchor) {\n    const anchorMap: Record<string, React.CSSProperties['textAlign']> = {\n      left: 'left',\n      center: 'center',\n      right: 'right',\n    };\n    const alignmentKey = xanchor.toLowerCase();\n    if (anchorMap[alignmentKey]) {\n      styles.textAlign = anchorMap[alignmentKey];\n    }\n  }\n\n  if (yanchor) {\n    const anchorMap: Record<string, React.CSSProperties['alignSelf']> = {\n      top: 'flex-start',\n      middle: 'center',\n      bottom: 'flex-end',\n    };\n    const alignmentKey = yanchor.toLowerCase();\n    if (anchorMap[alignmentKey]) {\n      styles.alignSelf = anchorMap[alignmentKey];\n    }\n  }\n\n  if (pad) {\n    const t = pad.t ?? 0;\n    const r = pad.r ?? 0;\n    const b = pad.b ?? 0;\n    const l = pad.l ?? 0;\n    styles.padding = `${t}px ${r}px ${b}px ${l}px`;\n  }\n\n  return styles;\n}\n"]}

package/lib/utilities/image-export-utils.js

@@ -1,6 +1,6 @@
 import { __assign, __awaiter, __generator, __spreadArray } from "tslib";
 import { create as d3Create, select as d3Select } from 'd3-selection';
-import { copyStyle, createMeasurementSpan } from './index';
+import { copyStyle, measureTextWithDOM } from './index';
 import { LEGEND_CONTAINER_MARGIN_TOP, LEGEND_CONTAINER_MARGIN_START, LEGEND_PADDING, LEGEND_HEIGHT, LEGEND_SHAPE_BORDER, LEGEND_SHAPE_SIZE, LEGEND_SHAPE_MARGIN_END, INACTIVE_LEGEND_TEXT_OPACITY, } from '../components/Legends/Legends.styles';
 export function exportChartsAsImage(charts_1, legendsToSvg_1) {
     return __awaiter(this, arguments, void 0, function (charts, legendsToSvg, isRTL, opts) {
@@ -242,8 +242,8 @@ export function cloneLegendsToSVG(legends, svgWidth, config, legendContainer) {
     var noLegendsSelected = Object.keys(selectedLegends).length === 0;
     var _loop_1 = function (i) {
         var textOffset = LEGEND_PADDING + LEGEND_SHAPE_SIZE + LEGEND_SHAPE_MARGIN_END;
-        var legendText = createMeasurementSpan(legends[i].title, textClassName, legendContainer);
-        var legendWidth = textOffset + legendText.getBoundingClientRect().width + LEGEND_PADDING;
+        var legendText = measureTextWithDOM(legends[i].title, ".".concat(textClassName), legendContainer);
+        var legendWidth = textOffset + legendText.width + LEGEND_PADDING;
         var legendItem = legendGroup.append('g');
         legendLine.push({ elem: legendItem, width: legendWidth });
         if (legendX + legendWidth > svgWidth && legendLine.length > 1) {
@@ -271,7 +271,7 @@ export function cloneLegendsToSVG(legends, svgWidth, config, legendContainer) {
             .attr('dominant-baseline', 'hanging')
             .style('opacity', isLegendActive ? 1 : INACTIVE_LEGEND_TEXT_OPACITY)
             .text(legends[i].title)
-            .call(function (selection) { return copyStyle(LEGEND_TEXT_STYLE_PROPERTIES_MAP, legendText, selection.node()); });
+            .call(function (selection) { return copyStyle(LEGEND_TEXT_STYLE_PROPERTIES_MAP, legendText.node, selection.node()); });
         legendX += legendWidth;
     };
     for (var i = 0; i < legends.length; i++) {