@datarailsshared/dr_renderer 1.2.111 → 1.2.112

package/src/highcharts_renderer.js

@@ -5,16 +5,17 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         lodash = _;
     }
 
-    let useNewUx = false;
+    // TODO: always true. remove
+    let useNewUx = true;
     let useTotalsCalculation = false;
     let disableAnimation = false;
     if (document.ReportHippo && document.ReportHippo && document.ReportHippo.user) {
         useTotalsCalculation = lodash.includes(document.ReportHippo.user.features, 'enable_server_totals_calculation');
-        useNewUx = document.ReportHippo.user.organization && document.ReportHippo.user.organization.settings && document.ReportHippo.user.organization.settings.use_new_ux;
         disableAnimation = document.ReportHippo.user.organization && document.ReportHippo.user.organization.settings && document.ReportHippo.user.organization.settings.disable_animation
     }
     const textColor = "#151a41";
     const chartLabelColor = "#cfd7dd";
+    const HIGHCHARTS_FONT_FAMILY = 'Poppins';
 
     if(!Highcharts){
         Highcharts = {
@@ -192,7 +193,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 color: textColor
             },
             activeDataLabelStyle: {
-                color: textColor,
                 textDecoration: 'none',
             }
         }
@@ -211,12 +211,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     highchartsRenderer.MAX_ROWS_FOR_AUTO_REFRESH = 100000;
     highchartsRenderer.MAX_ROWS_FOR_SHOW_RESULTS = 10000;
 
-    highchartsRenderer.tooltipShadow = useNewUx ? {
-      color: '#9199b4',
-      width: 10,
-      opacity: 0.05
-    } : null;
-
     highchartsRenderer.setColors = function (colors) {
         highchartsRenderer.highcharts_theme.colors = colors;
         Highcharts.setOptions(highchartsRenderer.highcharts_theme);
@@ -381,35 +375,16 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return func;
     };
 
-    highchartsRenderer.pieDataLabelFormatter = function (pivotData, opts) {
+    highchartsRenderer.pieDataLabelFormatter = function (pivotData, opts, is_drill_down_pie = false) {
         var labelOpts = opts.chartOptions.label_pie;
-        var defaultFn = highchartsRenderer.defaultDataLabelFormatter(pivotData, opts);
+        var defaultFn = highchartsRenderer.defaultDataLabelFormatter(pivotData, opts, is_drill_down_pie);
         var func = function() {
             var value = defaultFn.call(this);
             var nameElement = `<span ${labelOpts.use_area_color ? 'style="color: ' + this.point.color + ';"' : ''}>${this.point.name}</span>`;
             var rightSlot = '';
             var topSlot = '';
             if (labelOpts.show_percentage_in_labels) {
-                rightSlot = `${(this.point.percentage).toFixed(2)}%`;
-                if (labelOpts.show_value_in_labels && value) topSlot = `${value}<br>`;
-            } else if (labelOpts.show_value_in_labels && value) {
-                rightSlot = value;
-            }
-            return value ? `${topSlot}<b>${nameElement}<span>\u200E: ${rightSlot}</span></b>` : value;
-        }
-        return func;
-    };
-
-    highchartsRenderer.pieDrillDownDataLabelFormatter = function (pivotData, opts) {
-        var labelOpts = opts.chartOptions.label_pie;
-        var defaultFn = highchartsRenderer.defaultDataLabelFormatter(pivotData, opts, true);
-        var func = function() {
-            var value = defaultFn.call(this);
-            var nameElement = `<span ${labelOpts.use_area_color ? 'style="color: ' + this.point.color + ';"' : ''}>${this.point.name}</span>`;
-            var rightSlot = '';
-            var topSlot = '';
-            if (labelOpts.show_percentage_in_labels) {
-                rightSlot = `${(this.point.percentage).toFixed(2)}%`;
+                rightSlot = `(${(this.point.percentage).toFixed(2)}%)`;
                 if (labelOpts.show_value_in_labels && value) topSlot = `${value}<br>`;
             } else if (labelOpts.show_value_in_labels && value) {
                 rightSlot = value;
@@ -446,6 +421,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             variant_name_default_name = opts.chartOptions.delta_column.name;
         }
 
+        const labelOptions = lodash.get(opts.chartOptions, 'label') || lodash.get(opts.chartOptions, 'label_pie');
+
         var func = function () {
             var value = parseFloat(this.y);
             if (pivotData) {
@@ -484,7 +461,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 }
 
                 try {
-                    let percentages = '';
+                    const percentageArray = [];
 
                     if (is_drill_down_pie && !highchartsRenderer.selfStartsWith(series_name, "Series ")) {
                         let temp = cols;
@@ -492,16 +469,23 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         rows = temp;
                     }
 
-                    if (opts && opts.chartOptions && opts.chartOptions.label && opts.chartOptions.label.percentage) {
-                        return (Math.round((this.y / this.total) * 100)) + '%';
-                    } else if (opts && opts.chartOptions && opts.chartOptions.label && opts.chartOptions.label.show_percentage) {
-                        let aggrPercentages = pivotData.getAggregator(rows, [])
-                        let total = aggrPercentages.value()
-                        percentages = total ? ' (' + Math.round(value/total * 100) + '%)' : '';
+                    if (!is_drill_down_pie && labelOptions.show_out_of_x_axis) {
+                        const axisTotal = pivotData.getAggregator([], cols).value();
+                        const outOfAxisPercentages = axisTotal ? Math.round(value / axisTotal * 100) + '%' : '';
+                        outOfAxisPercentages && percentageArray.push(outOfAxisPercentages);
                     }
 
+                    if (labelOptions.show_out_of_data_series) {
+                        const dataSeriesTotal = pivotData.getAggregator(rows, []).value();
+                        const outOfDataSeriesPercentages = dataSeriesTotal ? Math.round(value / dataSeriesTotal * 100) + '%' : '';
+                        outOfDataSeriesPercentages && percentageArray.push(outOfDataSeriesPercentages);
+                    }
+
+                    const percentageWrapper = percentageArray.length ? `(${percentageArray.join(', ')})` : '';
                     var aggr = pivotData.getAggregator(rows, cols);
-                    return $.pivotUtilities.getFormattedNumber(value, aggr, opts, true) + percentages;
+
+                    const formattedValue = is_drill_down_pie || labelOptions.show_value ? $.pivotUtilities.getFormattedNumber(value, aggr, opts, true) : '';
+                    return String(formattedValue) + percentageWrapper;
 
                 } catch (err) {
                     // do nothing
@@ -514,12 +498,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     highchartsRenderer.pieFormatterToTooltip = function (pivotData, opts) {
         var defaultFunction = highchartsRenderer.defaultFormatterToTooltip(pivotData, opts);
+        const tooltipOptions = lodash.get(opts, 'chartOptions.tooltips');
         var func = function () {
             var to_return = defaultFunction.call(this);
+            const percentage = tooltipOptions.show_percentage ? (this.point.percentage).toFixed(2) + "%" : '';
             if (to_return) {
-                to_return += '<br>' + (this.point.percentage).toFixed(2) + "%";
+                to_return += '<br>' + percentage;
             } else {
-                to_return = this.series.name + ': ' + (this.point.percentage).toFixed(2) + "%";
+                to_return = this.series.name + (percentage ? ': ' + percentage : percentage);
             }
             return to_return;
         };
@@ -529,12 +515,17 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     highchartsRenderer.pieDrillDownFormatterToTooltip = function (pivotData, opts) {
         var defaultFunction = highchartsRenderer.defaultFormatterToTooltip(pivotData, opts, true);
+        const tooltipOptions = lodash.get(opts, 'chartOptions.tooltips');
+
         var func = function () {
             var to_return = defaultFunction.call(this);
+            const category = `<span style="color: ${this.color};">${this.name}</span>\u200E`;
+            const percentage = tooltipOptions.show_percentage ? `<b><span>${(this.percentage).toFixed(2)}%</span></b>` : '';
+            const result = category + ((category && percentage) && ': ') + percentage;
             if (to_return) {
-                to_return += '<br><span style="color: ' + this.color + '">' + this.name + '</span>\u200E: <b>' + (this.percentage).toFixed(2) + '%</b>';
+                to_return += '<br>' + result;
             } else {
-                to_return = '<span style="color: ' + this.color + '">' + this.name + '</span>\u200E: <b>' + (this.percentage).toFixed(2) + '%</b>';
+                to_return = result;
             }
             return to_return;
         };
@@ -545,13 +536,21 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     highchartsRenderer.defaultFormatterToTooltip = function (pivotData, opts, is_drill_down_pie) {
         var variant_name = null;
         var variant_name_default_name = null;
-        if (opts && opts.chartOptions &&
-            opts.chartOptions.delta_column &&
-            opts.chartOptions.delta_column.field == "series") {
+        if (lodash.get(opts, 'chartOptions.delta_column.field', null) === 'series') {
             variant_name = opts.chartOptions.delta_column.name.replace('_', '');
             variant_name_default_name = opts.chartOptions.delta_column.name;
         }
 
+        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;
+        }
+
         var func = function () {
             var y = parseFloat(this.y);
             if (pivotData) {
@@ -588,15 +587,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         rows = temp;
                     }
                     var aggr = pivotData.getAggregator(rows, cols);
-                    var category_text = useNewUx ?
-                      '<span style="font-weight: bold; color: #545a6b;">' + cols + '</span>' :
-                      '<b>' + cols + '</b>';
+                    var category_text = `<span style="font-weight: bold;">${cols} </span>`;
                     if (this.category) {
                         category_text = '';
                     }
-                    var series_text = useNewUx ?
-                      '<br/>' + '<span style="font-weight: bold; color: ' + this.series.color + ';">\u200E' + this.series.name + '</span>: ' :
-                      '<br/>\u200E' + this.series.name + ': ';
+                    var series_text = '<br/>' + '<span style="font-weight: bold; color: ' + this.series.color + ';">\u200E' + this.series.name + '</span>';
+                    if (tooltipOptions.show_value) {
+                        series_text += ': '
+                    }
 
                     if (pivotData.rowAttrs.length == 0) {
                         series_text = ': ';
@@ -606,16 +604,32 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         formatted_value_to_return = $.pivotUtilities.getFormattedNumber(aggr.value(), aggr, opts);
                     }
 
-                    let to_return = useNewUx ?
-                      category_text + series_text + '<span style="color: #545a6b;">\u200E' + formatted_value_to_return + '</span>' :
-                      category_text + series_text + '<span>\u200E' + formatted_value_to_return + '</span>';
+                    let wrappedFormattedValue = highchartsRenderer.getSpanWrapper(formatted_value_to_return);
+
+                    wrappedFormattedValue = tooltipOptions.show_value ? wrappedFormattedValue : '';
+                    category_text = tooltipOptions.show_x_axis ? category_text : '';
+                    series_text = tooltipOptions.show_data_series ? series_text : '';
+
+                    let to_return = category_text + series_text + wrappedFormattedValue;
 
                     if (is_drill_down_pie) {
-                        to_return = formatted_value_to_return;
+                        to_return = wrappedFormattedValue;
                     }
 
-                    if (lodash.has(opts, "chartOptions.label.percentage") && opts.chartOptions.label.percentage && this.total) {
-                        to_return += '<br/>' + (Math.round((this.y / this.total) * 100)) + '%';
+                    const percentageArray = [];
+                    if (tooltipOptions.show_out_of_x_axis) {
+                        const axisTotal = pivotData.getAggregator([], cols).value();
+                        const outOfAxisPercentages = axisTotal ? Math.round(y / axisTotal * 100) + '%' : '';
+                        outOfAxisPercentages && percentageArray.push(`% Out of ${percentageLabels.axis}: ${outOfAxisPercentages}`);
+                    }
+                    if (tooltipOptions.show_out_of_data_series) {
+                        const dataSeriesTotal = pivotData.getAggregator(rows, []).value();
+                        const outOfDataSeriesPercentages = dataSeriesTotal ? Math.round(y / dataSeriesTotal * 100) + '%' : '';
+                        outOfDataSeriesPercentages && percentageArray.push(`% Out of ${percentageLabels.legend}: ${outOfDataSeriesPercentages}`);
+                    }
+                    if (!is_drill_down_pie && percentageArray.length) {
+                        const percentageString = percentageArray.join(', ');
+                        to_return += `<br/>` + percentageString;
                     }
                     return to_return;
 
@@ -624,24 +638,19 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 }
             }
 
-            if (this.category) {
-                return this.series.name + ': ' + $.pivotUtilities.getFormattedNumber(y, null, opts);
-            }
-
-            if (this.key) {
-                if (useNewUx) {
-                    return '<b style="color: #545a6b;">' + this.key + '</b><br/>' +
-                      '<span style="color: red;">' + this.series.name + '</span>: ' + $.pivotUtilities.getFormattedNumber(y, null, opts);
-                }
-                return '<b>' + this.key + '</b><br/>' + this.series.name + ': ' + $.pivotUtilities.getFormattedNumber(y, null, opts);
-            }
+            const category = tooltipOptions.show_x_axis && !this.category ? `<b>${this.key || highchartsRenderer.getSpanWrapper(this.x)}</b><br/>` : '';
+            const series = tooltipOptions.show_data_series ? `<span>${this.series.name}</span>: ` : '';
+            const value = tooltipOptions.show_value ? highchartsRenderer.getSpanWrapper($.pivotUtilities.getFormattedNumber(y, null, opts)) : '';
 
-            return '<b>' + this.x + '</b><br/>' +
-                this.series.name + ': ' + $.pivotUtilities.getFormattedNumber(y, null, opts);
+            return category + series + value;
         };
         return func;
     };
 
+    highchartsRenderer.getSpanWrapper = function(value) {
+        return `<span>\u200E${value}</span>`;
+    };
+
     /*  model renderers */
 
     highchartsRenderer.tableCSVExportRenderer = function (pivotData, opts) {
@@ -735,33 +744,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         var resultsArr = [];
         var subTitle;
 
-
-        if (!useNewUx) {
-            if (rendererOptions && rendererOptions.chart_title && rendererOptions.chart_title != '') {
-                subTitle = document.createElement("div");
-                subTitle.className = "title";
-                subTitle.innerText = rendererOptions.chart_title;
-                resultsArr.push(subTitle);
-            } else if (rendererOptions && rendererOptions.title && rendererOptions.title.text != '') {
-                subTitle = document.createElement("div");
-                subTitle.className = "title";
-                subTitle.innerText = rendererOptions.title.text;
-                resultsArr.push(subTitle);
-            }
-
-            if (rendererOptions && rendererOptions.chartOptions && rendererOptions.chartOptions.subtitle && rendererOptions.chartOptions.subtitle.subtitle != '') {
-                subTitle = document.createElement("div");
-                subTitle.className = "sub-title";
-                subTitle.innerText = rendererOptions.chartOptions.subtitle.subtitle;
-                resultsArr.push(subTitle);
-            } else if (rendererOptions && rendererOptions.subtitle && rendererOptions.subtitle.text != '') {
-                subTitle = document.createElement("div");
-                subTitle.className = "sub-title";
-                subTitle.innerText = rendererOptions.subtitle.text;
-                resultsArr.push(subTitle);
-            }
-        }
-
         if (to_match) {
             resultsArr.push(highchartsRenderer.getWidgetPlaceholder(highchartsRenderer.widgetPlaceholders.tooMuchData));
         } else {
@@ -774,11 +756,13 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
 
     highchartsRenderer.getWidgetPlaceholder = function(placeholder) {
-        const defaultPlaceholder = $('<div class="noData"><i class="' + (useNewUx ? 'noData-image' : 'fa fa-info') + '"></i> no data</div>');
-        return $.pivotUtilities.errorHandling.getErrorPlaceholder(placeholder, useNewUx) || defaultPlaceholder;
+        const defaultPlaceholder = $('<div class="noData"><i class="noData-image"></i> no data</div>');
+        return $.pivotUtilities.errorHandling.getErrorPlaceholder(placeholder) || defaultPlaceholder;
     }
 
     highchartsRenderer.ptCreateElementAndDraw = function (chartOptions, opts) {
+        chartOptions = lodash.merge(highchartsRenderer.getCommonChartOptions(opts.chartOptions), chartOptions);
+
         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;
@@ -1125,6 +1109,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 style: highchartsRenderer.getDataLabelsStyle(additionOptions)
             }
 
+            ob = highchartsRenderer.getDataLabelsOptions(additionOptions, ob);
+
             lodash.forEach(col_n_keys, function (col_n_value, index) {
                 var agg = pivotData.getAggregator(row_n_value, col_n_value);
                 var val = agg.value();
@@ -1470,9 +1456,21 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         highchartsRenderer.moveSeriesToSecondYAxisIfNeeded(pie_drill_down_series, pivotData, chartOptions, additionOptions, opts);
 
-        return ({
-            series: pie_drill_down_series
-        });
+        const result = {
+            series: pie_drill_down_series,
+        };
+        return lodash.merge(highchartsRenderer.getDataLabelsStylesForDrillDown(additionOptions), result);
+    };
+
+    highchartsRenderer.getDataLabelsStylesForDrillDown = function(additionOptions) {
+        let result = highchartsRenderer.getDataLabelsOptions(additionOptions, { dataLabels: {} });
+
+        if (!result.dataLabels) return {}; 
+        return {
+            activeDataLabelStyle: {
+                color: result.dataLabels.color,
+            },
+        };
     };
 
     highchartsRenderer.moveSeriesToSecondYAxisIfNeeded = function(chartSeries, pivotData, chartOptions, additionOptions, opts, forceAddSecondaryAxis) {
@@ -1554,7 +1552,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     allowOverlap: additionOptions && additionOptions.label_pie ? additionOptions.label_pie.overlap : false,
                     formatter: highchartsRenderer.pieDataLabelFormatter(pivotData, opts),
                     style: highchartsRenderer.getDataLabelsStyle(additionOptions)
-
                 },
                 showInLegend: true
             },
@@ -1563,13 +1560,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         };
 
-        if (opts.drillDownListFunc) {
-            chartOptions.plotOptions.series = useNewUx ? {
-              dataLabels: {
-                color: textColor
-              }
-            } : {};
+        chartOptions.plotOptions.pie = highchartsRenderer.getDataLabelsOptions(additionOptions, chartOptions.plotOptions.pie);
 
+        if (opts.drillDownListFunc) {
             chartOptions.plotOptions.series.cursor = 'pointer';
             chartOptions.plotOptions.series.point = {
                 events: {
@@ -1580,13 +1573,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         chartOptions.tooltip = {
             formatter: highchartsRenderer.pieFormatterToTooltip(pivotData, opts),
-            shadow: highchartsRenderer.tooltipShadow,
             valueDecimals: 2,
-            enabled: additionOptions && additionOptions.tooltips ? additionOptions.tooltips.show : true
         };
-        if (useNewUx) {
-          chartOptions.tooltip.borderColor = '#fff';
-        }
 
         var pie_series = [],
             row_n_keys = pivotData.getRowKeys(),
@@ -1688,6 +1676,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 animation: !disableAnimation
             }
         };
+
+        chartOptions.plotOptions.solidgauge = highchartsRenderer.getDataLabelsOptions(gaugeopts, chartOptions.plotOptions.solidgauge);
         //chartOptions.tooltip = { pointFormat: '{series.name}: <b>{point.y}</b>', valueDecimals: 0 };
 
         chartOptions.credits = {
@@ -1707,14 +1697,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         };
 
-        chartOptions.tooltip = {
-            shadow: highchartsRenderer.tooltipShadow,
-            enabled: gaugeopts && gaugeopts.tooltips ? gaugeopts.tooltips.show : true
-        };
-        if (useNewUx) {
-          chartOptions.tooltip.borderColor = '#fff';
-        }
-
         chartOptions.xAxis = {categories: pivotData.getColKeys()};
         chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, true, null, null, opts, chartOptions);
 
@@ -1780,6 +1762,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 //}
             }];
 
+        chartOptions.series[0] = highchartsRenderer.getDataLabelsOptions(gaugeopts, chartOptions.series[0]);
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -1815,13 +1799,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         };
 
-        chartOptions.tooltip = {
-            shadow: highchartsRenderer.tooltipShadow,
-            enabled: gaugeopts && gaugeopts.tooltips ? gaugeopts.tooltips.show : true
-        };
-        if (useNewUx) {
-          chartOptions.tooltip.borderColor = '#fff';
-        }
+        chartOptions.plotOptions.solidgauge = highchartsRenderer.getDataLabelsOptions(gaugeopts, chartOptions.plotOptions.solidgauge);
 
         chartOptions.credits = {
             enabled: false
@@ -1943,6 +1921,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 //}
             }];
 
+        chartOptions.series[0] = highchartsRenderer.getDataLabelsOptions(gaugeopts, chartOptions.series[0]);
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -2070,21 +2050,20 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 dataLabels: {
                     allowOverlap: additionOptions && additionOptions.label_pie ? additionOptions.label_pie.overlap : false,
                     enabled: additionOptions && additionOptions.label_pie ? additionOptions.label_pie.show : false,
-                    formatter: highchartsRenderer.pieDrillDownDataLabelFormatter(pivotData, opts),
+                    formatter: highchartsRenderer.pieDataLabelFormatter(pivotData, opts, true),
                     style: highchartsRenderer.getDataLabelsStyle(additionOptions),
                 },
                 showInLegend: true,
             }
         };
+
+        chartOptions.plotOptions.series = highchartsRenderer.getDataLabelsOptions(additionOptions, chartOptions.plotOptions.series);
+
         chartOptions.tooltip = {
             headerFormat: '',
             pointFormatter: highchartsRenderer.pieDrillDownFormatterToTooltip(pivotData, opts),
-            shadow: highchartsRenderer.tooltipShadow,
-            enabled: additionOptions && additionOptions.tooltips ? additionOptions.tooltips.show : true
         };
-        if (useNewUx) {
-          chartOptions.tooltip.borderColor = '#fff';
-        }
+
         chartOptions.series = highchartsRenderer.ptCreateSeriesToDrillDownChart(pivotData, chartOptions, additionOptions, opts);
         chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, 1, false, true);
         if (drilldownFunc)
@@ -2164,6 +2143,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         };
 
+        chartOptions.plotOptions.series = highchartsRenderer.getDataLabelsOptions(additionOptions, chartOptions.plotOptions.series);
+
         if (additionOptions && additionOptions.chart) {
             chartOptions.colors = highchartsRenderer.getColorsWithOffset(additionOptions.chart.colors_offset);
         }
@@ -2179,13 +2160,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         chartOptions.tooltip = {
             formatter: highchartsRenderer.defaultFormatterToTooltip(pivotData, opts),
-            shadow: highchartsRenderer.tooltipShadow,
             valueDecimals: 2,
-            enabled: additionOptions && additionOptions.tooltips ? additionOptions.tooltips.show : true
         };
-        if (useNewUx) {
-          chartOptions.tooltip.borderColor = '#fff';
-        }
 
         chartOptions.xAxis = {
             categories: pivotData.getColKeys(),
@@ -2247,6 +2223,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         };
 
+        chartOptions.plotOptions.series = highchartsRenderer.getDataLabelsOptions(additionOptions, chartOptions.plotOptions.series);
+
         if (opts.drillDownListFunc) {
             chartOptions.plotOptions.series.cursor = 'pointer';
             chartOptions.plotOptions.series.point = {
@@ -2258,13 +2236,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         chartOptions.tooltip = {
             formatter: highchartsRenderer.defaultFormatterToTooltip(pivotData, opts),
-            shadow: highchartsRenderer.tooltipShadow,
             valueDecimals: 2,
-            enabled: additionOptions && additionOptions.tooltips ? additionOptions.tooltips.show : true
         };
-        if (useNewUx) {
-          chartOptions.tooltip.borderColor = '#fff';
-        }
 
         chartOptions.xAxis = {
             categories: pivotData.getColKeys(),
@@ -2339,6 +2312,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         };
 
+        chartOptions.plotOptions.series = highchartsRenderer.getDataLabelsOptions(additionOptions, chartOptions.plotOptions.series);
+
         if (opts.drillDownListFunc) {
             chartOptions.plotOptions.series.cursor = 'pointer';
             chartOptions.plotOptions.series.point = {
@@ -2350,10 +2325,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         chartOptions.tooltip = {
             formatter: highchartsRenderer.defaultFormatterToTooltip(pivotData, opts),
-            borderColor: '#fff',
-            shadow: highchartsRenderer.tooltipShadow,
             valueDecimals: 2,
-            enabled: additionOptions && additionOptions.tooltips ? additionOptions.tooltips.show : true
         };
 
         if (additionOptions && additionOptions.chart) {
@@ -2398,13 +2370,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         chartOptions.tooltip = {
             formatter: highchartsRenderer.defaultFormatterToTooltip(pivotData, opts),
-            shadow: highchartsRenderer.tooltipShadow,
             valueDecimals: 2,
-            enabled: additionOptions && additionOptions.tooltips ? additionOptions.tooltips.show : true
         };
-        if (useNewUx) {
-          chartOptions.tooltip.borderColor = '#fff';
-        }
 
         if (additionOptions && additionOptions.chart) {
             chartOptions.colors = highchartsRenderer.getColorsWithOffset(additionOptions.chart.colors_offset);
@@ -2443,6 +2410,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         };
 
+        chartOptions.plotOptions.series = highchartsRenderer.getDataLabelsOptions(additionOptions, chartOptions.plotOptions.series);
+
         if (opts.drillDownListFunc) {
             chartOptions.plotOptions.series.cursor = 'pointer';
             chartOptions.plotOptions.series.point = {
@@ -2479,13 +2448,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         chartOptions.tooltip = {
             formatter: highchartsRenderer.defaultFormatterToTooltip(pivotData, opts),
-            shadow: highchartsRenderer.tooltipShadow,
             valueDecimals: 2,
-            enabled: additionOptions && additionOptions.tooltips ? additionOptions.tooltips.show : true
         };
-        if (useNewUx) {
-          chartOptions.tooltip.borderColor = '#fff';
-        }
 
         chartOptions.plotOptions = {
             series: {
@@ -2499,6 +2463,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         };
 
+        chartOptions.plotOptions.series = highchartsRenderer.getDataLabelsOptions(additionOptions, chartOptions.plotOptions.series);
+
         if (opts.drillDownListFunc) {
             chartOptions.plotOptions.series.cursor = 'pointer';
             chartOptions.plotOptions.series.point = {
@@ -2587,13 +2553,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         chartOptions.tooltip = {
             formatter: highchartsRenderer.defaultFormatterToTooltip(pivotData, opts),
-            shadow: highchartsRenderer.tooltipShadow,
             valueDecimals: 2,
-            enabled: additionOptions && additionOptions.tooltips ? additionOptions.tooltips.show : true
         };
-        if (useNewUx) {
-          chartOptions.tooltip.borderColor = '#fff';
-        }
 
         highchartsRenderer.handleGridLines(additionOptions, chartOptions);
 
@@ -2609,7 +2570,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         chartOptions.plotOptions = {
             column: {
                 pointPadding: 0.2,
-                borderWidth: 0
+                borderWidth: 0,
+                borderRadius: 1,
             },
             series: {
                 animation: !disableAnimation,
@@ -2622,9 +2584,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 }
             }
         };
-        if (useNewUx) {
-          chartOptions.plotOptions.column.borderRadius = 1;
-        }
 
         if (opts.drillDownListFunc) {
             chartOptions.plotOptions.series.cursor = 'pointer';
@@ -2637,7 +2596,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, rowAttrs.length, false);
 
-        chartOptions.drilldown = {};
+        chartOptions.drilldown = highchartsRenderer.getDataLabelsStylesForDrillDown(additionOptions);
 
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
@@ -2647,7 +2606,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         var rowAttrs = pivotData.rowAttrs;
         var additionOptions = opts.chartOptions ? opts.chartOptions : highchartsRenderer.getDefaultValueForChart('column-chart-stacked');
 
-
         chartOptions.chart = {
             type: 'column',
             zoomType: 'x',
@@ -2678,7 +2636,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             stackLabels: {
                 enabled: additionOptions && additionOptions.label ? additionOptions.label.show : true,
                 formatter: function () {
-                    var presentOnlyColumnTotal = additionOptions && additionOptions.label && additionOptions.label.present_total;
+                    var presentTotal = additionOptions && additionOptions.label && additionOptions.label.present_total;
                     var hideSubtotals = additionOptions && additionOptions.label && additionOptions.label.hide_subtotals;
                     var showTotalsPercentage = additionOptions && additionOptions.label && additionOptions.label.show_percentage;
 
@@ -2688,14 +2646,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
                     if (this.total) {
                         var total = parseFloat(this.total);
-                        var agg = pivotData.getAggregator([], presentOnlyColumnTotal ? pivotData.colKeys[this.x] : []);
+                        var agg = pivotData.getAggregator([], presentTotal ? pivotData.colKeys[this.x] : []);
 
                         let result = '';
                         if (agg) {
                             let percentages = '';
-                            result = presentOnlyColumnTotal ? this.total > 0 ? agg.sum : '' : total;
+                            result = this.total > 0 ? this.total : total;
 
-                            if (result === '') {
+                            if (!result) {
                                 return '';
                             }
 
@@ -2705,7 +2663,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                                 percentages = aggTotalValue ? ' (' + Math.round(result/aggTotalValue * 100) + '%)' : '';
                             }
 
-                            result = agg.format(result, true) + percentages;
+                            result = (presentTotal ? agg.format(result, true) : '') + percentages;
                         } else {
                             result = total.toLocaleString();
                         }
@@ -2713,26 +2671,21 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     }
                     return "";
                 },
-                style: {
-                    fontWeight: useNewUx ? 'normal' : 'bold',
-                    color: (highchartsRenderer.highcharts_theme && highchartsRenderer.highcharts_theme.textColor) || 'gray'
-                }
+                style: highchartsRenderer.getDataLabelsStyle(additionOptions),
             },
             labels: {
                 formatter: highchartsRenderer.defaultValueLabelsFormatter(pivotData, opts)
             }
         };
 
+        chartOptions.yAxis.stackLabels = lodash.merge(highchartsRenderer.getDataLabelsOptions(additionOptions, { dataLabels: {} }).dataLabels, chartOptions.yAxis.stackLabels);
+        chartOptions.yAxis.stackLabels.style.color = chartOptions.yAxis.stackLabels.color;
+
         chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, rowAttrs.length, false);
 
         chartOptions.tooltip = {
             formatter: highchartsRenderer.defaultFormatterToTooltip(pivotData, opts),
-            shadow: highchartsRenderer.tooltipShadow,
-            enabled: additionOptions && additionOptions.tooltips ? additionOptions.tooltips.show : true
         };
-        if (useNewUx) {
-          chartOptions.tooltip.borderColor = '#fff';
-        }
 
         if (additionOptions && additionOptions.chart) {
             chartOptions.colors = highchartsRenderer.getColorsWithOffset(additionOptions.chart.colors_offset);
@@ -2744,7 +2697,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 stacking: 'normal',
                 dataLabels: {
                     allowOverlap: additionOptions && additionOptions.label ? additionOptions.label.overlap : false,
-                    enabled: additionOptions && additionOptions.label ? additionOptions.label.percentage : false,
                     "formatter": function () {
                         return (Math.round((this.y / this.total) * 10000) / 100) + '%';
                     },
@@ -2760,6 +2712,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         };
 
+        chartOptions.plotOptions.column = highchartsRenderer.getDataLabelsOptions(additionOptions, chartOptions.plotOptions.column);
+
         if (opts.drillDownListFunc) {
             chartOptions.plotOptions.series = {};
             chartOptions.plotOptions.series.cursor = 'pointer';
@@ -2843,6 +2797,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     formatter: highchartsRenderer.defaultDataLabelFormatter(pivotData, opts),
                     style: highchartsRenderer.getDataLabelsStyle(additionOptions)
                 }
+            },
+            column: {
+                borderRadius: 1,
             }
         };
 
@@ -2856,13 +2813,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     return '<b>' + this.point.name + '</b>: ' + y.toLocaleString();
                 }
             },
-            shadow: highchartsRenderer.tooltipShadow,
-            enabled: additionOptions && additionOptions.tooltips ? additionOptions.tooltips.show : true
         };
-        if (useNewUx) {
-          chartOptions.plotOptions.column.borderRadius = 1;
-          chartOptions.tooltip.borderColor = '#fff';
-        }
 
         chartOptions.xAxis = {type: 'category'};
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
@@ -2877,30 +2828,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
-    highchartsRenderer.getDataLabelsStyle = function (additionOptions, defaultStyle) {
-        let style = {};
-
-        if (defaultStyle) {
-            style = defaultStyle;
-        }
-
-        if (additionOptions && additionOptions.label && additionOptions.label.style != '') {
-            try {
-                style = JSON.parse(additionOptions.label.style);
-            } catch (e) {
-                style = {};
-            }
-        }
-
-        if(typeof style !== 'object' || style === null){
-            style = {};
-        }
-
-        style.fontWeight = useNewUx ? 'normal' : 'bold';
-
-        return style;
-    }
-
     highchartsRenderer.ptRenderBar = function (pivotData, opts) {
         var chartOptions = {};
         var rowAttrs = pivotData.rowAttrs;
@@ -2925,13 +2852,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         };
         chartOptions.tooltip = {
             formatter: highchartsRenderer.defaultFormatterToTooltip(pivotData, opts),
-            shadow: highchartsRenderer.tooltipShadow,
             valueDecimals: 2,
-            enabled: additionOptions && additionOptions.tooltips ? additionOptions.tooltips.show : true
         };
-        if (useNewUx) {
-          chartOptions.tooltip.borderColor = '#fff';
-        }
 
         if (additionOptions && additionOptions.chart) {
             chartOptions.colors = highchartsRenderer.getColorsWithOffset(additionOptions.chart.colors_offset);
@@ -2951,7 +2873,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         chartOptions.plotOptions = {
             column: {
                 pointPadding: 0.2,
-                borderWidth: 0
+                borderWidth: 0,
+                borderRadius: 1,
             },
             series: {
                 animation: !disableAnimation,
@@ -2964,9 +2887,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 }
             }
         };
-        if (useNewUx) {
-          chartOptions.plotOptions.column.borderRadius = 1;
-        }
+
+        chartOptions.plotOptions.series = highchartsRenderer.getDataLabelsOptions(additionOptions, chartOptions.plotOptions.series);
 
         if (opts.drillDownListFunc) {
             chartOptions.plotOptions.series.cursor = 'pointer';
@@ -3015,7 +2937,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     return "";
                 },
                 style: {
-                    fontWeight: useNewUx ? 'normal' : 'bold',
+                    fontWeight: 'normal',
                     color: (highchartsRenderer.highcharts_theme && highchartsRenderer.highcharts_theme.textColor) || 'gray'
                 }
             },
@@ -3029,12 +2951,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         chartOptions.tooltip = {
             formatter: highchartsRenderer.defaultFormatterToTooltip(pivotData, opts),
-            shadow: highchartsRenderer.tooltipShadow,
-            enabled: additionOptions && additionOptions.tooltips ? additionOptions.tooltips.show : true
         };
-        if (useNewUx) {
-          chartOptions.tooltip.borderColor = '#fff';
-        }
 
         if (additionOptions && additionOptions.chart) {
             chartOptions.colors = highchartsRenderer.getColorsWithOffset(additionOptions.chart.colors_offset);
@@ -4247,6 +4164,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         subopts.rendererOptions.chart_title = widget.name;
 
+        subopts.rendererOptions.chartLabels = {
+            legend: highchartsRenderer.getChartLegendLabel(widget.chart_type),
+            axis: highchartsRenderer.getChartAxisLabel(widget.chart_type),
+        };
+
         if (!subopts.rendererOptions.chartOptions) {
             subopts.rendererOptions.chartOptions = {};
         }
@@ -4577,6 +4499,19 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             options.chartOptions.legends_position = { value: 'none' };
             delete options.chartOptions.chart.hideLegends;
         }
+        if (lodash.has(options, 'chartOptions.error_policy') || lodash.has(options, 'chartOptions.from_version')) {
+            const errorPolicy = lodash.get(options, 'chartOptions.error_policy.error_policy', null);
+            const fromVersion = lodash.get(options, 'chartOptions.from_version.value', null);
+            options.chartOptions.advanced = {};
+            options.chartOptions.advanced.from_latest = fromVersion || '';
+            options.chartOptions.advanced.error_policy = errorPolicy || 'None';
+            delete options.chartOptions.error_policy;
+            delete options.chartOptions.from_version;
+        }
+        if (lodash.has(options, 'chartOptions.label.style') || lodash.has(options, 'chartOptions.label_pie.style')) {
+            const keyToRemove = lodash.has(options, 'chartOptions.label_pie') ? 'label_pie' : 'label'
+            delete options.chartOptions[keyToRemove].style;
+        }
         if (lodash.includes(['pie-chart', 'pie-chart-drilldown'], type)) {
             if (options.chartOptions && options.chartOptions.label) {
                 if (options.chartOptions.label.only_value) {
@@ -4641,6 +4576,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
     };
 
+    highchartsRenderer.setMissingWidgetOptions = function(options, type) {
+        if (!lodash.has(options, 'chartOptions')) return;
+        const defaultOptions = highchartsRenderer.getDefaultValueForChart(type);
+        options.chartOptions = lodash.merge(defaultOptions, options.chartOptions);
+    };
+
     highchartsRenderer.addPivotOptions = function (selectedTemplateWOData, widgetOptions, drilldownFunction, drillDownListFunction) {
         // Check if not rendered data, than it will render
 
@@ -4681,6 +4622,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         });
 
+        highchartsRenderer.setMissingWidgetOptions(widgetOptions.options, widgetOptions.chart_type);
         highchartsRenderer.updateBackwardCompatibleWidgetOptions(widgetOptions.options, widgetOptions.chart_type);
 
         widgetOptions.pivot.axisArray = xaxisFields;
@@ -5139,6 +5081,76 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return valToReturn;
     };
 
+    highchartsRenderer.getCommonChartOptions = function(additionalOptions) {
+        let result = {};
+
+        const hasTooltipOptions = lodash.has(additionalOptions, 'tooltips');
+        if (hasTooltipOptions) {
+            result.tooltip = lodash.cloneDeep(TOOLTIP_DEFAULT_OPTIONS);
+
+            const tooltipOptions = {
+                enabled: lodash.get(additionalOptions, 'tooltips.show', true),
+                style: {
+                    fontSize: lodash.get(additionalOptions, 'tooltips.font_size'),
+                    fontFamily: lodash.get(additionalOptions, 'tooltips.font_style'),
+                    color: lodash.get(additionalOptions, 'tooltips.font_color'),
+                },
+            };
+            result.tooltip = lodash.merge(result.tooltip, tooltipOptions);
+        }
+
+        return result;
+    };
+
+    highchartsRenderer.getDataLabelsStyle = function (additionalOptions, defaultStyle) {
+        let style = {};
+
+        if (defaultStyle) {
+            style = defaultStyle;
+        }
+
+        if (typeof style !== 'object' || style === null) {
+            style = {};
+        }
+
+        const key = highchartsRenderer.getLabelOptionKey(additionalOptions);
+        if (key) {
+            const labelStyles = {
+                fontSize: lodash.get(additionalOptions, `${key}.font_size`),
+                fontFamily: lodash.get(additionalOptions, `${key}.font_style`),
+            };
+            style = lodash.merge(style, labelStyles);
+        }
+
+        return style;
+    };
+
+    highchartsRenderer.getDataLabelsOptions = function(additionalOptions, chartOptions) {
+        let result = lodash.cloneDeep(LABEL_DEFAULT_OPTIONS);
+        const key = highchartsRenderer.getLabelOptionKey(additionalOptions);
+
+        if (!key) {
+            result = lodash.merge(result, chartOptions.dataLabels);
+            chartOptions.dataLabels = result;
+            return chartOptions;
+        }
+
+        const options = {
+            color: lodash.get(additionalOptions, `${key}.font_color`),
+        };
+        result = lodash.merge(result, options);
+        result = lodash.merge(result, chartOptions.dataLabels);
+        chartOptions.dataLabels = result;
+
+        return chartOptions;
+    };
+
+    highchartsRenderer.getLabelOptionKey = function(additionalOptions) {
+        let key = lodash.filter(lodash.keys(additionalOptions), (value) => lodash.includes(value, 'label'));
+        key = key.length ? key[0] : null;
+        return key
+    };
+
     const fontSizeValues = lodash.map(new Array(19), (item, index) => {
         const fontValue = index + 6;
         return {label: fontValue, value: fontValue}
@@ -5150,13 +5162,52 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         'Courier New',
         'Helvetica',
         'Impact',
-        'Poppins',
+        'Nunito Sans',
         'Tahoma',
         'Times New Roman',
         'Verdana',
         'Poppins'
     ];
 
+    const TOOLTIP_DEFAULT_SETTINGS = {
+        FONT_COLOR: '#545a6b',
+        FONT_SIZE: '12',
+        FONT_FAMILY: HIGHCHARTS_FONT_FAMILY,
+    };
+
+    const TOOLTIP_DEFAULT_OPTIONS = {
+        borderColor: '#fff',
+        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 LABEL_DEFAULT_SETTINGS = {
+        FONT_COLOR: textColor,
+        FONT_SIZE: '11',
+        FONT_FAMILY: HIGHCHARTS_FONT_FAMILY,
+    };
+
+    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 CHART_AXIS_DEFAULT_LABEL = 'Axis (Category)';
+    const CHART_LEGEND_DEFAULT_LABEL = 'Legend (Series)';
+
     highchartsRenderer.getDefaultValueForSubOptions = function (type, existing_options) {
         var valToReturn = {};
         var option = highchartsRenderer.suboptions[type] || lodash.find(highchartsRenderer.suboptions, suboption => suboption.category_type === type);
@@ -5173,23 +5224,37 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return valToReturn;
     };
 
+    
+    highchartsRenderer.getChartAxisLabel = function(type) {
+        return highchartsRenderer.chartsTypesInfo[type] ? highchartsRenderer.chartsTypesInfo[type].axisName : CHART_AXIS_DEFAULT_LABEL;
+    };
+
+    highchartsRenderer.getChartLegendLabel = function(type) {
+        return highchartsRenderer.chartsTypesInfo[type] ? highchartsRenderer.chartsTypesInfo[type].legendName : CHART_LEGEND_DEFAULT_LABEL;
+    };
+
     highchartsRenderer.widgetPlaceholders = lodash.assign({}, $.pivotUtilities.errorHandling.placeholders);
 
     highchartsRenderer.suboptions = {
-        'default_show': {
+        'widget_library': {
+            is_hidden: true,
             category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Graph/Table',
-            category_type: 'default_show',
-            elements: [{
-                element_type: 'radio',
-                value_name: 'value',
-                element_label: 'Show by default',
-                element_options: [
-                    {label: 'Graph', value: 'graph'},
-                    {label: 'Table', value: 'table'}
-                ],
-                default_value: 'graph'
-            }]
+            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: ''
+                }
+            ]
         },
         'table_options': {
             category_class: 'google-visualization-charteditor-mini-more',
@@ -5596,17 +5661,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 default_value: ''
             }]
         },
-        'description': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Description',
-            category_type: 'description',
-            elements: [{
-                element_type: 'textarea',
-                value_name: 'description',
-                element_label: 'Widget Description',
-                default_value: ''
-            }]
-        },
         'chart': {
             category_class: 'google-visualization-charteditor-mini-more',
             category_label: 'Chart',
@@ -5661,29 +5715,71 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             category_class: 'google-visualization-charteditor-mini-more',
             category_label: 'Label',
             category_type: 'label',
-            elements: [{
-                element_type: 'checkbox',
-                element_label: 'Show',
-                value_name: 'show',
-                default_value: true
-            },
+            elements: [
                 {
-                    element_type: 'checkbox',
+                    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: 'input',
-                    value_name: 'style',
-                    element_label: 'Style',
-                    default_value: ''
+                    element_type: 'devider',
+                },
+                {
+                    element_type: 'devider',
+                    element_label: 'Label Style',
+                },
+                {
+                    element_type: 'select',
+                    value_name: 'font_style',
+                    element_label: 'Font style',
+                    element_options: fonts,
+                    default_value: LABEL_DEFAULT_SETTINGS.FONT_FAMILY,
+                },
+                {
+                    element_type: 'select',
+                    value_name: 'font_size',
+                    element_label: 'Font size',
+                    element_options: fontSizeValues,
+                    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: 'Show %',
-                    value_name: 'show_percentage',
-                    default_value: false
+                    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,
                 },
             ]
         },
@@ -5693,86 +5789,158 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             category_type: 'label_pie',
             elements: [
                 {
-                    element_type: 'checkbox',
-                    element_label: 'Show Labels',
+                    element_type: 'toggle',
+                    element_label: 'Show',
                     value_name: 'show',
                     default_value: false,
-                    disabled_str: '!{var}.show_value_in_labels && !{var}.show_percentage_in_labels',
-                    disabled_fn: (value) => !value.show_value_in_labels && !value.show_percentage_in_labels,
+                    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: 'checkbox',
+                    element_type: 'toggle',
                     element_label: 'Overlap',
                     value_name: 'overlap',
                     default_value: false
                 },
                 {
-                    element_type: 'checkbox',
+                    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: fonts,
+                    default_value: LABEL_DEFAULT_SETTINGS.FONT_FAMILY,
+                },
+                {
+                    element_type: 'select',
+                    value_name: 'font_size',
+                    element_label: 'Font size',
+                    element_options: fontSizeValues,
+                    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: 'Show Value in Labels',
+                    element_label: 'Value',
                     value_name: 'show_value_in_labels',
-                    default_value: false,
-                    clickFn: (value) => value.show = value.show_value_in_labels && !value.show_percentage_in_labels ? false : value.show,
+                    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 percentage in Labels',
+                    element_label: 'Show %',
                     value_name: 'show_percentage_in_labels',
                     default_value: false,
-                    clickFn: (value) => value.show = !value.show_value_in_labels && value.show_percentage_in_labels ? false : value.show,
+                    clickFn: (value) => value.show = value.show ? value.show_percentage_in_labels || value.show_value_in_labels : value.show,
                 },
-                {
-                    element_type: 'input',
-                    value_name: 'style',
-                    element_label: 'Style',
-                    default_value: ''
-                }
             ]
         },
         'label_with_percentage': {
             category_class: 'google-visualization-charteditor-mini-more',
             category_label: 'Label',
             category_type: 'label',
-            elements: [{
-                element_type: 'checkbox',
-                element_label: 'Show',
-                value_name: 'show',
-                default_value: true
-            },
+            elements: [
                 {
-                    element_type: 'checkbox',
+                    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: 'checkbox',
-                    element_label: 'Percentage',
-                    value_name: 'percentage',
+                    element_type: 'toggle',
+                    element_label: 'Shadow',
+                    value_name: 'shadow',
                     default_value: false
                 },
                 {
-                    element_type: 'checkbox',
-                    element_label: 'Shadow',
-                    value_name: 'shadow',
+                    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: fonts,
+                    default_value: LABEL_DEFAULT_SETTINGS.FONT_FAMILY,
+                },
+                {
+                    element_type: 'select',
+                    value_name: 'font_size',
+                    element_label: 'Font size',
+                    element_options: fontSizeValues,
+                    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: 'Present total',
-                    value_name: 'present_total',
-                    default_value: false
+                    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: 'Hide subtotals',
-                    value_name: 'hide_subtotals',
-                    default_value: false
+                    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',
@@ -5872,14 +6040,156 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         },
         'tooltips': {
             category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Tool Tips',
+            category_label: 'Tooltip',
             category_type: 'tooltips',
-            elements: [{
-                element_type: 'checkbox',
-                element_label: 'Show',
-                value_name: 'show',
-                default_value: true
-            }]
+            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: fonts,
+                    default_value: TOOLTIP_DEFAULT_SETTINGS.FONT_FAMILY,
+                },
+                {
+                    element_type: 'select',
+                    value_name: 'font_size',
+                    element_label: 'Font size',
+                    element_options: fontSizeValues,
+                    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: fonts,
+                    default_value: TOOLTIP_DEFAULT_SETTINGS.FONT_FAMILY,
+                },
+                {
+                    element_type: 'select',
+                    value_name: 'font_size',
+                    element_label: 'Font size',
+                    element_options: fontSizeValues,
+                    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,
+                },
+            ]
         },
         'negative_number_format': {
             category_class: 'google-visualization-charteditor-mini-more',
@@ -6054,41 +6364,39 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 default_value: false
             }]
         },
-        'from_version': {
-            category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Version',
-            category_type: 'from_version',
-            elements: [{
-                element_type: 'radio',
-                value_name: 'value',
-                element_label: 'From latest:',
-                element_options: [
-                    {label: 'In every time dimension', value: ''},
-                    {label: 'Submitted', value: 'latest_submitted'},
-                    {label: 'In most recent time period', value: 'latest_in_last_chronology_date_dimension'},
-                    {
-                        label: 'In most recent time period in every FileBoxes',
-                        value: 'latest_in_last_chronology_date_dimension_in_every_fbs'
-                    },
-                ],
-                default_value: ''
-            }]
-        },
-        'error_policy': {
+        'advanced': {
             category_class: 'google-visualization-charteditor-mini-more',
-            category_label: 'Error Policy',
-            category_type: 'error_policy',
-            elements: [{
-                element_type: 'radio',
-                value_name: 'error_policy',
-                element_label: '',
-                element_options: [
-                    {label: 'None', value: 'None'},
-                    {label: 'Error', value: 'Error'},
-                    {label: 'Zero (0)', value: '0'},
-                ],
-                default_value: 'None'
-            }]
+            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: 'In every time dimension', value: '' },
+                        { label: 'Submitted', value: 'latest_submitted' },
+                        { label: 'In most recent time period', value: 'latest_in_last_chronology_date_dimension' },
+                        {
+                            label: 'In most recent time period in every FileBoxes',
+                            value: 'latest_in_last_chronology_date_dimension_in_every_fbs'
+                        },
+                    ],
+                    default_value: ''
+                },
+            ]
         },
         'legends': {
           category_class: 'google-visualization-charteditor-mini-more',
@@ -6321,20 +6629,18 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     class: 'google-visualization-charteditor-thumbs-linechart',
                     render: highchartsRenderer.ptRenderBasicLine,
                     suboptions: [
-                        highchartsRenderer.suboptions["default_show"],
                         highchartsRenderer.suboptions["axisY"],
                         highchartsRenderer.suboptions["axisX"],
                         highchartsRenderer.suboptions["tooltips"],
                         highchartsRenderer.suboptions["label"],
                         highchartsRenderer.suboptions["subtitle"],
-                        highchartsRenderer.suboptions["description"],
+                        highchartsRenderer.suboptions["widget_library"],
                         highchartsRenderer.suboptions["table_options_transpose"],
                         highchartsRenderer.suboptions["table_design_options"],
                         highchartsRenderer.suboptions["chart_grid"],
                         highchartsRenderer.suboptions["negative_number_format"],
                         highchartsRenderer.suboptions["delta_column"],
-                        highchartsRenderer.suboptions["error_policy"],
-                        highchartsRenderer.suboptions["from_version"],
+                        highchartsRenderer.suboptions["advanced"],
                         highchartsRenderer.suboptions["legends"],
                     ],
                     default_options: {}
@@ -6345,20 +6651,18 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         class: 'google-visualization-charteditor-thumbs-linechart-smooth',
                         render: highchartsRenderer.ptRenderSpLine,
                         suboptions: [
-                            highchartsRenderer.suboptions["default_show"],
                             highchartsRenderer.suboptions["axisY"],
                             highchartsRenderer.suboptions["axisX"],
                             highchartsRenderer.suboptions["tooltips"],
                             highchartsRenderer.suboptions["label"],
                             highchartsRenderer.suboptions["subtitle"],
-                            highchartsRenderer.suboptions["description"],
+                            highchartsRenderer.suboptions["widget_library"],
                             highchartsRenderer.suboptions["table_options_transpose"],
                             highchartsRenderer.suboptions["table_design_options"],
                             highchartsRenderer.suboptions["chart_grid"],
                             highchartsRenderer.suboptions["negative_number_format"],
                             highchartsRenderer.suboptions["delta_column"],
-                            highchartsRenderer.suboptions["error_policy"],
-                            highchartsRenderer.suboptions["from_version"],
+                            highchartsRenderer.suboptions["advanced"],
                             highchartsRenderer.suboptions["legends"],
                         ]
                     },
@@ -6368,20 +6672,18 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         class: 'google-visualization-charteditor-thumbs-scatterchart',
                         render: highchartsRenderer.ptRenderScatterLine,
                         suboptions: [
-                            highchartsRenderer.suboptions["default_show"],
                             highchartsRenderer.suboptions["axisY"],
                             highchartsRenderer.suboptions["axisX"],
                             highchartsRenderer.suboptions["tooltips"],
                             highchartsRenderer.suboptions["label"],
                             highchartsRenderer.suboptions["subtitle"],
-                            highchartsRenderer.suboptions["description"],
+                            highchartsRenderer.suboptions["widget_library"],
                             highchartsRenderer.suboptions["table_options_transpose"],
                             highchartsRenderer.suboptions["table_design_options"],
                             highchartsRenderer.suboptions["chart_grid"],
                             highchartsRenderer.suboptions["negative_number_format"],
                             highchartsRenderer.suboptions["delta_column"],
-                            highchartsRenderer.suboptions["error_policy"],
-                            highchartsRenderer.suboptions["from_version"],
+                            highchartsRenderer.suboptions["advanced"],
                             highchartsRenderer.suboptions["legends"],
                         ]
                     }
@@ -6397,20 +6699,18 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     class: 'combo-column-chart',
                     render: highchartsRenderer.ptRenderColumn,
                     suboptions: [
-                        highchartsRenderer.suboptions["default_show"],
                         highchartsRenderer.suboptions["axisY"],
                         highchartsRenderer.suboptions["axisX"],
                         highchartsRenderer.suboptions["tooltips"],
                         highchartsRenderer.suboptions["label"],
                         highchartsRenderer.suboptions["subtitle"],
-                        highchartsRenderer.suboptions["description"],
+                        highchartsRenderer.suboptions["widget_library"],
                         highchartsRenderer.suboptions["table_options"],
                         highchartsRenderer.suboptions["table_design_options"],
                         highchartsRenderer.suboptions["chart"],
                         highchartsRenderer.suboptions["negative_number_format"],
                         highchartsRenderer.suboptions["delta_column_for_drill_down"],
-                        highchartsRenderer.suboptions["error_policy"],
-                        highchartsRenderer.suboptions["from_version"],
+                        highchartsRenderer.suboptions["advanced"],
                         highchartsRenderer.suboptions["legends"],
                     ],
                 },
@@ -6420,19 +6720,17 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         class: 'combo-stacked-chart',
                         render: highchartsRenderer.ptRenderStackedColumn,
                         suboptions: [
-                            highchartsRenderer.suboptions["default_show"],
                             highchartsRenderer.suboptions["axisY"],
                             highchartsRenderer.suboptions["axisX"],
                             highchartsRenderer.suboptions["tooltips"],
                             highchartsRenderer.suboptions["label_with_percentage"],
                             highchartsRenderer.suboptions["subtitle"],
-                            highchartsRenderer.suboptions["description"],
+                            highchartsRenderer.suboptions["widget_library"],
                             highchartsRenderer.suboptions["table_options"],
                             highchartsRenderer.suboptions["table_design_options"],
                             highchartsRenderer.suboptions["chart_grid"],
                             highchartsRenderer.suboptions["delta_column"],
-                            highchartsRenderer.suboptions["error_policy"],
-                            highchartsRenderer.suboptions["from_version"],
+                            highchartsRenderer.suboptions["advanced"],
                             highchartsRenderer.suboptions["legends"],
                         ]
                     }
@@ -6448,20 +6746,18 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     class: 'google-visualization-charteditor-thumbs-areachart',
                     render: highchartsRenderer.ptRenderArea,
                     suboptions: [
-                        highchartsRenderer.suboptions["default_show"],
                         highchartsRenderer.suboptions["axisY"],
                         highchartsRenderer.suboptions["axisX"],
                         highchartsRenderer.suboptions["tooltips"],
                         highchartsRenderer.suboptions["label"],
                         highchartsRenderer.suboptions["subtitle"],
-                        highchartsRenderer.suboptions["description"],
+                        highchartsRenderer.suboptions["widget_library"],
                         highchartsRenderer.suboptions["table_options_transpose"],
                         highchartsRenderer.suboptions["table_design_options"],
                         highchartsRenderer.suboptions["chart_grid"],
                         highchartsRenderer.suboptions["negative_number_format"],
                         highchartsRenderer.suboptions["delta_column"],
-                        highchartsRenderer.suboptions["error_policy"],
-                        highchartsRenderer.suboptions["from_version"],
+                        highchartsRenderer.suboptions["advanced"],
                         highchartsRenderer.suboptions["legends"],
                     ]
                 },
@@ -6471,20 +6767,18 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         class: 'google-visualization-charteditor-thumbs-areachart-smooth',
                         render: highchartsRenderer.ptRenderArea,
                         suboptions: [
-                            highchartsRenderer.suboptions["default_show"],
                             highchartsRenderer.suboptions["axisY"],
                             highchartsRenderer.suboptions["axisX"],
                             highchartsRenderer.suboptions["tooltips"],
                             highchartsRenderer.suboptions["label"],
                             highchartsRenderer.suboptions["subtitle"],
-                            highchartsRenderer.suboptions["description"],
+                            highchartsRenderer.suboptions["widget_library"],
                             highchartsRenderer.suboptions["table_options_transpose"],
                             highchartsRenderer.suboptions["table_design_options"],
                             highchartsRenderer.suboptions["chart_grid"],
                             highchartsRenderer.suboptions["negative_number_format"],
                             highchartsRenderer.suboptions["delta_column"],
-                            highchartsRenderer.suboptions["error_policy"],
-                            highchartsRenderer.suboptions["from_version"],
+                            highchartsRenderer.suboptions["advanced"],
                             highchartsRenderer.suboptions["legends"],
                         ]
                     },
@@ -6494,17 +6788,15 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         class: 'google-visualization-charteditor-thumbs-imageradarchart',
                         render: highchartsRenderer.ptRenderPolygon,
                         suboptions: [
-                            highchartsRenderer.suboptions["default_show"],
                             highchartsRenderer.suboptions["tooltips"],
                             highchartsRenderer.suboptions["label"],
                             highchartsRenderer.suboptions["subtitle"],
-                            highchartsRenderer.suboptions["description"],
+                            highchartsRenderer.suboptions["widget_library"],
                             highchartsRenderer.suboptions["table_options_transpose"],
                             highchartsRenderer.suboptions["table_design_options"],
                             highchartsRenderer.suboptions["negative_number_format"],
                             highchartsRenderer.suboptions["delta_column"],
-                            highchartsRenderer.suboptions["error_policy"],
-                            highchartsRenderer.suboptions["from_version"],
+                            highchartsRenderer.suboptions["advanced"],
                             highchartsRenderer.suboptions["legends"],
                         ]
                     }
@@ -6521,20 +6813,18 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         class: 'google-visualization-charteditor-thumbs-columnchart',
                         render: highchartsRenderer.ptRenderColumn,
                         suboptions: [
-                            highchartsRenderer.suboptions["default_show"],
                             highchartsRenderer.suboptions["axisY"],
                             highchartsRenderer.suboptions["axisX"],
                             highchartsRenderer.suboptions["tooltips"],
                             highchartsRenderer.suboptions["label"],
                             highchartsRenderer.suboptions["subtitle"],
-                            highchartsRenderer.suboptions["description"],
+                            highchartsRenderer.suboptions["widget_library"],
                             highchartsRenderer.suboptions["table_options"],
                             highchartsRenderer.suboptions["table_design_options"],
                             highchartsRenderer.suboptions["chart"],
                             highchartsRenderer.suboptions["negative_number_format"],
                             highchartsRenderer.suboptions["delta_column_for_drill_down"],
-                            highchartsRenderer.suboptions["error_policy"],
-                            highchartsRenderer.suboptions["from_version"],
+                            highchartsRenderer.suboptions["advanced"],
                             highchartsRenderer.suboptions["legends"],
                         ]
                     },
@@ -6544,19 +6834,17 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         class: 'google-visualization-charteditor-thumbs-columnchart-stacked',
                         render: highchartsRenderer.ptRenderStackedColumn,
                         suboptions: [
-                            highchartsRenderer.suboptions["default_show"],
                             highchartsRenderer.suboptions["axisY"],
                             highchartsRenderer.suboptions["axisX"],
                             highchartsRenderer.suboptions["tooltips"],
                             highchartsRenderer.suboptions["label_with_percentage"],
                             highchartsRenderer.suboptions["subtitle"],
-                            highchartsRenderer.suboptions["description"],
+                            highchartsRenderer.suboptions["widget_library"],
                             highchartsRenderer.suboptions["table_options"],
                             highchartsRenderer.suboptions["table_design_options"],
                             highchartsRenderer.suboptions["chart_grid"],
                             highchartsRenderer.suboptions["delta_column"],
-                            highchartsRenderer.suboptions["error_policy"],
-                            highchartsRenderer.suboptions["from_version"],
+                            highchartsRenderer.suboptions["advanced"],
                             highchartsRenderer.suboptions["legends"],
                         ]
                     }
@@ -6572,20 +6860,18 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     class: 'google-visualization-charteditor-thumbs-barchart',
                     render: highchartsRenderer.ptRenderBar,
                     suboptions: [
-                        highchartsRenderer.suboptions["default_show"],
                         highchartsRenderer.suboptions["axisY"],
                         highchartsRenderer.suboptions["axisX"],
                         highchartsRenderer.suboptions["tooltips"],
                         highchartsRenderer.suboptions["label"],
                         highchartsRenderer.suboptions["subtitle"],
-                        highchartsRenderer.suboptions["description"],
+                        highchartsRenderer.suboptions["widget_library"],
                         highchartsRenderer.suboptions["table_options_transpose"],
                         highchartsRenderer.suboptions["table_design_options"],
                         highchartsRenderer.suboptions["chart_grid"],
                         highchartsRenderer.suboptions["negative_number_format"],
                         highchartsRenderer.suboptions["delta_column"],
-                        highchartsRenderer.suboptions["error_policy"],
-                        highchartsRenderer.suboptions["from_version"],
+                        highchartsRenderer.suboptions["advanced"],
                         highchartsRenderer.suboptions["legends"],
                     ]
                 },
@@ -6595,20 +6881,18 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         class: 'google-visualization-charteditor-thumbs-barchart-stacked',
                         render: highchartsRenderer.ptRenderStackedBar,
                         suboptions: [
-                            highchartsRenderer.suboptions["default_show"],
                             highchartsRenderer.suboptions["axisY"],
                             highchartsRenderer.suboptions["axisX"],
                             highchartsRenderer.suboptions["tooltips"],
                             highchartsRenderer.suboptions["label"],
                             highchartsRenderer.suboptions["subtitle"],
-                            highchartsRenderer.suboptions["description"],
+                            highchartsRenderer.suboptions["widget_library"],
                             highchartsRenderer.suboptions["table_options_transpose"],
                             highchartsRenderer.suboptions["table_design_options"],
                             highchartsRenderer.suboptions["chart_grid"],
                             highchartsRenderer.suboptions["negative_number_format"],
                             highchartsRenderer.suboptions["delta_column"],
-                            highchartsRenderer.suboptions["error_policy"],
-                            highchartsRenderer.suboptions["from_version"],
+                            highchartsRenderer.suboptions["advanced"],
                             highchartsRenderer.suboptions["legends"],
                         ]
                     }
@@ -6625,16 +6909,15 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     class: 'google-visualization-charteditor-thumbs-piechart',
                     render: highchartsRenderer.ptRenderBasicPie,
                     suboptions: [
-                        highchartsRenderer.suboptions["default_show"],
-                        highchartsRenderer.suboptions["tooltips"],
+                        highchartsRenderer.suboptions["tooltips_pie"],
                         highchartsRenderer.suboptions["label_pie"],
                         highchartsRenderer.suboptions["subtitle"],
-                        highchartsRenderer.suboptions["description"],
+                        highchartsRenderer.suboptions["widget_library"],
                         highchartsRenderer.suboptions["table_options_transpose"],
                         highchartsRenderer.suboptions["table_design_options"],
                         highchartsRenderer.suboptions["chart"],
                         highchartsRenderer.suboptions["negative_number_format"],
-                        highchartsRenderer.suboptions["from_version"],
+                        highchartsRenderer.suboptions["advanced"],
                         highchartsRenderer.suboptions["legends"],
                     ]
                 },
@@ -6644,16 +6927,15 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         class: 'google-visualization-charteditor-thumbs-piechart-drilldown',
                         render: highchartsRenderer.ptRenderPieWithDrillDown,
                         suboptions: [
-                            highchartsRenderer.suboptions["default_show"],
-                            highchartsRenderer.suboptions["tooltips"],
+                            highchartsRenderer.suboptions["tooltips_pie"],
                             highchartsRenderer.suboptions["label_pie"],
                             highchartsRenderer.suboptions["subtitle"],
-                            highchartsRenderer.suboptions["description"],
+                            highchartsRenderer.suboptions["widget_library"],
                             highchartsRenderer.suboptions["table_options_transpose"],
                             highchartsRenderer.suboptions["table_design_options"],
                             highchartsRenderer.suboptions["chart"],
                             highchartsRenderer.suboptions["negative_number_format"],
-                            highchartsRenderer.suboptions["from_version"],
+                            highchartsRenderer.suboptions["advanced"],
                             highchartsRenderer.suboptions["legends"],
                         ]
                     }
@@ -6673,12 +6955,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     class: 'google-visualization-charteditor-thumbs-gauge-solid',
                     render: highchartsRenderer.ptRenderSolidGauge,
                     suboptions: [
-                        highchartsRenderer.suboptions["default_show"],
                         highchartsRenderer.suboptions["value"],
                         highchartsRenderer.suboptions["range"],
                         highchartsRenderer.suboptions["tooltips"],
                         highchartsRenderer.suboptions["subtitle"],
-                        highchartsRenderer.suboptions["description"],
+                        highchartsRenderer.suboptions["widget_library"],
                         highchartsRenderer.suboptions["table_options_transpose"],
                         highchartsRenderer.suboptions["table_design_options"],
                         highchartsRenderer.suboptions["chart_grid"],
@@ -6692,12 +6973,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         class: 'google-visualization-charteditor-thumbs-gauge',
                         render: highchartsRenderer.ptRenderGauge,
                         suboptions: [
-                            highchartsRenderer.suboptions["default_show"],
                             highchartsRenderer.suboptions["value"],
                             highchartsRenderer.suboptions["range"],
                             highchartsRenderer.suboptions["tooltips"],
                             highchartsRenderer.suboptions["subtitle"],
-                            highchartsRenderer.suboptions["description"],
+                            highchartsRenderer.suboptions["widget_library"],
                             highchartsRenderer.suboptions["table_options_transpose"],
                             highchartsRenderer.suboptions["table_design_options"],
                             highchartsRenderer.suboptions["chart_grid"],
@@ -6717,10 +6997,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     class: 'google-visualization-charteditor-thumbs-kpi',
                     render: highchartsRenderer.ptRenderKpi,
                     suboptions: [
-                        highchartsRenderer.suboptions["default_show"],
                         highchartsRenderer.suboptions["value"],
                         highchartsRenderer.suboptions["range"],
-                        highchartsRenderer.suboptions["description"],
+                        highchartsRenderer.suboptions["widget_library"],
                         highchartsRenderer.suboptions["name"],
                         highchartsRenderer.suboptions["table_options_transpose"],
                         highchartsRenderer.suboptions["table_design_options"],
@@ -6740,9 +7019,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     class: 'google-visualization-charteditor-thumbs-text',
                     render: highchartsRenderer.ptRenderText,
                     suboptions: [
-                        highchartsRenderer.suboptions["default_show"],
                         highchartsRenderer.suboptions["name"],
-                        highchartsRenderer.suboptions["description"],
+                        highchartsRenderer.suboptions["widget_library"],
                         highchartsRenderer.suboptions["table_options_transpose"],
                         highchartsRenderer.suboptions["table_design_options"],
                         highchartsRenderer.suboptions["negative_number_format"],
@@ -6760,13 +7038,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     class: 'google-visualization-charteditor-thumbs-table',
                     render: highchartsRenderer.ptRenderBasicLine,
                     suboptions: [
-                        highchartsRenderer.suboptions["description"],
+                        highchartsRenderer.suboptions["widget_library"],
                         highchartsRenderer.suboptions["table_options_transpose"],
                         highchartsRenderer.suboptions["table_design_options"],
                         highchartsRenderer.suboptions["negative_number_format"],
                         highchartsRenderer.suboptions["delta_column"],
-                        highchartsRenderer.suboptions["error_policy"],
-                        highchartsRenderer.suboptions["from_version"],
+                        highchartsRenderer.suboptions["advanced"],
                     ],
                     default_options: {}
                 }
@@ -7584,21 +7861,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         // another code for charts and tables
 
-        let default_show = lodash.get(widget_obj.options, 'chartOptions.default_show.value', 'chart');
-
         let subopts = null;
-        let is_table = false;
 
-        if (default_show == "table"){
-            subopts = highchartsRenderer.getOptionsForTable(widget_obj, pivot);
-            is_table = true;
-        }
-        else{
-            subopts = highchartsRenderer.getSupOptionsForPivot(widget_obj, pivot, true);
-            subopts.onlyOptions = true;
-        }
+        subopts = highchartsRenderer.getSupOptionsForPivot(widget_obj, pivot, true);
+        subopts.onlyOptions = true;
 
-        let hc_options = highchartsRenderer.rhPivotView(res, subopts, is_table);
+        let hc_options = highchartsRenderer.rhPivotView(res, subopts, false);
 
         return hc_options;
     }