@datarailsshared/dr_renderer 1.5.107 → 1.5.116

package/src/highcharts_renderer.js

@@ -14,6 +14,7 @@ const {
     GenericRenderingError,
     GenericComputationalError
 } = require('./errors');
+const optionsBuilders = require('./options');
 
 const mobileBrowserRegex = new RegExp([
     '(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)',
@@ -32,58 +33,9 @@ const EMPTY_ROW_N_KEYS = [[]];
 
 const NULL_VALUE = '[null]';
 
-const CHART_COLORS = {
-    BACKGROUND: '#fff',
-    TEXT: '#151a41',
-    LABEL: '#cfd7dd',
-    LABEL_SECOND: '#85889c',
-    DRILL_UP_FILL: '#eef3f6',
-    DRILL_BUTTON_COLOR_FILL: 'white',
-    DRILL_BUTTON_COLOR: '#6D6E6F',
-    DRILL_BUTTON_COLOR_HOVER: '#333333',
-    PLOT_BORDER: '#606063',
-    MINOR_GRID_LINE: '#505053',
-    TICK_COLOR: '#666',
-    LABELS_OLD: '#D7D7D8',
-    DATA_LABELS: '#B0B0B3',
-    CONTRAST_TEXT: '#F0F0F3',
-    LEGEND_BACKGROUND: 'rgba(0, 0, 0, 0.5)',
-    MASK: 'rgba(255,255,255,0.3)',
-};
+const CHART_COLORS = optionsBuilders.CHART_COLORS;
 
-const CHART_TYPES = {
-    LINE_CHART: 'line-chart',
-    LINE_CHART_SMOOTH: 'line-chart-smooth',
-    LINE_CHART_FORECAST: 'line-chart-forecast',
-    COLUMN_CHART: 'column-chart',
-    COLUMN_CHART_STACKED: 'column-chart-stacked',
-    COMBO_CHART: 'combo-chart',
-    COMBO_COLUMN_CHART: 'combo-column-chart',
-    COMBO_STACKED_CHART: 'combo-stacked-chart',
-    BAR_CHART: 'bar-chart',
-    BAR_CHART_STACKED: 'bar-chart-stacked',
-    SCATTER_CHART: 'scatter-chart',
-    AREA_CHART: 'area-chart',
-    AREA_CHART_SMOOTH: 'area-chart-smooth',
-    TABLE_ONLY: 'table_only',
-    POLYGON_CHART: 'polygon-chart',
-    PIE_CHART: 'pie-chart',
-    PIE_CHART_DRILLDOWN: 'pie-chart-drilldown',
-    GAUGE_SOLID_CHART: 'gauge-solid-chart',
-    GAUGE_CHART: 'gauge-chart',
-    GAUGE_CHART_ENHANCED: 'gauge-chart-enhanced',
-    GAUGE_CHART_DYNAMIC_GOAL: 'gauge-chart-dynamic-goal',
-    GAUGE_CHART_CATEGORIES_SUMMARY: 'gauge-chart-categories-summary',
-    KPI_WIDGET: 'kpi-widget',
-    SMART_KPI: 'smart-kpi',
-    TEXT_WIDGET: 'text-widget',
-    WATERFALL_BREAKDOWN: 'waterfall-chart-breakdown',
-    WATERFALL_WALKTHROUGH: 'waterfall-chart-walkthrough',
-    PUBLISHED_ITEM: 'published_item',
-    RICH_TEXT: 'rich_text',
-    EXCEL_VIEWER: 'excel_viewer',
-    DONUT_CHART: 'donut-chart',
-}
+const CHART_TYPES = optionsBuilders.CHART_TYPES;
 
 const HIGHCHARTS_CONSTANTS = {
     delimer: helpers.DELIMER,
@@ -110,59 +62,11 @@ const HIGHCHARTS_CONSTANTS = {
     MAX_SELECTED_ITEMS_BEFORE_SHOWING_COUNTER: 3,
 }
 
-const SUBOPTIONS_FONTS = [
-    'Arial',
-    'Arial Black',
-    'Comic Sans MS',
-    'Courier New',
-    'Helvetica',
-    'Impact',
-    'Nunito Sans',
-    'Tahoma',
-    'Times New Roman',
-    'Verdana',
-    'Poppins'
-];
-
-const HIGHCHARTS_FONT_FAMILY = 'Poppins';
-
-const HIGHCHARTS_FONT_FAMILY_CSS = 'Poppins, sans-serif';
-
-const TOOLTIP_DEFAULT_SETTINGS = {
-    FONT_COLOR: '#545a6b',
-    FONT_SIZE: '12',
-    FONT_FAMILY: HIGHCHARTS_FONT_FAMILY,
-};
-
-const TOOLTIP_DEFAULT_OPTIONS = {
-    borderColor: CHART_COLORS.BACKGROUND,
-    shadow: {
-        color: '#9199b4',
-        width: 10,
-        opacity: 0.05
-    },
-    style: {
-        fontSize: TOOLTIP_DEFAULT_SETTINGS.FONT_SIZE,
-        fontFamily: TOOLTIP_DEFAULT_SETTINGS.FONT_FAMILY,
-        color: TOOLTIP_DEFAULT_SETTINGS.FONT_COLOR,
-    },
-    enabled: true,
-};
+const HIGHCHARTS_FONT_FAMILY_CSS = optionsBuilders.HIGHCHARTS_FONT_FAMILY_CSS;
 
-const LABEL_DEFAULT_SETTINGS = {
-    FONT_COLOR: CHART_COLORS.TEXT,
-    FONT_SIZE: '11',
-    FONT_FAMILY: HIGHCHARTS_FONT_FAMILY,
-};
+const TOOLTIP_DEFAULT_OPTIONS = optionsBuilders.TOOLTIP_DEFAULT_OPTIONS;
 
-const LABEL_DEFAULT_OPTIONS = {
-    style: {
-        fontSize: LABEL_DEFAULT_SETTINGS.FONT_SIZE,
-        fontFamily: LABEL_DEFAULT_SETTINGS.FONT_FAMILY,
-        fontWeight: 'normal',
-    },
-    color: LABEL_DEFAULT_SETTINGS.FONT_COLOR,
-};
+const LABEL_DEFAULT_OPTIONS = optionsBuilders.LABEL_DEFAULT_OPTIONS;
 
 const CHART_AXIS_DEFAULT_LABEL = 'Axis (Category)';
 
@@ -245,6 +149,184 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
     }
 
+    /**
+     * Sanitizes series data for 100% stacking by converting negative values to 0.
+     * @param {Array<Object>} series - Array of Highcharts series objects
+     * @returns {Array<Object>} Sanitized series with negative y-values set to 0
+     * @private
+     */
+    const _sanitizeDataForPercentStacking = (series) => {
+        return series.map(s => ({
+            ...s,
+            data: s.data.map(point => {
+                const y = typeof point === 'object' ? point.y : point;
+                return typeof point === 'object'
+                    ? { ...point, y: Math.max(0, y) }
+                    : Math.max(0, y);
+            })
+        }));
+    };
+
+    /**
+     * Calculates the sum of positive values only for a column (x-axis total).
+     * Used for 100% stacked charts to calculate percentages excluding negative values.
+     * @param {Object} pivotData - The pivot data model
+     * @param {Array} colKey - The column key to sum values for
+     * @returns {number} Sum of positive values for all rows in the specified column
+     * @private
+     */
+    const _getPositiveOnlyAxisTotal = (pivotData, colKey) => {
+        let total = 0;
+        const rowKeys = pivotData.getRowKeys();
+        if (rowKeys.length === 0) {
+            // No row keys, get the total value directly
+            const val = pivotData.getAggregator([], colKey).value() || 0;
+            return val > 0 ? val : 0;
+        }
+        rowKeys.forEach(rk => {
+            const val = pivotData.getAggregator(rk, colKey).value() || 0;
+            if (val > 0) total += val;
+        });
+        return total;
+    };
+
+    /**
+     * Calculates the sum of positive values only for a row (data series total).
+     * Used for 100% stacked charts to calculate percentages excluding negative values.
+     * @param {Object} pivotData - The pivot data model
+     * @param {Array} rowKey - The row key to sum values for
+     * @returns {number} Sum of positive values for all columns in the specified row
+     * @private
+     */
+    const _getPositiveOnlySeriesTotal = (pivotData, rowKey) => {
+        let total = 0;
+        const colKeys = pivotData.getColKeys();
+        colKeys.forEach(ck => {
+            const val = pivotData.getAggregator(rowKey, ck).value() || 0;
+            if (val > 0) total += val;
+        });
+        return total;
+    };
+
+    /**
+     * Creates a data label formatter for 100% stacked charts.
+     * Calculates percentages using pivot data with negative values omitted.
+     * @param {Object} pivotData - The pivot data model
+     * @param {Object} additionOptions - Chart options
+     * @param {Object} opts - Additional options
+     * @returns {Function} Formatter function for data labels
+     * @private
+     */
+    const _createPercentStackedDataLabelFormatter = (pivotData, additionOptions, opts) => {
+        return function() {
+            const labelOptions = lodash.get(additionOptions, 'label', {});
+            const value = Math.max(0, this.y);
+
+            let series_name = highchartsRenderer.getSeriesNameInFormatterContext(this);
+            let rows = series_name.split(highchartsRenderer.delimer);
+            let cols = highchartsRenderer.getColsInFormatterContext(this);
+
+            if (pivotData.rowAttrs.length === 0) {
+                rows = [];
+            }
+            if (!lodash.isArray(cols)) {
+                cols = [cols];
+            }
+
+            const percentageArray = [];
+
+            if (labelOptions.show_out_of_x_axis) {
+                const axisTotal = _getPositiveOnlyAxisTotal(pivotData, cols);
+                if (value && axisTotal) {
+                    percentageArray.push(Math.round(value / axisTotal * 100) + '%');
+                }
+            }
+
+            if (labelOptions.show_out_of_data_series) {
+                const seriesTotal = _getPositiveOnlySeriesTotal(pivotData, rows);
+                if (value && seriesTotal) {
+                    percentageArray.push(Math.round(value / seriesTotal * 100) + '%');
+                }
+            }
+
+            const percentageWrapper = percentageArray.length ? `(${percentageArray.join(', ')})` : '';
+
+            let formattedValue = '';
+            if (labelOptions.show_value !== false) {
+                try {
+                    const aggr = pivotData.getAggregator(rows, cols);
+                    formattedValue = $.pivotUtilities.getFormattedNumber(this.y, aggr, opts, true);
+                } catch (err) {
+                    formattedValue = this.y;
+                }
+            }
+
+            return String(formattedValue) + percentageWrapper;
+        };
+    };
+
+    /**
+     * Creates a tooltip formatter for 100% stacked charts.
+     * Calculates percentages using pivot data with negative values omitted.
+     * @param {Object} pivotData - The pivot data model
+     * @param {Object} opts - Chart options
+     * @returns {Function} Formatter function for tooltips
+     * @private
+     */
+    const _createPercentStackedTooltipFormatter = (pivotData, opts) => {
+        const tooltipOptions = lodash.get(opts, 'chartOptions.tooltips') || {};
+        let percentageLabels = { axis: CHART_AXIS_DEFAULT_LABEL, legend: CHART_LEGEND_DEFAULT_LABEL };
+        if (lodash.has(opts, 'chartLabels')) {
+            percentageLabels = opts.chartLabels;
+        }
+
+        return function() {
+            const y = parseFloat(this.y);
+            const value = Math.max(0, y); // Treat negative as 0 for percentage
+
+            let series_name = highchartsRenderer.getSeriesNameInFormatterContext(this);
+            let rows = series_name.split(highchartsRenderer.delimer);
+            let cols = highchartsRenderer.getColsInFormatterContext(this);
+
+            if (pivotData.rowAttrs.length === 0) { rows = []; }
+            if (!lodash.isArray(cols)) { cols = [cols]; }
+
+            try {
+                const aggr = pivotData.getAggregator(rows, cols);
+                let formatted_value = $.pivotUtilities.getFormattedNumber(y, aggr, opts);
+                let wrappedFormattedValue = highchartsRenderer.getSpanWrapper(formatted_value);
+
+                const category_text = tooltipOptions.show_x_axis ? `<b>${cols[0] || this.key}</b>` : '';
+                const series_text = tooltipOptions.show_data_series 
+                    ? `<br/><span style="color: ${this.series.color};">\u200E${this.series.name}</span>: ` 
+                    : '';
+                wrappedFormattedValue = tooltipOptions.show_value ? wrappedFormattedValue : '';
+
+                let to_return = category_text + series_text + wrappedFormattedValue;
+
+                const percentageArray = [];
+                if (tooltipOptions.show_out_of_x_axis) {
+                    const axisTotal = _getPositiveOnlyAxisTotal(pivotData, cols);
+                    if (value && axisTotal) {
+                        percentageArray.push(`% Out of ${percentageLabels.axis}: ${Math.round(value / axisTotal * 100)}%`);
+                    }
+                }
+                if (tooltipOptions.show_out_of_data_series) {
+                    const seriesTotal = _getPositiveOnlySeriesTotal(pivotData, rows);
+                    if (value && seriesTotal) {
+                        percentageArray.push(`% Out of ${percentageLabels.legend}: ${Math.round(value / seriesTotal * 100)}%`);
+                    }
+                }
+                if (percentageArray.length) {
+                    to_return += `<br/>` + percentageArray.join(', ');
+                }
+                return to_return;
+            } catch (err) {
+                return this.y;
+            }
+        };
+    };
+
     highchartsRenderer.hasFeature = function(featureFlagKey) {
         return lodash.includes(highchartsRenderer.features || [], featureFlagKey);
     }
@@ -439,17 +521,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return  {};
     };
 
-    const chartHasVerticalDataLabelsOption = (type) => {
-        return ![
-            highchartsRenderer.CHART_TYPES.LINE_CHART,
-            highchartsRenderer.CHART_TYPES.LINE_CHART_SMOOTH,
-            highchartsRenderer.CHART_TYPES.AREA_CHART,
-            highchartsRenderer.CHART_TYPES.AREA_CHART_SMOOTH,
-            highchartsRenderer.CHART_TYPES.BAR_CHART,
-            highchartsRenderer.CHART_TYPES.BAR_CHART_STACKED,
-        ].includes(type);
-    };
-
     const objectCopyJsonMethod = function (o) {
         if(!o) return 0;
         return JSON.parse(JSON.stringify(o));
@@ -3169,6 +3240,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             chartOptions.colors = opts.paletteOptions.dashboardPalette.colors;
         }
         chartOptions.series = highchartsRenderer.ptCreateColumnSeries(pivotData, chartOptions.colors, null, true, true, additionOptions, opts, chartOptions, chartType);
+
         //chartOptions.drilldown = {}
         if (opts.selectedPoint) {
             seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
@@ -3181,6 +3253,114 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
+    /**
+     * Renders a 100% stacked column chart where each bar represents 100%
+     * and segments show their percentage contribution.
+     * @param {Object} pivotData - The pivot data model
+     * @param {Object} opts - Chart options
+     * @param {Function} _drilldownFunc - Optional drilldown callback
+     * @param {string} chartType - The chart type identifier
+     * @returns {Object} The rendered chart element
+     */
+    highchartsRenderer.ptRenderStackedPercentColumn = function (pivotData, opts, _drilldownFunc, chartType) {
+        var chartOptions = {};
+        var rowAttrs = pivotData.rowAttrs;
+        var additionOptions = opts.chartOptions ? opts.chartOptions : highchartsRenderer.getDefaultValueForChart(optionsBuilders.CHART_TYPES.COLUMN_CHART_STACKED_PERCENT);
+
+        chartOptions.chart = {
+            type: 'column',
+            zoomType: 'x',
+        };
+        if (disableAnimation) {
+            chartOptions.chart.animation = false;
+        }
+        highchartsRenderer.setTitleAndSubTitle(chartOptions, opts, additionOptions);
+
+        // Y-axis always 0-100% for percent stacking
+        chartOptions.yAxis = {
+            min: 0,
+            max: 100,
+            title: {
+                text: additionOptions && additionOptions.axisY ? additionOptions.axisY.name : ''
+            },
+            stackLabels: {
+                enabled: false // No stack labels for 100% stacked
+            },
+            labels: {
+                formatter: function() { return this.value + '%'; }
+            }
+        };
+
+        chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, rowAttrs.length, false);
+
+        chartOptions.tooltip = {
+            formatter: _createPercentStackedTooltipFormatter(pivotData, opts),
+            valueDecimals: 2,
+        };
+
+        if (additionOptions && additionOptions.chart) {
+            chartOptions.colors = highchartsRenderer.getColorsWithOffset(additionOptions.chart.colors_offset);
+        }
+
+        chartOptions.plotOptions = {
+            cropThreshold: 1000,
+            column: {
+                stacking: 'percent',
+                dataLabels: {
+                    allowOverlap: additionOptions && additionOptions.label ? additionOptions.label.overlap : false,
+                    "style": highchartsRenderer.getDataLabelsStyle(additionOptions, {
+                        textOutline: additionOptions && additionOptions.label && additionOptions.label.shadow ?
+                            '1px contrast' : null
+                    }),
+                    color: 'contrast'
+                }
+            },
+            series: {
+                animation: !disableAnimation
+            }
+        };
+
+        chartOptions.plotOptions.column = highchartsRenderer.getDataLabelsOptions(additionOptions, chartOptions.plotOptions.column);
+
+        chartOptions.xAxis = {
+            type: 'category',
+            crosshair: true,
+            min: 0,
+            title: {
+                text : additionOptions && additionOptions.axisX ? additionOptions.axisX.name : '',
+            }
+        };
+        chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
+        if (lodash.get(opts, 'paletteOptions.widgetPalette', null)) {
+            const mc_palette = lodash.find(lodash.get(opts.paletteOptions, 'monochromePalettes', []), { selected: true });
+            chartOptions.colors = mc_palette ? mc_palette.colors : opts.paletteOptions.widgetPalette;
+        } else if (lodash.get(opts, 'paletteOptions.dashboardPalette.colors', null)) {
+            chartOptions.colors = opts.paletteOptions.dashboardPalette.colors;
+        }
+
+        chartOptions.series = highchartsRenderer.ptCreateColumnSeries(pivotData, chartOptions.colors, null, true, true, additionOptions, opts, chartOptions, chartType);
+
+        // Sanitize series data for 100% stacking (convert negative values to 0)
+        chartOptions.series = _sanitizeDataForPercentStacking(chartOptions.series);
+
+        // Override dataLabels formatter for each series to use pivot-based calculation
+        // with positive-only totals (negatives treated as 0)
+        chartOptions.series.forEach(series => {
+            series.dataLabels = series.dataLabels || {};
+            series.dataLabels.formatter = _createPercentStackedDataLabelFormatter(pivotData, additionOptions, opts);
+        });
+
+        if (opts.selectedPoint) {
+            seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
+        }
+
+        highchartsRenderer.handleGridLines(additionOptions, chartOptions);
+
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
+
+        return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
+    };
+
     highchartsRenderer.ptRenderBar = function (pivotData, opts) {
         var chartOptions = {};
         var rowAttrs = pivotData.rowAttrs;
@@ -3379,6 +3559,115 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
+    /**
+     * Renders a 100% stacked bar chart where each bar represents 100%
+     * and segments show their percentage contribution.
+     * @param {Object} pivotData - The pivot data model
+     * @param {Object} opts - Chart options
+     * @returns {Object} The rendered chart element
+     */
+    highchartsRenderer.ptRenderStackedPercentBar = function (pivotData, opts) {
+        var chartOptions = {};
+        var rowAttrs = pivotData.rowAttrs;
+        var additionOptions = opts.chartOptions ? opts.chartOptions : highchartsRenderer.getDefaultValueForChart(optionsBuilders.CHART_TYPES.BAR_CHART_STACKED_PERCENT);
+
+        const labelStyle = lodash.merge(
+            LABEL_DEFAULT_OPTIONS.style,
+            { color: lodash.get(additionOptions, `${ highchartsRenderer.getLabelOptionKey(additionOptions) }.font_color`) || LABEL_DEFAULT_OPTIONS.color },
+            highchartsRenderer.getDataLabelsStyle(additionOptions)
+        );
+
+        chartOptions.chart = {
+            type: 'bar',
+            zoomType: 'x'
+        };
+        if (disableAnimation) {
+            chartOptions.chart.animation = false;
+        }
+        highchartsRenderer.setTitleAndSubTitle(chartOptions, opts, additionOptions);
+
+        // Y-axis always 0-100% for percent stacking
+        chartOptions.yAxis = {
+            min: 0,
+            max: 100,
+            title: {
+                text: additionOptions && additionOptions.axisY ? additionOptions.axisY.name : ''
+            },
+            stackLabels: {
+                enabled: false // No stack labels for 100% stacked
+            },
+            labels: {
+                formatter: function() { return this.value + '%'; }
+            }
+        };
+
+        chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, rowAttrs.length, false);
+        chartOptions.legend.reversed = true;
+
+        chartOptions.tooltip = {
+            formatter: _createPercentStackedTooltipFormatter(pivotData, opts)
+        };
+
+        if (additionOptions && additionOptions.chart) {
+            chartOptions.colors = highchartsRenderer.getColorsWithOffset(additionOptions.chart.colors_offset);
+        }
+
+        chartOptions.plotOptions = {
+            series: {
+                animation: !disableAnimation,
+                stacking: 'percent',
+                dataLabels: {
+                    allowOverlap: additionOptions && additionOptions.label ? additionOptions.label.overlap : false,
+                    enabled: additionOptions && additionOptions.label ? additionOptions.label.show : false,
+                    style: labelStyle
+                }
+            }
+        };
+
+        if (opts.drillDownListFunc) {
+            chartOptions.plotOptions.series.cursor = 'pointer';
+            chartOptions.plotOptions.series.point = {
+                events: {
+                    click: opts.drillDownListFunc
+                }
+            };
+        }
+
+        chartOptions.xAxis = {
+            categories: highchartsRenderer.getFormattedColKeys(pivotData, null),
+            title: {
+                text: additionOptions && additionOptions.axisX ? additionOptions.axisX.name : ''
+            },
+        };
+        chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
+        if (lodash.get(opts, 'paletteOptions.widgetPalette', null)) {
+            const mc_palette = lodash.find(lodash.get(opts.paletteOptions, 'monochromePalettes', []), { selected: true });
+            chartOptions.colors = mc_palette ? mc_palette.colors : opts.paletteOptions.widgetPalette;
+        } else if (lodash.get(opts, 'paletteOptions.dashboardPalette.colors', null)) {
+            chartOptions.colors = opts.paletteOptions.dashboardPalette.colors;
+        }
+        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, additionOptions, opts, chartOptions);
+
+        // Sanitize series data for 100% stacking (convert negative values to 0)
+        chartOptions.series = _sanitizeDataForPercentStacking(chartOptions.series);
+
+        // Override dataLabels formatter for each series to use pivot-based calculation
+        // with positive-only totals (negatives treated as 0)
+        chartOptions.series.forEach(series => {
+            series.dataLabels = series.dataLabels || {};
+            series.dataLabels.formatter = _createPercentStackedDataLabelFormatter(pivotData, additionOptions, opts);
+        });
+
+        if (opts.selectedPoint) {
+            seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
+        }
+        highchartsRenderer.handleGridLines(additionOptions, chartOptions);
+
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
+
+        return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
+    };
+
     highchartsRenderer.ptRenderWaterfallBreakdown = function (pivotData, opts, drilldownFunc, chartType) {
         let chartOptions = {};
         const additionOptions = opts.chartOptions
@@ -5861,1535 +6150,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return highchartsRenderer.chartsTypesInfo[type] ? highchartsRenderer.chartsTypesInfo[type].legendName : CHART_LEGEND_DEFAULT_LABEL;
     };
 
-    const suboptionsFontSizeValues = (lodash.map(lodash.fill(new Array(19), null), function (item, index) {
-        const fontValue = index + 6;
-        return { label: fontValue, value: fontValue }
-    }));
-
-    highchartsRenderer.suboptions = {
-        'widget_library': {
-            is_hidden: true,
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Widget Library',
-            category_type: 'widget_library',
-            elements: [
-                {
-                    element_type: 'input',
-                    value_name: 'categories',
-                    element_label: 'Category',
-                    default_value: ''
-                },
-                {
-                    element_type: 'textarea',
-                    value_name: 'description',
-                    element_label: 'Description',
-                    default_value: ''
-                },
-                {
-                    element_type: 'tag',
-                    element_options: {
-                        add_new_tag: true,
-                        searchable: true,
-                        multiple: true
-                    },
-                    value_name: 'tags',
-                    element_label: 'Labels',
-                    default_value: []
-                }
-            ]
-        },
-        'table_options': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Table',
-            category_type: 'table_options',
-            elements: [
-                {
-                    element_type: 'input',
-                    value_name: 'table_colors_offset',
-                    element_label: 'Colors offset',
-                    default_value: 0
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Column totals',
-                    value_name: 'show_column_total',
-                    default_value: true
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Row totals',
-                    value_name: 'show_row_total',
-                    default_value: true
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Subtotals for columns',
-                    value_name: 'show_subtotals_for_columns',
-                    default_value: false
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Subtotals for rows',
-                    value_name: 'show_subtotals_for_rows',
-                    default_value: false
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Subtotals in brackets',
-                    value_name: 'show_subtotals_in_brackets',
-                    default_value: false
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Transpose',
-                    value_name: 'transpose_table',
-                    default_value: false
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Start collapsed rows <small>(old table only)</small>',
-                    value_name: 'start_collapsed_rows',
-                    default_value: false
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Start collapsed columns <small>(old table only)</small>',
-                    value_name: 'start_collapsed_columns',
-                    default_value: false
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Colorize headers',
-                    value_name: 'colorize_headers',
-                    default_value: true
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Remove underscores',
-                    value_name: 'remove_underscores',
-                    default_value: true
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Use big data table',
-                    value_name: 'use_handsOnTable',
-                    default_value: false
-                },
-                {
-                  element_type: 'checkbox',
-                  element_label: 'Use new table design',
-                  value_name: 'use_new_table_design',
-                  default_value: true
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Null values appear as blank',
-                    value_name: 'hide_nulls_in_headers',
-                    default_value: true
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Show All',
-                    value_name: 'show_all',
-                    default_value: false
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Freeze panes <small>(old table only)</small>',
-                    value_name: 'freeze_panes',
-                    default_value: false
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Eliminate grand totals for calculated values',
-                    value_name: 'eliminate_calc_totals',
-                    default_value: false
-                },
-            ]
-        },
-        'table_design_options': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Table design',
-            category_type: 'table_design_options',
-            elements: [
-                {
-                    element_type: 'devider',
-                    element_label: 'Columns'
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'columns_font_style',
-                    element_label: 'Font style',
-                    element_options: SUBOPTIONS_FONTS,
-                    default_value: 'Poppins'
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'columns_font_size',
-                    element_label: 'Font size',
-                    element_options: suboptionsFontSizeValues,
-                    default_value: '10'
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'columns_align_text',
-                    element_label: 'Alignment',
-                    element_options: [
-                        {label: 'Left', value: 'left'},
-                        {label: 'Center', value: 'center'},
-                        {label: 'Right', value: 'right'}
-                    ],
-                    default_value: 'left'
-                },
-                {
-                    element_type: 'devider',
-                    element_label: 'Rows'
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'rows_font_style',
-                    element_label: 'Font style',
-                    element_options: SUBOPTIONS_FONTS,
-                    default_value: 'Poppins'
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'rows_font_size',
-                    element_label: 'Font size',
-                    element_options: suboptionsFontSizeValues,
-                    default_value: '10'
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'rows_align_text',
-                    element_label: 'Alignment',
-                    element_options: [
-                        {label: 'Left', value: 'left'},
-                        {label: 'Center', value: 'center'},
-                        {label: 'Right', value: 'right'}
-                    ],
-                    default_value: 'left'
-                },
-                {
-                    element_type: 'devider',
-                    element_label: 'Values'
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'values_font_style',
-                    element_label: 'Font style',
-                    element_options: SUBOPTIONS_FONTS,
-                    default_value: 'Poppins'
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'values_font_size',
-                    element_label: 'Font size',
-                    element_options: suboptionsFontSizeValues,
-                    default_value: '10'
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'values_align_text',
-                    element_label: 'Alignment',
-                    element_options: [
-                        {label: 'Left', value: 'left'},
-                        {label: 'Center', value: 'center'},
-                        {label: 'Right', value: 'right'}
-                    ],
-                    default_value: 'left'
-                },
-                {
-                    element_type: 'devider',
-                    element_label: 'Totals'
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'totals_font_style',
-                    element_label: 'Font style',
-                    element_options: SUBOPTIONS_FONTS,
-                    default_value: 'Poppins'
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'totals_font_size',
-                    element_label: 'Font size',
-                    element_options: suboptionsFontSizeValues,
-                    default_value: '10'
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'totals_align_text',
-                    element_label: 'Alignment',
-                    element_options: [
-                        {label: 'Left', value: 'left'},
-                        {label: 'Center', value: 'center'},
-                        {label: 'Right', value: 'right'}
-                    ],
-                    default_value: 'left'
-                },
-            ]
-        },
-        'table_options_transpose': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Table',
-            category_type: 'table_options',
-            elements: [
-                {
-                    element_type: 'input',
-                    value_name: 'table_colors_offset',
-                    element_label: 'Colors offset',
-                    default_value: 0
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Column totals',
-                    value_name: 'show_column_total',
-                    default_value: true
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Row totals',
-                    value_name: 'show_row_total',
-                    default_value: true
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Subtotals for columns',
-                    value_name: 'show_subtotals_for_columns',
-                    default_value: false
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Subtotals for rows',
-                    value_name: 'show_subtotals_for_rows',
-                    default_value: false
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Subtotals in brackets',
-                    value_name: 'show_subtotals_in_brackets',
-                    default_value: false
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Transpose',
-                    value_name: 'transpose_table',
-                    default_value: false
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Start collapsed rows <small>(old table only)</small>',
-                    value_name: 'start_collapsed_rows',
-                    default_value: false
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Start collapsed columns <small>(old table only)</small>',
-                    value_name: 'start_collapsed_columns',
-                    default_value: false
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Colorize headers',
-                    value_name: 'colorize_headers',
-                    default_value: true
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Remove underscores',
-                    value_name: 'remove_underscores',
-                    default_value: true
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Use big data table',
-                    value_name: 'use_handsOnTable',
-                    default_value: false
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Use new table design',
-                    value_name: 'use_new_table_design',
-                    default_value: true
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Null values appear as blank',
-                    value_name: 'hide_nulls_in_headers',
-                    default_value: true
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Freeze panes <small>(old table only)</small>',
-                    value_name: 'freeze_panes',
-                    default_value: false
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Eliminate grand totals for calculated values',
-                    value_name: 'eliminate_calc_totals',
-                    default_value: false
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Show data in dashboard if more than 1000 rows',
-                    value_name: 'show_more_than_thousand_rows',
-                    default_value: false,
-                    showFn: chartType => chartType === highchartsRenderer.CHART_TYPES.TABLE_ONLY,
-                    disabled_fn: (value) => !!value.use_handsOnTable
-                },
-            ]
-        },
-        'table_options_gauge': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Table',
-            category_type: 'table_options',
-            elements: [
-                {
-                    element_type: 'input',
-                    value_name: 'table_colors_offset',
-                    element_label: 'Colors offset',
-                    default_value: 0
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Column totals',
-                    value_name: 'show_column_total',
-                    default_value: true
-                }
-            ]
-        },
-        'value': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Value',
-            category_type: 'value',
-            elements: [{
-                element_type: 'radio',
-                value_name: 'value',
-                element_label: 'Aggregated',
-                element_options: [
-                    {label: 'Avg', value: 'Avg'},
-                    {label: 'Max', value: 'Max'},
-                    {label: 'Min', value: 'Min'},
-                    {label: 'Sum', value: 'Sum'},
-                    {label: 'Unique', value: 'Unique'}
-                ],
-                default_value: 'Sum'
-            }]
-        },
-        'range': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Range',
-            category_type: 'range',
-            elements: [{
-                element_type: 'input',
-                value_name: 'low',
-                element_label: 'Low %',
-                default_value: 10,
-                value_type: 'number'
-            },
-                {
-                    element_type: 'input',
-                    value_name: 'medium',
-                    element_label: 'Medium %',
-                    default_value: 50,
-                    value_type: 'number'
-                },
-                {
-                    element_type: 'input',
-                    value_name: 'high',
-                    element_label: 'High %',
-                    default_value: 90,
-                    value_type: 'number'
-                },
-                {
-                    element_type: 'input',
-                    value_name: 'max',
-                    element_label: 'Max',
-                    default_value: 1000,
-                    value_type: 'number'
-                }
-            ]
-        },
-        'name': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Name',
-            category_type: 'name',
-            elements: [{
-                element_type: 'input',
-                value_name: 'name',
-                element_label: 'Name',
-                default_value: ''
-            }]
-        },
-        'subtitle': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Subtitle',
-            category_type: 'subtitle',
-            elements: [{
-                element_type: 'input',
-                value_name: 'subtitle',
-                element_label: 'Subtitle',
-                default_value: ''
-            }]
-        },
-        'chart': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Chart',
-            category_type: 'chart',
-            elements: [
-                {
-                    element_type: 'input',
-                    value_name: 'colors_offset',
-                    element_label: 'Colors offset',
-                    default_value: 0
-                },
-                {
-                    element_type: 'radio',
-                    value_name: 'zoom_type',
-                    element_label: 'Zoom type',
-                    element_options: [
-                        {label: 'None', value: 'None'},
-                        {label: 'x', value: 'x'},
-                        {label: 'y', value: 'y'},
-                        {label: 'xy', value: 'xy'}
-                    ],
-                    default_value: 'None'
-                },
-                {
-                    element_type: 'checkbox',
-                    value_name: 'show',
-                    element_label: 'Show grid',
-                    default_value: true
-                },
-                {
-                    element_type: 'checkbox',
-                    value_name: 'dislay_empty_values',
-                    element_label: 'Display empty values',
-                    default_value: false
-                },
-            ]
-        },
-        'chart_grid': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Chart',
-            category_type: 'chart',
-            elements: [{
-                element_type: 'input',
-                value_name: 'colors_offset',
-                element_label: 'Colors offset',
-                default_value: 0
-            }, {
-                element_type: 'checkbox',
-                value_name: 'show',
-                element_label: 'Show grid',
-                default_value: true
-            }, {
-                element_type: 'checkbox',
-                value_name: 'showAllLegends',
-                element_label: 'Show legends over 10',
-                default_value: false
-            },
-            {
-                element_type: 'checkbox',
-                value_name: 'dislay_empty_values',
-                element_label: 'Display empty values',
-                default_value: false
-            }
-        ]
-        },
-        'chart_forecast': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Chart',
-            category_type: 'chart',
-            elements: [
-                {
-                    element_type: 'input',
-                    value_name: 'colors_offset',
-                    element_label: 'Colors offset',
-                    default_value: 0
-                }, {
-                    element_type: 'checkbox',
-                    value_name: 'show',
-                    element_label: 'Show grid',
-                    default_value: true
-                }, {
-                    element_type: 'checkbox',
-                    value_name: 'showAllLegends',
-                    element_label: 'Show legends over 10',
-                    default_value: false
-                },
-                {
-                    element_type: 'checkbox',
-                    value_name: 'dislay_empty_values',
-                    element_label: 'Display empty values',
-                    default_value: false
-                },
-                {
-                    element_type: 'devider',
-                    element_label: 'Chart Patterns',
-                },
-                {
-                    element_type: 'text',
-                    element_label: 'Forecast Chart',
-                    value_name: 'smart_query',
-                    default_value: true,
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'actuals',
-                    element_label: 'Actuals',
-                    element_options: [
-                        {label: 'Solid', value: 'solid'},
-                        {label: 'Dash', value: 'dash'},
-                    ],
-                    default_value: 'Solid',
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'forecast',
-                    element_label: 'Forecast',
-                    element_options: [
-                        {label: 'Solid', value: 'solid'},
-                        {label: 'Dash', value: 'dash'},
-                    ],
-                    default_value: 'Dash',
-                }
-            ]
-        },
-        'total_value_label_donut': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Total Value Label',
-            category_type: 'total_value_label',
-            elements: [{
-                element_type: 'input',
-                value_name: 'total_value_label_text',
-                element_label: 'Total value label text for donut chart',
-                default_value: 'Total'
-            }]
-        },
-        'chart_position': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Chart position',
-            category_type: 'chart_position',
-            elements: [
-                {
-                    element_type: 'input',
-                    value_name: 'margin_top',
-                    element_label: 'Marging top',
-                    default_value: 0,
-                },
-                {
-                    element_type: 'input',
-                    value_name: 'margin_right',
-                    element_label: 'Marging right',
-                    default_value: 0,
-                },
-                {
-                    element_type: 'input',
-                    value_name: 'margin_bottom',
-                    element_label: 'Marging bottom',
-                    default_value: 0,
-                },
-                {
-                    element_type: 'input',
-                    value_name: 'margin_left',
-                    element_label: 'Marging left',
-                    default_value: 0,
-                },
-                {
-                    element_type: 'input',
-                    value_name: 'spacing_top',
-                    element_label: 'Spacing top',
-                    default_value: 0,
-                },
-                {
-                    element_type: 'input',
-                    value_name: 'spacing_right',
-                    element_label: 'Spacing right',
-                    default_value: 0,
-                },
-                {
-                    element_type: 'input',
-                    value_name: 'spacing_bottom',
-                    element_label: 'Spacing bottom',
-                    default_value: 0,
-                },
-                {
-                    element_type: 'input',
-                    value_name: 'spacing_left',
-                    element_label: 'Spacing left',
-                    default_value: 0,
-                },
-            ]
-        },
-        'label': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Label',
-            category_type: 'label',
-            elements: [
-                {
-                    element_type: 'toggle',
-                    element_label: 'Show',
-                    value_name: 'show',
-                    default_value: true,
-                    disabled_str: '!{var}.show_out_of_x_axis && !{var}.show_out_of_data_series && !{var}.show_value',
-                    disabled_fn: (value) => !value.show_out_of_x_axis && !value.show_out_of_data_series && !value.show_value,
-                },
-                {
-                    element_type: 'toggle',
-                    element_label: 'Overlap',
-                    value_name: 'overlap',
-                    default_value: false
-                },
-                {
-                    element_type: 'toggle',
-                    element_label: 'Vertical',
-                    value_name: 'vertical',
-                    default_value: false,
-                    showFn: chartHasVerticalDataLabelsOption,
-                },
-                {
-                    element_type: 'devider',
-                },
-                {
-                    element_type: 'devider',
-                    element_label: 'Label Style',
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'font_style',
-                    element_label: 'Font style',
-                    element_options: SUBOPTIONS_FONTS,
-                    default_value: LABEL_DEFAULT_SETTINGS.FONT_FAMILY,
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'font_size',
-                    element_label: 'Font size',
-                    element_options: suboptionsFontSizeValues,
-                    default_value: LABEL_DEFAULT_SETTINGS.FONT_SIZE,
-                },
-                {
-                    element_type: 'color_picker',
-                    value_name: 'font_color',
-                    element_label: 'Font Color',
-                    default_value: LABEL_DEFAULT_SETTINGS.FONT_COLOR
-                },
-                {
-                    element_type: 'devider',
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Value',
-                    value_name: 'show_value',
-                    default_value: true,
-                    clickFn: (value) => value.show = value.show ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value : value.show,
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: '% Out of [X Axis]',
-                    value_name: 'show_out_of_x_axis',
-                    default_value: false,
-                    clickFn: (value) => value.show = value.show ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value : value.show,
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: '% Out of [Data Series]',
-                    value_name: 'show_out_of_data_series',
-                    default_value: false,
-                    clickFn: (value) => value.show = value.show ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value : value.show,
-                },
-            ]
-        },
-        'label_pie': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Label',
-            category_type: 'label_pie',
-            elements: [
-                {
-                    element_type: 'toggle',
-                    element_label: 'Show',
-                    value_name: 'show',
-                    default_value: false,
-                    disabled_str: '!{var}.show_percentage_in_labels && !{var}.show_value_in_labels',
-                    disabled_fn: (value) => !value.show_percentage_in_labels && !value.show_value_in_labels,
-                },
-                {
-                    element_type: 'toggle',
-                    element_label: 'Overlap',
-                    value_name: 'overlap',
-                    default_value: false
-                },
-                {
-                    element_type: 'toggle',
-                    element_label: 'Use area color',
-                    value_name: 'use_area_color',
-                    default_value: false
-                },
-                {
-                    element_type: 'devider',
-                },
-                {
-                    element_type: 'devider',
-                    element_label: 'Label Style',
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'font_style',
-                    element_label: 'Font style',
-                    element_options: SUBOPTIONS_FONTS,
-                    default_value: LABEL_DEFAULT_SETTINGS.FONT_FAMILY,
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'font_size',
-                    element_label: 'Font size',
-                    element_options: suboptionsFontSizeValues,
-                    default_value: LABEL_DEFAULT_SETTINGS.FONT_SIZE,
-                },
-                {
-                    element_type: 'color_picker',
-                    value_name: 'font_color',
-                    element_label: 'Font Color',
-                    default_value: LABEL_DEFAULT_SETTINGS.FONT_COLOR
-                },
-                {
-                    element_type: 'devider',
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Value',
-                    value_name: 'show_value_in_labels',
-                    default_value: true,
-                    clickFn: (value) => value.show = value.show ? value.show_percentage_in_labels || value.show_value_in_labels : value.show,
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Show %',
-                    value_name: 'show_percentage_in_labels',
-                    default_value: false,
-                    clickFn: (value) => value.show = value.show ? value.show_percentage_in_labels || value.show_value_in_labels : value.show,
-                },
-            ]
-        },
-        'label_gauge': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Label',
-            category_type: 'label',
-            elements: [
-                {
-                    element_type: 'toggle',
-                    element_label: 'Show',
-                    value_name: 'show',
-                    default_value: true,
-                },
-                {
-                    element_type: 'devider',
-                },
-                {
-                    element_type: 'devider',
-                    element_label: 'Label Style',
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'font_style',
-                    element_label: 'Font style',
-                    element_options: SUBOPTIONS_FONTS,
-                    default_value: LABEL_DEFAULT_SETTINGS.FONT_FAMILY,
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'font_size',
-                    element_label: 'Font size',
-                    element_options: suboptionsFontSizeValues,
-                    default_value: 16,
-                },
-                {
-                    element_type: 'color_picker',
-                    value_name: 'font_color',
-                    element_label: 'Font Color',
-                    default_value: '#333'
-                },
-                {
-                    element_type: 'devider',
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Value % out of Goal',
-                    value_name: 'show_percentage_in_value',
-                    default_value: false,
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Segment % out Goal',
-                    value_name: 'show_percentage_in_segments',
-                    default_value: false,
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Show Goal label',
-                    value_name: 'show_goal_name',
-                    default_value: true,
-                },
-                {
-                    element_type: 'input',
-                    show_in_one_row: true,
-                    element_label: 'Goal name',
-                    value_name: 'goal_name',
-                    default_value: 'Goal',
-                    showFn: () => highchartsRenderer.hasFeature(FEATURES.ENABLE_GAUGE_DYNAMIC_GOAL),
-                },
-            ]
-        },
-        'label_with_percentage': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Label',
-            category_type: 'label',
-            elements: [
-                {
-                    element_type: 'toggle',
-                    element_label: 'Show',
-                    value_name: 'show',
-                    default_value: true,
-                    disabled_str: '!{var}.show_out_of_x_axis && !{var}.show_out_of_data_series && !{var}.show_value',
-                    disabled_fn: (value) => !value.show_out_of_x_axis && !value.show_out_of_data_series && !value.show_value,
-                },
-                {
-                    element_type: 'toggle',
-                    element_label: 'Overlap',
-                    value_name: 'overlap',
-                    default_value: false
-                },
-                {
-                    element_type: 'toggle',
-                    element_label: 'Vertical',
-                    value_name: 'vertical',
-                    default_value: false,
-                    showFn: chartHasVerticalDataLabelsOption,
-                },
-                {
-                    element_type: 'toggle',
-                    element_label: 'Shadow',
-                    value_name: 'shadow',
-                    default_value: false
-                },
-                {
-                    element_type: 'toggle',
-                    element_label: 'Hide subtotals',
-                    value_name: 'hide_subtotals',
-                    default_value: false
-                },
-                {
-                    element_type: 'devider',
-                },
-                {
-                    element_type: 'devider',
-                    element_label: 'Label Style',
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'font_style',
-                    element_label: 'Font style',
-                    element_options: SUBOPTIONS_FONTS,
-                    default_value: LABEL_DEFAULT_SETTINGS.FONT_FAMILY,
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'font_size',
-                    element_label: 'Font size',
-                    element_options: suboptionsFontSizeValues,
-                    default_value: LABEL_DEFAULT_SETTINGS.FONT_SIZE,
-                },
-                {
-                    element_type: 'color_picker',
-                    value_name: 'font_color',
-                    element_label: 'Font Color',
-                    default_value: LABEL_DEFAULT_SETTINGS.FONT_COLOR
-                },
-                {
-                    element_type: 'devider',
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Value',
-                    value_name: 'show_value',
-                    default_value: true,
-                    clickFn: (value) => value.show = value.show ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value : value.show,
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: '% Out of [X Axis]',
-                    value_name: 'show_out_of_x_axis',
-                    default_value: false,
-                    clickFn: (value) => value.show = value.show ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value : value.show,
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: '% Out of [Data Series]',
-                    value_name: 'show_out_of_data_series',
-                    default_value: false,
-                    clickFn: (value) => value.show = value.show ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value : value.show,
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Show total',
-                    value_name: 'present_total',
-                    default_value: false,
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Show total %',
-                    value_name: 'show_percentage',
-                    default_value: false
-                },
-            ]
-        },
-        'axisY': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Y Axis',
-            category_type: 'axisY',
-            elements: [{
-                element_type: 'checkbox',
-                value_name: 'autoylabel',
-                element_label: 'Auto label y axis',
-                default_value: true
-            },
-                {
-                    element_type: 'input',
-                    value_name: 'name',
-                    element_label: 'Y axis label',
-                    default_value: '',
-                    onChange: (value) => value.autoylabel = false,
-                },
-                {
-                    element_type: 'input',
-                    value_name: 'min',
-                    element_label: 'Min',
-                    default_value: null
-                },
-                {
-                    element_type: 'input',
-                    value_name: 'max',
-                    element_label: 'Max',
-                    default_value: null
-                }
-            ]
-        },
-        'axisX': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'X Axis',
-            category_type: 'axisX',
-            elements: [
-                {
-                    element_type: 'checkbox',
-                    value_name: 'autoxlabel',
-                    element_label: 'Auto label x axis',
-                    default_value: true
-                },
-                {
-                    element_type: 'input',
-                    value_name: 'name',
-                    element_label: 'X axis label',
-                    default_value: '',
-                    onChange: (value) => value.autoxlabel = false
-                },
-                {
-                    element_type: 'input',
-                    value_name: 'min',
-                    element_label: 'Min',
-                    default_value: null
-                },
-                {
-                    element_type: 'input',
-                    value_name: 'max',
-                    element_label: 'Max',
-                    default_value: null
-                },
-                {
-                    element_type: 'input',
-                    value_name: 'label_step',
-                    element_label: 'Label step',
-                    default_value: null,
-                    label_tooltip: 'Show indicators at custom numeric interval'
-                },
-                {
-                    element_type: 'checkbox',
-                    value_name: 'zoom_x',
-                    element_label: 'Zoom x',
-                    default_value: false
-                }
-            ]
-        },
-        'ticks': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Ticks',
-            category_type: 'ticks',
-            elements: [{
-                element_type: 'checkbox',
-                element_label: 'Show',
-                value_name: 'show',
-                default_value: true
-            }]
-        },
-        'tooltips': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Tooltip',
-            category_type: 'tooltips',
-            elements: [
-                {
-                    element_type: 'toggle',
-                    element_label: 'Show',
-                    value_name: 'show',
-                    default_value: true,
-                    disabled_str: '!{var}.show_out_of_x_axis && !{var}.show_out_of_data_series && !{var}.show_value && !{var}.show_x_axis && !{var}.show_data_series',
-                    disabled_fn: (value) => !value.show_out_of_x_axis
-                        && !value.show_out_of_data_series
-                        && !value.show_value
-                        && !value.show_x_axis
-                        && !value.show_data_series,
-                },
-                {
-                    element_type: 'devider',
-                },
-                {
-                    element_type: 'devider',
-                    element_label: 'Tooltip Style',
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'font_style',
-                    element_label: 'Font style',
-                    element_options: SUBOPTIONS_FONTS,
-                    default_value: TOOLTIP_DEFAULT_SETTINGS.FONT_FAMILY,
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'font_size',
-                    element_label: 'Font size',
-                    element_options: suboptionsFontSizeValues,
-                    default_value: TOOLTIP_DEFAULT_SETTINGS.FONT_SIZE,
-                },
-                {
-                    element_type: 'color_picker',
-                    value_name: 'font_color',
-                    element_label: 'Font Color',
-                    default_value: TOOLTIP_DEFAULT_SETTINGS.FONT_COLOR
-                },
-                {
-                    element_type: 'devider',
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: '[X Axis]',
-                    value_name: 'show_x_axis',
-                    default_value: true,
-                    clickFn: (value) => value.show = value.show
-                        ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value || value.show_x_axis || value.show_data_series
-                        : value.show,
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: '[Data Series]',
-                    value_name: 'show_data_series',
-                    default_value: true,
-                    clickFn: (value) => value.show = value.show
-                        ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value || value.show_x_axis || value.show_data_series
-                        : value.show,
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Value',
-                    value_name: 'show_value',
-                    default_value: true,
-                    clickFn: (value) => value.show = value.show
-                        ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value || value.show_x_axis || value.show_data_series
-                        : value.show,
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: '% Out of [X Axis]',
-                    value_name: 'show_out_of_x_axis',
-                    default_value: false,
-                    clickFn: (value) => value.show = value.show
-                        ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value || value.show_x_axis || value.show_data_series
-                        : value.show,
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: '% Out of [Data Series]',
-                    value_name: 'show_out_of_data_series',
-                    default_value: false,
-                    clickFn: (value) => value.show = value.show
-                        ? value.show_out_of_x_axis || value.show_out_of_data_series || value.show_value || value.show_x_axis || value.show_data_series
-                        : value.show,
-                },
-            ]
-        },
-        'tooltips_pie': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Tooltip',
-            category_type: 'tooltips',
-            elements: [
-                {
-                    element_type: 'toggle',
-                    element_label: 'Show',
-                    value_name: 'show',
-                    default_value: true,
-                    disabled_str: '!{var}.show_percentage && !{var}.show_value',
-                    disabled_fn: (value) => !value.show_percentage && !value.show_value,
-                },
-                {
-                    element_type: 'devider',
-                },
-                {
-                    element_type: 'devider',
-                    element_label: 'Tooltip Style',
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'font_style',
-                    element_label: 'Font style',
-                    element_options: SUBOPTIONS_FONTS,
-                    default_value: TOOLTIP_DEFAULT_SETTINGS.FONT_FAMILY,
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'font_size',
-                    element_label: 'Font size',
-                    element_options: suboptionsFontSizeValues,
-                    default_value: TOOLTIP_DEFAULT_SETTINGS.FONT_SIZE,
-                },
-                {
-                    element_type: 'color_picker',
-                    value_name: 'font_color',
-                    element_label: 'Font Color',
-                    default_value: TOOLTIP_DEFAULT_SETTINGS.FONT_COLOR
-                },
-                {
-                    element_type: 'devider',
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Value',
-                    value_name: 'show_value',
-                    default_value: true,
-                    clickFn: (value) => value.show = value.show ? value.show_percentage || value.show_value : value.show,
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Show %',
-                    value_name: 'show_percentage',
-                    default_value: false,
-                    clickFn: (value) => value.show = value.show ? value.show_percentage || value.show_value : value.show,
-                },
-            ]
-        },
-        'tooltips_gauge': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Tooltip',
-            category_type: 'tooltips',
-            elements: [
-                {
-                    element_type: 'toggle',
-                    element_label: 'Show',
-                    value_name: 'show',
-                    default_value: true,
-                },
-                {
-                    element_type: 'devider',
-                },
-                {
-                    element_type: 'devider',
-                    element_label: 'Tooltip Style',
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'font_style',
-                    element_label: 'Font style',
-                    element_options: SUBOPTIONS_FONTS,
-                    default_value: TOOLTIP_DEFAULT_SETTINGS.FONT_FAMILY,
-                },
-                {
-                    element_type: 'select',
-                    value_name: 'font_size',
-                    element_label: 'Font size',
-                    element_options: suboptionsFontSizeValues,
-                    default_value: TOOLTIP_DEFAULT_SETTINGS.FONT_SIZE,
-                },
-                {
-                    element_type: 'color_picker',
-                    value_name: 'font_color',
-                    element_label: 'Font Color',
-                    default_value: TOOLTIP_DEFAULT_SETTINGS.FONT_COLOR
-                },
-                {
-                    element_type: 'devider',
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Segment name',
-                    value_name: 'show_segment_name',
-                    default_value: true,
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Value % out of Goal',
-                    value_name: 'show_percentage_in_value',
-                    default_value: true,
-                },
-                {
-                    element_type: 'checkbox',
-                    element_label: 'Segment % out Goal',
-                    value_name: 'show_percentage_in_segments',
-                    default_value: true,
-                },
-            ]
-        },
-        'negative_number_format': {
-            is_hidden: true,
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Negative num',
-            category_type: 'negative_numbers',
-            elements: [{
-                element_type: 'radio',
-                value_name: 'value',
-                element_label: 'Show like',
-                element_options: [
-                    {label: '-1234', value: 'minus'},
-                    {label: '-1234[red]', value: 'red_minus'},
-                    {label: '(1234)', value: 'absolute'},
-                    {label: '(1234)[red]', value: 'red_absolute'}
-                ],
-                default_value: 'minus'
-            }]
-        },
-        'delta_column': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Variance',
-            category_type: 'delta_column',
-            elements: [{
-                element_type: 'radio',
-                value_name: 'field',
-                element_label: 'Select Field',
-                element_options: [
-                    {label: 'None', value: ''},
-                    {label: 'Axis', value: 'category'},
-                    {label: 'Legend', value: 'series'},
-                ],
-                default_value: ''
-            }, {
-                element_type: 'input',
-                value_name: 'name',
-                element_label: 'Name',
-                default_value: '_Variance'
-            }, {
-                element_type: 'input',
-                value_name: 'formula',
-                element_label: 'Formula',
-                default_value: 'x2-x1'
-            },
-            {
-                element_type: 'input',
-                value_name: 'color',
-                element_label: 'Color',
-                default_value: ''
-            }, {
-                element_type: 'radio',
-                value_name: 'chart',
-                element_label: 'Chart',
-                element_options: [
-                    {label: 'Markers', value: ''},
-                    {label: 'Line', value: 'line'},
-                    {label: 'Smooth Line', value: 'spline'},
-                    {label: 'Column', value: 'column'},
-                    {label: 'Area', value: 'area'},
-                    {label: 'Smooth Area', value: 'areaspline'},
-                ],
-                default_value: ''
-            }, {
-                element_type: 'checkbox',
-                element_label: 'Only variance',
-                value_name: 'only_variant',
-                default_value: false
-            }, {
-                element_type: 'checkbox',
-                element_label: 'Same yAxis',
-                value_name: 'same_yaxis',
-                default_value: false,
-                hidden: true,
-            }, {
-                element_type: 'checkbox',
-                element_label: 'Same xAxis',
-                value_name: 'same_xaxis',
-                default_value: false
-            }, {
-                element_type: 'checkbox',
-                element_label: 'Percentage',
-                value_name: 'is_percentage',
-                default_value: false,
-                hidden: true,
-            }]
-        },
-        'delta_column_for_drill_down': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Variance',
-            category_type: 'delta_column',
-            elements: [{
-                element_type: 'radio',
-                value_name: 'field',
-                element_label: 'Select Field',
-                element_options: [
-                    {label: 'None', value: ''},
-                    {label: 'Axis', value: 'category'},
-                    {label: 'Legend', value: 'series'},
-                ],
-                default_value: ''
-            }, {
-                element_type: 'input',
-                value_name: 'name',
-                element_label: 'Name',
-                default_value: '_Variance'
-            }, {
-              element_type: 'input',
-              value_name: 'formula',
-              element_label: 'Formula',
-              default_value: 'x2-x1'
-            }, {
-                element_type: 'input',
-                value_name: 'color',
-                element_label: 'Color',
-                default_value: ''
-            }, {
-                element_type: 'radio',
-                value_name: 'chart',
-                element_label: 'Chart',
-                element_options: [
-                    {label: 'Markers', value: ''},
-                    {label: 'Line', value: 'line'},
-                    {label: 'Smooth Line', value: 'spline'},
-                    {label: 'Column', value: 'column'},
-                    {label: 'Area', value: 'area'},
-                    {label: 'Smooth Area', value: 'areaspline'},
-                ],
-                default_value: ''
-            }, {
-                element_type: 'checkbox',
-                element_label: 'Only variance',
-                value_name: 'only_variant',
-                default_value: false
-            }, {
-                element_type: 'checkbox',
-                element_label: 'Same yAxis',
-                value_name: 'same_yaxis',
-                default_value: false,
-                hidden: true,
-            }, {
-                element_type: 'checkbox',
-                element_label: 'Same xAxis',
-                value_name: 'same_xaxis',
-                default_value: false
-            }, {
-                element_type: 'checkbox',
-                element_label: 'Percentage',
-                value_name: 'is_percentage',
-                default_value: false,
-                hidden: true,
-            }, {
-                element_type: 'checkbox',
-                element_label: 'Filter zero values',
-                value_name: 'is_filter_zero',
-                default_value: false
-            }]
-        },
-        'advanced': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Advanced',
-            category_type: 'advanced',
-            elements: [
-                {
-                    element_type: 'radio',
-                    value_name: 'error_policy',
-                    element_label: 'Error Policy',
-                    element_options: [
-                        { label: 'None', value: 'None' },
-                        { label: 'Error', value: 'Error' },
-                        { label: 'Zero (0)', value: '0' },
-                    ],
-                    default_value: 'None'
-                },
-                {
-                    element_type: 'radio',
-                    value_name: 'from_latest',
-                    element_label: 'Version',
-                    element_sub_title: 'From latest:',
-                    element_options: [
-                        { label: 'All time dimensions', value: '' },
-                        { label: 'Submitted', value: 'latest_submitted' },
-                        { label: 'Most recent time period', value: 'latest_in_last_chronology_date_dimension' },
-                        {
-                            label: 'Most recent time period in each filebox',
-                            value: 'latest_in_last_chronology_date_dimension_in_every_fbs'
-                        },
-                    ],
-                    default_value: ''
-                },
-            ]
-        },
-        'legends': {
-          category_class: 'google-visualization-charteditor-mini-more',
-          category_label: 'Legends',
-          category_type: 'legends_position',
-          elements: [{
-            element_type: 'radio',
-            value_name: 'value',
-            element_label: 'Position',
-            element_options: [
-              {label: 'Top', value: 'top'},
-              {label: 'Bottom', value: 'bottom'},
-              {label: 'Left', value: 'left'},
-              {label: 'Right', value: 'right'},
-              {label: 'None', value: 'none'},
-            ],
-            default_value: ''
-          }]
-        },
-        gauge_goal: {
-            is_hidden: true,
-            categorys_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Gauge goal',
-            category_type: 'goal',
-            elements: [
-                {
-                    element_type: 'input',
-                    value_name: 'title',
-                    element_label: 'Goal title',
-                    default_value: 'Goal',
-                },
-                {
-                    element_type: 'input',
-                    value_name: 'value',
-                    element_label: 'Goal value',
-                    default_value: 1000000,
-                },
-            ],
-        },
-        gauge_segments: {
-            is_hidden: true,
-            categorys_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Gauge segments',
-            category_type: 'segments',
-            default_value: GAUGE_OPTIONS_DEFAULT.segments,
-        },
-        gauge_is_absolute: {
-            is_hidden: true,
-            categorys_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Gauge is absolute value',
-            category_type: 'isAbsoluteValue',
-            default_value: false,
-        }
-    };
+    highchartsRenderer.suboptions = optionsBuilders.createDefaultSuboptions({
+        CHART_TYPES: highchartsRenderer.CHART_TYPES,
+        hasFeature: highchartsRenderer.hasFeature,
+        ENABLE_GAUGE_DYNAMIC_GOAL: FEATURES.ENABLE_GAUGE_DYNAMIC_GOAL,
+        defaultGaugeSegments: GAUGE_OPTIONS_DEFAULT.segments,
+    });
 
     highchartsRenderer.chartsTypesInfo = {
         'waterfall-chart': {
@@ -7561,7 +6327,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             axisTooltipTitle: 'Drag one or more  fields to create the Polygons edges.',
             legendTooltipTitle: 'Adding a field in this section will display data points in your chart for each item in that field.',
         },
-        'column-chart': {
+        [optionsBuilders.CHART_TYPES.COLUMN_CHART]: {
             name: 'Column chart',
             label: 'Column',
             title: 'Compare two or more data series in different categories.',
@@ -7573,9 +6339,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             axisTooltipDescription: 'To create a drill-down within this category, drag another field below the first field.',
             legendTooltipTitle: 'Each field in the data series will appear as a separate column in the chart.',
         },
-        'column-chart-stacked': {
+        [optionsBuilders.CHART_TYPES.COLUMN_CHART_STACKED]: {
             name: 'Stacked column chart',
-            label: 'Stacked Column',
+            label: 'Stacked column',
             title: 'Useful for explaining part-to-whole comparisons over time, or across categories.',
             description: 'For example, comparison over time of expenses divided into subcategories. The chart describes both total expenses over time and the relation between the different sub-categories.',
             axisName: 'X - Axis',
@@ -7584,7 +6350,18 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             axisTooltipTitle: 'Drag one or more fields here to create your x-axis. Each item within the field will appear as a different column.',
             legendTooltipTitle: 'Each field item will appear as a different segment within the column.',
         },
-        'bar-chart': {
+        [optionsBuilders.CHART_TYPES.COLUMN_CHART_STACKED_PERCENT]: {
+            name: '100% Stacked column chart',
+            label: '100% Stacked column',
+            title: 'Explains the percentage contribution of each value to a total across categories',
+            description: 'For example, showing each department’s share of total expenses per month.',
+            axisName: 'X - Axis',
+            legendName: 'Data series',
+            startedMessage: 'To get started, drag one field to the x-axis section, and one field to the value section. Best practice: we recommend adding one field to the data series section too.',
+            axisTooltipTitle: 'Drag one or more fields here to create your x-axis. Each item within the field will appear as a different column.',
+            legendTooltipTitle: 'Each field item will appear as a different segment within the column.',
+        },
+        [optionsBuilders.CHART_TYPES.BAR_CHART]: {
             name: 'Bar chart',
             label: 'Bar',
             title: 'Compare one or more data series across a given category.',
@@ -7595,9 +6372,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             axisTooltipTitle: 'Drag one or more fields here to create your y-axis.',
             legendTooltipTitle: 'Each field item will appear as a different segment within the bar.',
         },
-        'bar-chart-stacked': {
+        [optionsBuilders.CHART_TYPES.BAR_CHART_STACKED]: {
             name: 'Stacked bar chart',
-            label: 'Stacked Bar',
+            label: 'Stacked bar',
             title: 'Good for explaining part-to-whole comparisons across a given category.',
             description: 'For example, compare between sales-rep contributions to the total Revenue in different regions.',
             axisName: 'Y - Axis',
@@ -7606,6 +6383,17 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             axisTooltipTitle: 'Drag one or more fields here to create your y-axis.',
             legendTooltipTitle: 'Each field item will appear as a different segment within the bar.',
         },
+        [optionsBuilders.CHART_TYPES.BAR_CHART_STACKED_PERCENT]: {
+            name: '100% Stacked bar chart',
+            label: '100% Stacked bar',
+            title: 'Explains the percentage contribution of each value to a total across categories',
+            description: 'For example, showing each department’s share of total expenses per month.',
+            axisName: 'Y - Axis',
+            legendName: 'Data series',
+            startedMessage: 'To get started, drag one field to the y-axis section, and one field to the value section. Best practice: add one field to the Categories section too.',
+            axisTooltipTitle: 'Drag one or more fields here to create your y-axis.',
+            legendTooltipTitle: 'Each field item will appear as a different segment within the bar.',
+        },
         'pie-chart': {
             name: 'Pie chart',
             label: 'Pie Chart',
@@ -7955,6 +6743,26 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             highchartsRenderer.suboptions["advanced"],
                             highchartsRenderer.suboptions["legends"],
                         ]
+                    },
+                    {
+                        type: optionsBuilders.CHART_TYPES.COLUMN_CHART_STACKED_PERCENT,
+                        hidden: !environment.enableStackedPercentCharts,
+                        name: highchartsRenderer.chartsTypesInfo[optionsBuilders.CHART_TYPES.COLUMN_CHART_STACKED_PERCENT].name,
+                        class: 'google-visualization-charteditor-thumbs-columnchart-stacked-percent',
+                        render: highchartsRenderer.ptRenderStackedPercentColumn,
+                        suboptions: [
+                            highchartsRenderer.suboptions["axisY_percent_stacked"],
+                            highchartsRenderer.suboptions["axisX"],
+                            highchartsRenderer.suboptions["tooltips"],
+                            highchartsRenderer.suboptions["label_with_percentage_percent_stacked"],
+                            highchartsRenderer.suboptions["subtitle"],
+                            highchartsRenderer.suboptions["widget_library"],
+                            highchartsRenderer.suboptions["table_options"],
+                            highchartsRenderer.suboptions["table_design_options"],
+                            highchartsRenderer.suboptions["chart_grid"],
+                            highchartsRenderer.suboptions["advanced"],
+                            highchartsRenderer.suboptions["legends"],
+                        ]
                     }
                 ]
             },
@@ -8003,6 +6811,26 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             highchartsRenderer.suboptions["advanced"],
                             highchartsRenderer.suboptions["legends"],
                         ]
+                    },
+                    {
+                        type: optionsBuilders.CHART_TYPES.BAR_CHART_STACKED_PERCENT,
+                        hidden: !environment.enableStackedPercentCharts,
+                        name: highchartsRenderer.chartsTypesInfo[optionsBuilders.CHART_TYPES.BAR_CHART_STACKED_PERCENT].name,
+                        class: 'google-visualization-charteditor-thumbs-barchart-stacked-percent',
+                        render: highchartsRenderer.ptRenderStackedPercentBar,
+                        suboptions: [
+                            highchartsRenderer.suboptions["axisY_percent_stacked"],
+                            highchartsRenderer.suboptions["axisX"],
+                            highchartsRenderer.suboptions["tooltips"],
+                            highchartsRenderer.suboptions["label_with_percentage_percent_stacked"],
+                            highchartsRenderer.suboptions["subtitle"],
+                            highchartsRenderer.suboptions["widget_library"],
+                            highchartsRenderer.suboptions["table_options_transpose"],
+                            highchartsRenderer.suboptions["table_design_options"],
+                            highchartsRenderer.suboptions["chart_grid"],
+                            highchartsRenderer.suboptions["advanced"],
+                            highchartsRenderer.suboptions["legends"],
+                        ]
                     }
                 ]
             },