@undp/data-viz 2.4.1 → 2.5.0

package/dist/index.d.ts

@@ -660,6 +660,9 @@ declare interface DataTableColumnDataType {
     align?: 'left' | 'right' | 'center';
     suffix?: string;
     prefix?: string;
+    locale?: string;
+    precision?: number;
+    padZeros?: boolean;
     columnWidth?: number;
 }
 
@@ -984,8 +987,6 @@ declare interface GraphSettingsDataType {
     footNote?: string | React.ReactNode;
     height?: number;
     width?: number;
-    suffix?: string;
-    prefix?: string;
     sources?: SourcesDataType[];
     barPadding?: number;
     showTicks?: boolean;
@@ -1015,7 +1016,14 @@ declare interface GraphSettingsDataType {
     barColors?: [string, string];
     centerGap?: number;
     columnData?: DataTableColumnDataType[];
-    mainText?: string;
+    mainText?: string | {
+        label: string;
+        suffix?: string;
+        prefix?: string;
+        locale?: string;
+        padZeros?: boolean;
+        precision?: number;
+    } | ReactElement;
     subNote?: string;
     radius?: number;
     strokeWidth?: number;
@@ -1171,16 +1179,6 @@ declare interface GraphSettingsDataType {
     colorLegendColors?: string[];
     colorLegendDomain?: string[];
     barAxisTitle?: string;
-    barSuffix?: string;
-    barPrefix?: string;
-    lineSuffix?: string;
-    linePrefix?: string;
-    xSuffix?: string;
-    xPrefix?: string;
-    ySuffix?: string;
-    yPrefix?: string;
-    lineSuffixes?: [string, string];
-    linePrefixes?: [string, string];
     allowDataDownloadOnDetail?: string | boolean;
     noOfItemsInAPage?: number;
     curveType?: CurveTypes;
@@ -1200,7 +1198,6 @@ declare interface GraphSettingsDataType {
     measureBarWidthFactor?: number;
     mapLegend?: string | React.ReactNode | MapLegendDataType[];
     dimmedOpacity?: number;
-    precision?: number;
     customLayers?: CustomLayerDataType[];
     dashedLines?: (string | number)[];
     dashSettings?: string[];
@@ -1237,7 +1234,13 @@ declare interface GraphSettingsDataType {
     showVoronoiTesselation?: boolean;
     mapOverlay?: MapOverlayDataType;
     useVoronoiInteraction?: boolean;
-    locale?: string;
+    numberDisplayOptions?: NumberFormatOptions;
+    leftLineNumberDisplayOptions?: NumberFormatOptions;
+    rightLineNumberDisplayOptions?: NumberFormatOptions;
+    barNumberDisplayOptions?: NumberFormatOptions;
+    lineNumberDisplayOptions?: NumberFormatOptions;
+    xNumberDisplayOptions?: NumberFormatOptions;
+    yNumberDisplayOptions?: NumberFormatOptions;
 }
 
 export declare function GraphTitle(props: Props_68): JSX.Element | null;
@@ -1301,10 +1304,6 @@ declare interface GroupedBarChartProps {
     barPadding?: number;
     /** Maximum thickness of bars */
     maxBarThickness?: number;
-    /** Prefix for values */
-    prefix?: string;
-    /** Suffix for values */
-    suffix?: string;
     /** Maximum value for the chart */
     maxValue?: number;
     /** Minimum value for the chart */
@@ -1339,10 +1338,8 @@ declare interface GroupedBarChartProps {
     barAxisTitle?: string;
     /** Defines how “NA” values should be displayed/labelled in the graph */
     naLabel?: string;
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    numberDisplayOptions?: NumberFormatOptions;
     /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
     customLayers?: CustomLayerDataType[];
     /** Configures playback and slider controls for animating the chart over time. The data must have a key date for it to work properly. */
@@ -1458,7 +1455,7 @@ declare interface InfoBoxDataType {
     description?: string | React.ReactNode;
 }
 
-declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'jp' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';
+declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'ja' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';
 
 declare type LightConfig = AmbientLightConfig | DirectionalLightConfig | PointLightConfig | SpotLightConfig;
 
@@ -1519,6 +1516,14 @@ declare interface MultiLineChartDataType {
     data?: object;
 }
 
+declare interface NumberFormatOptions {
+    locale?: string;
+    precision?: number;
+    prefix?: string;
+    suffix?: string;
+    padZeros?: boolean;
+}
+
 /**
  * Formats a number into a human-readable string, optionally with prefix/suffix
  * and locale-aware formatting.
@@ -1529,7 +1534,7 @@ declare interface MultiLineChartDataType {
  * - Prefix and suffix
  * - NA fallback
  */
-export declare function numberFormattingFunction(value: number | string | undefined | null, naLabel?: string, precision?: number, prefix?: string, suffix?: string, locale?: string): string;
+export declare function numberFormattingFunction(value: number | string | undefined | null, naLabel?: string, precision?: number, prefix?: string, suffix?: string, locale?: string, padZeros?: boolean): string;
 
 /**
  * Represents a parameter to be embedded in a URL.
@@ -1642,10 +1647,6 @@ declare interface Props {
     minBarThickness?: number;
     /** Maximum number of bars shown in the graph */
     maxNumberOfBars?: number;
-    /** Prefix for values */
-    prefix?: string;
-    /** Suffix for values */
-    suffix?: string;
     /** Maximum value for the chart */
     maxValue?: number;
     /** Minimum value for the chart */
@@ -1684,12 +1685,10 @@ declare interface Props {
     trackColor?: string;
     /** Toggles if data point which are undefined or has value null are filtered out.  */
     filterNA?: boolean;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    numberDisplayOptions?: NumberFormatOptions;
     /** Toggles if the graph animates in when loaded.  */
     animate?: boolean | AnimateDataType;
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
     /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
     customLayers?: CustomLayerDataType[];
     /** Configures playback and slider controls for animating the chart over time. The data must have a key date for it to work properly. */
@@ -1761,10 +1760,6 @@ declare interface Props_10 {
     topMargin?: number;
     /** Bottom margin of the graph */
     bottomMargin?: number;
-    /** Prefix for values */
-    prefix?: string;
-    /** Suffix for values */
-    suffix?: string;
     /** Maximum value for the chart */
     maxValue?: number;
     /** Minimum value for the chart */
@@ -1811,10 +1806,8 @@ declare interface Props_10 {
     customHighlightAreaSettings?: CustomHighlightAreaSettingsDataType[];
     /** Curve type for the line */
     curveType?: CurveTypes;
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    numberDisplayOptions?: NumberFormatOptions;
     /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
     customLayers?: CustomLayerDataType[];
     /** Enable graph download option as png */
@@ -1878,10 +1871,6 @@ declare interface Props_11 {
     topMargin?: number;
     /** Bottom margin of the graph */
     bottomMargin?: number;
-    /** Prefix for values */
-    prefix?: string;
-    /** Suffix for values */
-    suffix?: string;
     /** Maximum value for the chart */
     maxValue?: number;
     /** Minimum value for the chart */
@@ -1918,10 +1907,8 @@ declare interface Props_11 {
     customHighlightAreaSettings?: CustomHighlightAreaSettingsDataType[];
     /** Curve type for the line */
     curveType?: CurveTypes;
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    numberDisplayOptions?: NumberFormatOptions;
     /** Defines how “NA” values should be displayed/labelled in the graph */
     naLabel?: string;
     /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
@@ -2096,8 +2083,10 @@ declare interface Props_13 {
     customLayers?: CustomLayerDataType[];
     /** Configures playback and slider controls for animating the chart over time. The data must have a key date for it to work properly. */
     timeline?: TimelineDataType;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
+    /** Configuration options for controlling number formatting, localization, precision, and zero padding. */
+    xNumberDisplayOptions?: Omit<NumberFormatOptions, 'suffix' | 'prefix'>;
+    /** Configuration options for controlling number formatting, localization, precision, and zero padding. */
+    yNumberDisplayOptions?: Omit<NumberFormatOptions, 'suffix' | 'prefix'>;
     /** Enable graph download option as png */
     graphDownload?: boolean;
     /** Enable data download option as a csv */
@@ -2205,8 +2194,8 @@ declare interface Props_14 {
     customLayers?: CustomLayerDataType[];
     /** Configures playback and slider controls for animating the chart over time. The data must have a key date for it to work properly. */
     timeline?: TimelineDataType;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
+    /** Configuration options for controlling number formatting, localization, precision, and zero padding. */
+    numberDisplayOptions?: Omit<NumberFormatOptions, 'suffix' | 'prefix'>;
     /** Enable graph download option as png */
     graphDownload?: boolean;
     /** Enable data download option as a csv */
@@ -2435,8 +2424,8 @@ declare interface Props_16 {
     mapProperty?: string;
     /** Configures playback and slider controls for animating the chart over time. The data must have a key date for it to work properly. */
     timeline?: TimelineDataType;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
+    /** Configuration options for controlling number formatting, localization, precision, and zero padding. */
+    numberDisplayOptions?: Omit<NumberFormatOptions, 'suffix' | 'prefix'>;
     /** Enable graph download option as png */
     graphDownload?: boolean;
     /** Enable data download option as a csv */
@@ -2522,8 +2511,8 @@ declare interface Props_17 {
     scaleType?: Exclude<ScaleDataType, 'linear'>;
     /** Toggle visibility of color scale. */
     showColorScale?: boolean;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
+    /** Configuration options for controlling number formatting, localization, precision, and zero padding. */
+    numberDisplayOptions?: Omit<NumberFormatOptions, 'suffix' | 'prefix'>;
     /** Toggle if color scale is collapsed by default. */
     collapseColorScaleByDefault?: boolean;
     /** The max altitude of the atmosphere, in terms of globe radius units. */
@@ -2700,10 +2689,6 @@ declare interface Props_2 {
     topMargin?: number;
     /** Bottom margin of the graph */
     bottomMargin?: number;
-    /** Prefix for values */
-    prefix?: string;
-    /** Suffix for values */
-    suffix?: string;
     /** Maximum value mapped to the radius chart */
     maxRadiusValue?: number;
     /** If true, the graph will be rendered in a circle layout */
@@ -2722,10 +2707,8 @@ declare interface Props_2 {
     highlightedDataPoints?: (string | number)[];
     /** Defines the opacity of the non-highlighted data */
     dimmedOpacity?: number;
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    numberDisplayOptions?: NumberFormatOptions;
     /** Enable graph download option as png */
     graphDownload?: boolean;
     /** Enable data download option as a csv */
@@ -2843,14 +2826,6 @@ declare interface Props_21 {
     topMargin?: number;
     /** Bottom margin of the graph */
     bottomMargin?: number;
-    /** Prefix for values on x-axis */
-    xPrefix?: string;
-    /** Suffix for values on x-axis */
-    xSuffix?: string;
-    /** Prefix for values on y-axis */
-    yPrefix?: string;
-    /** Suffix for values on y-axis */
-    ySuffix?: string;
     /** Maximum value for the x-axis */
     maxXValue?: number;
     /** Minimum value for the x-axis */
@@ -2899,10 +2874,10 @@ declare interface Props_21 {
     labelColor?: string;
     /** Toggles if the graph animates in when loaded.  */
     animate?: boolean | AnimateDataType;
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    xNumberDisplayOptions?: NumberFormatOptions;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    yNumberDisplayOptions?: NumberFormatOptions;
     /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
     customLayers?: CustomLayerDataType[];
     /** Configures playback and slider controls for animating the chart over time. The data must have a key date for it to work properly. */
@@ -3113,6 +3088,8 @@ declare interface Props_23 {
     hideAxisLine?: boolean;
     /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */
     showColorScale?: boolean;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    numberDisplayOptions?: Omit<NumberFormatOptions, 'suffix' | 'prefix'>;
     /** Data points to highlight. Use the label value from data to highlight the data point */
     highlightedDataPoints?: (string | number)[];
     /** Defines the opacity of the non-highlighted data */
@@ -3129,10 +3106,6 @@ declare interface Props_23 {
     animate?: boolean | AnimateDataType;
     /** Configures playback and slider controls for animating the chart over time. The data must have a key date for it to work properly. */
     timeline?: TimelineDataType;
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
     /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
     customLayers?: CustomLayerDataType[];
     /** Enable graph download option as png */
@@ -3200,10 +3173,6 @@ declare interface Props_24 {
     topMargin?: number;
     /** Bottom margin of the graph */
     bottomMargin?: number;
-    /** Prefix for values */
-    prefix?: string;
-    /** Suffix for values */
-    suffix?: string;
     /** Maximum value for the chart */
     maxValue?: number;
     /** Minimum value for the chart */
@@ -3228,10 +3197,8 @@ declare interface Props_24 {
     customHighlightAreaSettings?: CustomHighlightAreaSettingsDataType[];
     /** Curve type for the line */
     curveType?: CurveTypes;
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    numberDisplayOptions?: NumberFormatOptions;
     /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
     customLayers?: CustomLayerDataType[];
     /** Toggles if the graph animates in when loaded.  */
@@ -3281,18 +3248,14 @@ declare interface Props_25 {
     styles?: StyleObject;
     /** Custom class names */
     classNames?: ClassNameObject;
-    /** Prefix for values */
-    prefix?: string;
-    /** Suffix for values */
-    suffix?: string;
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    numberDisplayOptions?: NumberFormatOptions;
+    /** Defines how “NA” values should be displayed/labelled in the graph */
+    naLabel?: string;
     /** Main text */
     value: number | string;
     /** Sub text next to main text */
     year?: number | string;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
     /** Language setting  */
     language?: Languages;
     /** Color theme */
@@ -3332,22 +3295,16 @@ declare interface Props_26 {
     styles?: StyleObject;
     /** Custom class names */
     classNames?: ClassNameObject;
-    /** Prefix for values */
-    prefix?: string;
-    /** Suffix for values */
-    suffix?: string;
     /** Sub text next to main text */
     year?: number | string;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    numberDisplayOptions?: NumberFormatOptions;
     /** Defines how “NA” values should be displayed/labelled in the graph */
     naLabel?: string;
     /** Data points that need to counted for aggregation.  */
     countOnly?: (string | number)[];
     /** Method for aggregating the data to show as a single number in the card. If the data type of value in data object is string then only count is applicable. */
     aggregationMethod?: 'count' | 'max' | 'min' | 'average' | 'sum';
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
     /** Language setting  */
     language?: Languages;
     /** Color theme */
@@ -3400,10 +3357,6 @@ declare interface Props_27 {
     /** Bottom margin of the graph */
     bottomMargin?: number;
     /** Maximum radius of the circle */
-    /** Prefix for values */
-    prefix?: string;
-    /** Suffix for values */
-    suffix?: string;
     /** Toggle visibility of labels */
     showLabels?: boolean;
     /** Toggle visibility of values */
@@ -3418,10 +3371,8 @@ declare interface Props_27 {
     dimmedOpacity?: number;
     /** Toggles if the graph animates in when loaded.  */
     animate?: boolean | AnimateDataType;
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    numberDisplayOptions?: NumberFormatOptions;
     /** Enable graph download option as png */
     graphDownload?: boolean;
     /** Enable data download option as a csv */
@@ -3491,16 +3442,14 @@ declare interface Props_28 {
     animate?: boolean | AnimateDataType;
     /** Toggle visibility of color scale */
     showColorScale?: boolean;
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    numberDisplayOptions?: NumberFormatOptions;
     /** Defines how “NA” values should be displayed/labelled in the graph */
     naLabel?: string;
     /** Enable graph download option as png */
     graphDownload?: boolean;
     /** Enable data download option as a csv */
     dataDownload?: boolean;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
     /** Language setting  */
     language?: Languages;
     /** Color theme */
@@ -3554,10 +3503,6 @@ declare interface Props_29 {
     bottomMargin?: number;
     /** Toggles the background to fill the container. This only works if the width of the graph is defined. */
     fillContainer?: boolean;
-    /** Prefix for values */
-    prefix?: string;
-    /** Suffix for values */
-    suffix?: string;
     /** Maximum value for the chart */
     truncateBy?: number;
     /** Reference values for comparison */
@@ -3577,10 +3522,8 @@ declare interface Props_29 {
     animate?: boolean | AnimateDataType;
     /** Domain for the colors in the cell.  */
     colorDomain: number[] | string[];
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    numberDisplayOptions?: NumberFormatOptions;
     /** Defines how “NA” values should be displayed/labelled in the graph */
     naLabel?: string;
     /** Enable graph download option as png */
@@ -3640,10 +3583,6 @@ declare interface Props_3 {
     padding?: string;
     /** Radius of the donut chart */
     radius?: number;
-    /** Prefix for values */
-    prefix?: string;
-    /** Suffix for values */
-    suffix?: string;
     /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */
     showColorScale?: boolean;
     /** Max width of the color scale as a css property */
@@ -3659,11 +3598,12 @@ declare interface Props_3 {
         label: string;
         suffix?: string;
         prefix?: string;
+        locale?: string;
+        padZeros?: boolean;
+        precision?: number;
     } | ReactElement;
     /** Small text at the center of the donut chart */
     subNote?: string;
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
     /** Track color (i.e. the color of the donut chart's background) of the donut chart */
     trackColor?: string;
     /** Enable graph download option as png */
@@ -3672,8 +3612,8 @@ declare interface Props_3 {
     dataDownload?: boolean;
     /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */
     resetSelectionOnDoubleClick?: boolean;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    numberDisplayOptions?: NumberFormatOptions;
     /** Defines how “NA” values should be displayed/labelled in the graph */
     naLabel?: string;
     /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
@@ -3721,8 +3661,6 @@ declare interface Props_30 {
     padding?: string;
     /** Column settings for each column shown in the table. */
     columnData: DataTableColumnDataType[];
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
     /** Defines how “NA” values should be displayed/labelled in the graph */
     naLabel?: string;
     /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */
@@ -3735,8 +3673,6 @@ declare interface Props_30 {
     theme?: 'light' | 'dark';
     /** Unique ID for the graph */
     graphID?: string;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
 }
 
 declare interface Props_31 {
@@ -3851,10 +3787,6 @@ declare interface Props_32 {
     topMargin?: number;
     /** Bottom margin of the graph */
     bottomMargin?: number;
-    /** Prefix for values */
-    prefix?: string;
-    /** Suffix for values */
-    suffix?: string;
     /** Maximum value for the chart */
     maxValue?: number;
     /** Minimum value for the chart */
@@ -3879,10 +3811,8 @@ declare interface Props_32 {
     animate?: boolean | AnimateDataType;
     /** Toggles if the graph show the min and max value of the data.  */
     showDataMinMax?: boolean;
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    numberDisplayOptions?: NumberFormatOptions;
     /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
     customLayers?: CustomLayerDataType[];
     /** Enable graph download option as png */
@@ -3952,14 +3882,6 @@ declare interface Props_33 {
     bottomMargin?: number;
     /** Padding between bars */
     barPadding?: number;
-    /** Suffix for values of the lines */
-    lineSuffix?: string;
-    /** Suffix for values of the bars */
-    barSuffix?: string;
-    /** Prefix for values of the lines */
-    linePrefix?: string;
-    /** Prefix for values of the bars */
-    barPrefix?: string;
     /** Truncate labels by specified length */
     truncateBy?: number;
     /** Number of ticks on the axis */
@@ -3984,10 +3906,10 @@ declare interface Props_33 {
     naLabel?: string;
     /** Toggles if the graph animates in when loaded.  */
     animate?: boolean | AnimateDataType;
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
+    /** Configuration options for lines controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    lineNumberDisplayOptions?: NumberFormatOptions;
+    /** Configuration options for bars controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    barNumberDisplayOptions?: NumberFormatOptions;
     /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
     customLayers?: CustomLayerDataType[];
     /** Enable graph download option as png */
@@ -4057,10 +3979,6 @@ declare interface Props_34 {
     barPadding?: number;
     /** Spacing between the left and right bars */
     centerGap?: number;
-    /** Prefix for values */
-    prefix?: string;
-    /** Suffix for values */
-    suffix?: string;
     /** Maximum value for the chart */
     maxValue?: number;
     /** Minimum value for the chart */
@@ -4087,10 +4005,8 @@ declare interface Props_34 {
     naLabel?: string;
     /** Toggles if the graph animates in when loaded.  */
     animate?: boolean | AnimateDataType;
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    numberDisplayOptions?: NumberFormatOptions;
     /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
     customLayers?: CustomLayerDataType[];
     /** Configures playback and slider controls for animating the chart over time. The data must have a key date for it to work properly. */
@@ -4184,10 +4100,8 @@ declare interface Props_35 {
     showTicks?: boolean;
     /** Toggle visibility of axis line for the  main axis. Only applicable if `graphType` is `barGraph`. */
     hideAxisLine?: boolean;
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    numberDisplayOptions?: NumberFormatOptions;
     /** Enable graph download option as png */
     graphDownload?: boolean;
     /** Enable data download option as a csv */
@@ -4259,10 +4173,6 @@ declare interface Props_36 {
     minBarThickness?: number;
     /** Maximum number of bars shown in the graph */
     maxNumberOfBars?: number;
-    /** Prefix for values */
-    prefix?: string;
-    /** Suffix for values */
-    suffix?: string;
     /** Maximum value for the chart */
     maxValue?: number;
     /** Minimum value for the chart */
@@ -4299,10 +4209,8 @@ declare interface Props_36 {
     filterNA?: boolean;
     /** Toggles if the graph animates in when loaded.  */
     animate?: boolean | AnimateDataType;
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    numberDisplayOptions?: NumberFormatOptions;
     /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
     customLayers?: CustomLayerDataType[];
     /** Enable graph download option as png */
@@ -4376,10 +4284,6 @@ declare interface Props_37 {
     nodePadding?: number;
     /** Thickness of each node */
     nodeWidth?: number;
-    /** Prefix for values */
-    prefix?: string;
-    /** Suffix for values */
-    suffix?: string;
     /** Truncate labels by specified length */
     truncateBy?: number;
     /** Title of the source */
@@ -4400,10 +4304,8 @@ declare interface Props_37 {
     sortNodes?: 'asc' | 'desc' | 'mostReadable' | 'none';
     /** Toggles if the graph animates in when loaded.  */
     animate?: boolean | AnimateDataType;
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    numberDisplayOptions?: NumberFormatOptions;
     /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
     customLayers?: CustomLayerDataType[];
     /** Enable graph download option as png */
@@ -4503,10 +4405,8 @@ declare interface Props_38 {
     curveType?: 'linear' | 'curve';
     /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */
     resetSelectionOnDoubleClick?: boolean;
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
+    /** Configuration options for controlling number formatting, localization, precision, and zero padding. */
+    numberDisplayOptions?: Omit<NumberFormatOptions, 'suffix' | 'prefix'>;
     /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
     customLayers?: CustomLayerDataType[];
     /** Enable graph download option as png */
@@ -4605,10 +4505,6 @@ declare interface Props_4 {
     maxNumberOfBars?: number;
     /** Radius of the dots */
     radius?: number;
-    /** Prefix for values */
-    prefix?: string;
-    /** Suffix for values */
-    suffix?: string;
     /** Maximum value for the chart */
     maxValue?: number;
     /** Minimum value for the chart */
@@ -4649,10 +4545,8 @@ declare interface Props_4 {
     filterNA?: boolean;
     /** Toggles if the graph animates in when loaded.  */
     animate?: boolean | AnimateDataType;
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    numberDisplayOptions?: NumberFormatOptions;
     /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
     customLayers?: CustomLayerDataType[];
     /** Configures playback and slider controls for animating the chart over time. The data must have a key date for it to work properly. */
@@ -4880,10 +4774,6 @@ declare interface Props_5 {
     topMargin?: number;
     /** Bottom margin of the graph */
     bottomMargin?: number;
-    /** Prefix for values */
-    prefix?: string;
-    /** Suffix for values */
-    suffix?: string;
     /** Maximum value for the radius of the circle */
     maxRadiusValue?: number;
     /** Minimum value for position of the circle */
@@ -4910,10 +4800,8 @@ declare interface Props_5 {
     dimmedOpacity?: number;
     /** Maximum radius of the circles  */
     radius?: number;
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    numberDisplayOptions?: NumberFormatOptions;
     /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
     customLayers?: CustomLayerDataType[];
     /** Enable graph download option as png */
@@ -5048,10 +4936,6 @@ declare interface Props_6 {
     topMargin?: number;
     /** Bottom margin of the graph */
     bottomMargin?: number;
-    /** Prefix for values of the lines */
-    linePrefixes?: [string, string];
-    /** Suffix for values of the lines */
-    lineSuffixes?: [string, string];
     /** Maximum value of the date for the chart */
     maxDate?: string | number;
     /** Minimum value of the date for the chart */
@@ -5082,10 +4966,10 @@ declare interface Props_6 {
     highlightAreaSettings?: HighlightAreaSettingsDataType[];
     /** Curve type for the line */
     curveType?: CurveTypes;
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding for left line. */
+    leftLineNumberDisplayOptions?: NumberFormatOptions;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding for right line. */
+    rightLineNumberDisplayOptions?: NumberFormatOptions;
     /** Defines how “NA” values should be displayed/labelled in the graph */
     naLabel?: string;
     /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
@@ -5250,10 +5134,6 @@ declare interface Props_7 {
     topMargin?: number;
     /** Bottom margin of the graph */
     bottomMargin?: number;
-    /** Prefix for values */
-    prefix?: string;
-    /** Suffix for values */
-    suffix?: string;
     /** Maximum value for the chart */
     maxValue?: number;
     /** Minimum value for the chart */
@@ -5298,10 +5178,8 @@ declare interface Props_7 {
     regressionLine?: boolean | string;
     /** Curve type for the line */
     curveType?: CurveTypes;
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    numberDisplayOptions?: NumberFormatOptions;
     /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
     customLayers?: CustomLayerDataType[];
     /** Enable graph download option as png */
@@ -5359,10 +5237,6 @@ declare interface Props_8 {
     topMargin?: number;
     /** Bottom margin of the graph */
     bottomMargin?: number;
-    /** Prefix for values */
-    prefix?: string;
-    /** Suffix for values */
-    suffix?: string;
     /** Maximum value for the chart */
     maxValue?: number;
     /** Minimum value for the chart */
@@ -5399,10 +5273,8 @@ declare interface Props_8 {
     regressionLine?: boolean | string;
     /** Curve type for the line */
     curveType?: CurveTypes;
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    numberDisplayOptions?: NumberFormatOptions;
     /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
     customLayers?: CustomLayerDataType[];
     /** Enable graph download option as png */
@@ -5470,10 +5342,6 @@ declare interface Props_9 {
     topMargin?: number;
     /** Bottom margin of the graph */
     bottomMargin?: number;
-    /** Prefix for values */
-    prefix?: string;
-    /** Suffix for values */
-    suffix?: string;
     /** Maximum value for the chart */
     maxValue?: number;
     /** Minimum value for the chart */
@@ -5516,10 +5384,8 @@ declare interface Props_9 {
     customHighlightAreaSettings?: CustomHighlightAreaSettingsDataType[];
     /** Curve type for the line */
     curveType?: CurveTypes;
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    numberDisplayOptions?: NumberFormatOptions;
     /** Defines how “NA” values should be displayed/labelled in the graph */
     naLabel?: string;
     /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
@@ -5729,10 +5595,6 @@ declare interface StackedBarChartProps {
     minBarThickness?: number;
     /** Maximum number of bars shown in the graph */
     maxNumberOfBars?: number;
-    /** Prefix for values */
-    prefix?: string;
-    /** Suffix for values */
-    suffix?: string;
     /** Maximum value for the chart */
     maxValue?: number;
     /** Minimum value for the chart */
@@ -5757,6 +5619,8 @@ declare interface StackedBarChartProps {
     barAxisTitle?: string;
     /** Defines how “NA” values should be displayed/labelled in the graph */
     naLabel?: string;
+    /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */
+    numberDisplayOptions?: NumberFormatOptions;
     /** Parameter to sort the data. If a number is provided, it refers to the index of the size array to determine which value to sort by. If set to total, it sorts by the sum of all the values. */
     sortParameter?: number | 'total';
     /** Sorting order for data. This is overwritten by labelOrder prop. */
@@ -5765,10 +5629,6 @@ declare interface StackedBarChartProps {
     filterNA?: boolean;
     /** Toggles if the graph animates in when loaded.  */
     animate?: boolean | AnimateDataType;
-    /** Specifies the number of decimal places to display in the value. */
-    precision?: number;
-    /** Locale for number formatting. Must matches what `Intl.NumberFormat` expects. */
-    locale?: string;
     /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
     customLayers?: CustomLayerDataType[];
     /** Configures playback and slider controls for animating the chart over time. The data must have a key date for it to work properly. */