diff --git a/dashboards-observability/.cypress/integration/1_event_analytics.spec.js b/dashboards-observability/.cypress/integration/1_event_analytics.spec.js
index f2b0db3c6..3f43a6eb7 100644
--- a/dashboards-observability/.cypress/integration/1_event_analytics.spec.js
+++ b/dashboards-observability/.cypress/integration/1_event_analytics.spec.js
@@ -21,10 +21,29 @@ import {
   renderTreeMapchart,
   renderPieChart,
   renderLineChartForDataConfig,
-  DataConfigLineChart
+  renderDataConfig,
+  aggregationValues,
+  DataConfigLineChart,
+  renderAddParent,
+  renderGaugeChart,
+  renderAddParent
 } from '../utils/event_constants';
 import { supressResizeObserverIssue } from '../utils/constants';
 
+const renderHistogramChart = () => {
+  querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].dateRangeDOM);
+  cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Histogram').type('{enter}');
+  cy.wait(delay);
+    cy.get('g.draglayer.cursor-crosshair').should('exist');
+    cy.get('#configPanel__panelOptions .euiFieldText').click().type('Histogram chart');
+    cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Histogram chart');
+    cy.get('.euiIEFlexWrapFix').eq(1).contains('Chart Styles').should('exist');
+    cy.get('.euiFormLabel.euiFormRow__label').eq(2).contains('Bucket Size');
+    cy.get('.euiFieldNumber').eq(0).type('4');
+    cy.get('.euiFormLabel.euiFormRow__label').eq(3).contains('Bucket Offset');
+    cy.get('.euiFieldNumber').eq(0).type('6');
+};
+
 const vis_name_sub_string = Math.floor(Math.random() * 100);
 const saveVisualizationAndVerify = () => {
   cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click();
@@ -857,3 +876,163 @@ describe('Render Time series chart/Line chart and verify Data configurations UI
     DataConfigLineChart();
   });
 });
+
+describe('Renders Data Configurations section for Pie chart', () => {
+  beforeEach(() => {
+    landOnEventVisualizations();
+  });
+
+  it('Renders Dimensions and Metrics under Data Configurations for Pie chart', () => {
+    renderPieChart();
+    renderDataConfig();
+  });
+
+  it('Validate "Add" and "X" buttons', () => {
+    renderPieChart();
+    cy.get('.euiResizablePanel.euiResizablePanel--middle').contains('Data Configurations');
+    cy.get('.euiButton.euiButton--primary.euiButton--fullWidth').contains('Add').click();
+    cy.get('.euiFormRow__fieldWrapper .euiComboBox').eq(3).click();
+    cy.get('.euiComboBoxOption__content').eq(2).click();
+    cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(4).click();
+    cy.get('.euiComboBoxOption__content').eq(1).click();
+    cy.get('.euiFieldText[placeholder="Custom label"]').eq(1).type('Demo field');
+    cy.get('.euiIcon.euiIcon--medium.euiIcon--danger').eq(1).click();
+    cy.get('.euiButton.euiButton--primary.euiButton--fullWidth').contains('Add').should('exist');
+  });
+
+  it('Verify drop down values for Aggregation', () => {
+    renderPieChart();
+    cy.get('.euiResizablePanel.euiResizablePanel--middle').contains('Data Configurations');
+    cy.get('.euiTitle.euiTitle--xxsmall').eq(1).contains('Dimensions').should('exist');
+    cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(0).contains('Aggregation');
+    cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click();
+    aggregationValues.forEach(function (value){
+      cy.get('.euiComboBoxOption__content').contains(value);
+    });
+  });
+
+  it('Collapsible mode for Data Configuration panel', () => {
+    renderPieChart();
+    cy.get('.euiResizablePanel.euiResizablePanel--middle').contains('Data Configurations');
+    cy.get('.euiResizableButton.euiResizableButton--horizontal').eq(1).click();
+    cy.get('[data-test-subj="panel-1-toggle"]').click();
+    cy.get('[class*="euiResizableToggleButton-isCollapsed"]').eq(1).should('exist');
+describe('Renders Histogram chart', () => {
+  beforeEach(() => {
+    landOnEventVisualizations();
+});
+
+it('Renders Histogram chart and save visualization', () => {
+  renderHistogramChart();
+    cy.get('.euiFlexItem.euiFlexItem--flexGrowZero .euiButton__text').eq(2).click();
+    cy.wait(delay);
+    saveVisualizationAndVerify();
+  });
+
+ it('Delete Visualization for Histogram chart from list of saved Visualizations on Event analytics page', () =>{
+  deleteVisualization();
+ })
+
+ it('Renders Histogram chart, add value parameters and verify Reset button click is working', () => {
+  renderHistogramChart();
+    cy.get('[data-test-subj="visualizeEditorResetButton"]').click();
+  });
+});
+describe('Render Gauge Chart and verify if data gets render', () => {
+  it('Render gauge chart and verify by default no data gets render', () => {
+    renderGaugeChart();
+    cy.get('.main-svg').contains('BeatsWest').should('not.exist');
+  });
+
+  it('Render gauge chart and verify data gets render after click on update chart', () => {
+    renderGaugeChart();
+    cy.get('.euiButton__text').contains('Update chart').click();
+    cy.get('.main-svg').contains('BeatsWest').should('exist');
+  });
+});
+
+describe('Render Gauge Chart and work with chart styles', () => {
+  it('Render gauge chart and change orientation to vertical', () => {
+    renderGaugeChart();
+    cy.get('.euiButton__text').contains('Update chart').click();
+    cy.get('.euiButton__text').contains('Vertical').click();
+    cy.get('.euiButton__text').contains('Preview').click();
+  });
+
+  it('Render gauge chart and change title size then verify the update on chart', () => {
+    renderGaugeChart();
+    cy.get('.euiButton__text').contains('Update chart').click();
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(0).click();
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(0).type('30');
+    cy.get('.euiButton__text').contains('Preview').click();
+  });
+  
+  it('Render gauge chart and change value size then verify the update on chart', () => {
+    renderGaugeChart();
+    cy.get('.euiButton__text').contains('Update chart').click();
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(1).click();
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(1).type('20');
+    cy.get('.euiButton__text').contains('Preview').click();
+  });
+});
+
+describe('Render Gauge Chart and work with threshold', () => {
+  it('Render gauge chart and add threshold then verify by default the threshold is not seen', () => {
+    renderGaugeChart();
+    cy.get('.euiButton__text').contains('Update chart').click();
+    cy.get('.euiButton__text').contains('+ Add threshold').click();
+    cy.get('[data-test-subj="nameFieldText"]').type('Gauge Threshold');
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(2).type('50');
+    cy.get('.euiButton__text').contains('Preview').click();
+    cy.get('[data-unformatted="Gauge Threshold"]').should('not.be.visible');
+  });
+
+  it('Render gauge chart and add threshold then verify the threshold label are seen after show threshold button enabled ', () => {
+    renderGaugeChart();
+    cy.get('.euiButton__text').contains('Update chart').click();
+    cy.get('.euiButton__text').contains('+ Add threshold').click();
+    cy.get('[data-test-subj="nameFieldText"]').type('Gauge Threshold');
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(2).type('50');
+    cy.get('.euiSwitch__label').contains('Show threshold labels').click();
+    cy.get('.euiButton__text').contains('Preview').click();
+    cy.get('[data-unformatted="Gauge Threshold"]').should('be.visible');
+  });
+
+  it('Render gauge chart and add threshold then verify the threshold marker are seen after show threshold button enabled ', () => {
+    renderGaugeChart();
+    cy.get('.euiButton__text').contains('Update chart').click();
+    cy.get('.euiButton__text').contains('+ Add threshold').click();
+    cy.get('[data-test-subj="nameFieldText"]').type('Gauge Threshold');
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(2).type('50');
+    cy.get('.euiSwitch__label').contains('Show threshold markers').click();
+    cy.get('.euiButton__text').contains('Preview').click();
+    cy.get('path[style*="rgb(252, 5, 5)"]').eq(1).should('exist');
+    cy.get('.bg-arc').find('path[style*="rgb(252, 5, 5)"]').should('have.length',4);
+  });
+});
+
+describe('Render gauge chart and verify if reset works properly', () => {
+  it('Render gauge chart with all feild data then click on reset and verify reset works properly', () => {
+    renderGaugeChart();
+    cy.get('.euiButton__text').contains('Update chart').click();
+    cy.get('input[placeholder="Title"]').type('Gauge Chart');
+    cy.get('textarea[placeholder="Description"]').type('Description For Gauge Chart');
+    cy.get('.euiButton__text').contains('Vertical').click();
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(0).click();
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(0).type('30');
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(1).click();
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(1).type('20');
+    cy.get('.euiButton__text').contains('+ Add threshold').click();
+    cy.get('[data-test-subj="nameFieldText"]').type('Gauge Threshold');
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(2).type('50');
+    cy.get('.euiSwitch__label').contains('Show threshold labels').click();
+    cy.get('.euiSwitch__label').contains('Show threshold markers').click();
+    cy.get('.euiButton__text').contains('Preview').click();
+    cy.get('.euiButtonEmpty__text').contains('Reset').click();
+    cy.get('input[placeholder="Title"]').should('not.have.value','Gauge Chart');
+    cy.get('textarea[placeholder="Description"]').should('not.have.value','Description For Gauge Chart')
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(0).should('have.value','');
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(1).should('have.value','');
+    cy.get('button.euiSwitch__button[aria-checked="false"]').should('exist').should('have.length',3);
+  });
+});
diff --git a/dashboards-observability/.cypress/utils/event_constants.js b/dashboards-observability/.cypress/utils/event_constants.js
index 4db8c146d..6d7ebbb05 100644
--- a/dashboards-observability/.cypress/utils/event_constants.js
+++ b/dashboards-observability/.cypress/utils/event_constants.js
@@ -33,7 +33,11 @@ export const TEST_QUERIES = [
     dateRangeDOM: YEAR_TO_DATE_DOM_ID
   },
   {
-    query:"source = opensearch_dashboards_sample_data_logs | where response='503' or response='404' | stats count() by span(timestamp,1d)", 
+    query: "source = opensearch_dashboards_sample_data_logs | where response='503' or response='404' | stats count() by span(timestamp,1d)",
+    dateRangeDOM: YEAR_TO_DATE_DOM_ID
+  },
+  {
+    query: 'source=opensearch_dashboards_sample_data_flights |where FlightDelayMin > 0 | stats sum(FlightDelayMin) as total_delay_min, count() as total_delayed by Carrier |eval avg_delay=total_delay_min / total_delayed | sort - avg_delay',
     dateRangeDOM: YEAR_TO_DATE_DOM_ID
   },
 ];
@@ -44,6 +48,8 @@ export const SAVE_QUERY2 = 'Mock Flight count by destination';
 export const SAVE_QUERY3 = 'Mock Flight count by destination save to panel';
 export const SAVE_QUERY4 = 'Mock Flight peek';
 
+export const aggregationValues = ["COUNT", "SUM", "AVERAGE", "MAX", "MIN", "VAR_SAMP", "VAR_POP", "STDDEV_SAMP", "STDDEV_POP"];
+
 export const querySearch = (query, rangeSelected) => {
   cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(query);
   cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').click();
@@ -80,21 +86,54 @@ export const landOnPanels = () => {
   cy.wait(delay);
 };
 
+const vis_name_sub_string = Math.floor(Math.random() * 100);
+export const saveVisualizationAndVerify = () => {
+  cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click();
+  cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').click();
+  cy.get('.euiComboBoxOptionsList__rowWrap .euiFilterSelectItem').eq(0).click();
+  cy.get('.euiPopover__panel .euiFormControlLayoutIcons [data-test-subj="comboBoxToggleListButton"]')
+    .eq(0)
+    .click();
+  cy.get('.euiPopover__panel input')
+    .eq(1)
+    .type(`Test visualization` + vis_name_sub_string);
+  cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click();
+  cy.wait(delay);
+  cy.get('.euiHeaderBreadcrumbs a').eq(1).click();
+  cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input')
+    .eq(0)
+    .type(`Test visualization` + vis_name_sub_string)
+    .type('{enter}');
+  cy.get('.euiBasicTable .euiTableCellContent button').eq(0).click();
+};
+
+export const deleteVisualization = () => {
+  cy.get('a[href = "#/event_analytics"]').click();
+  cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input')
+  .eq(0)
+  .type(`Test visualization` + vis_name_sub_string)
+  .type('{enter}');
+  cy.get('input[data-test-subj = "checkboxSelectAll"]').click();
+  cy.get('.euiButtonContent.euiButtonContent--iconRight.euiButton__content').click();
+  cy.get('.euiContextMenuItem .euiContextMenuItem__text').eq(0).click();
+  cy.get('input[placeholder = "delete"]').clear().type('delete');
+  cy.get('button[data-test-subj = "popoverModal__deleteButton"]').click();
+  cy.get('.euiToastHeader').should('exist');
+};
+
 export const renderTreeMapchart = () => {
-  querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].dateRangeDOM);
-    cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Tree Map').type('{enter}');
-    cy.get('#configPanel__panelOptions .euiFieldText').click().type('Tree Map');
-    cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Tree Map');
-    cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(1).click();
-    cy.get('.euiComboBoxOption__content').eq(2).click();
-    cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(2).click();
-    cy.get('.euiComboBoxOption__content').eq(1).click();
-    cy.get('.euiFormControlLayoutIcons [data-test-subj ="comboBoxToggleListButton"]').eq(3).click();
-    cy.get('.euiComboBoxOption__content').eq(0).click();
-    cy.get('.euiIEFlexWrapFix').eq(2).contains('Treemap').should('exist');
-    cy.get('#configPanel__treemap_options').contains('Tiling Algorithm').should('exist');
-    cy.get('[data-test-subj = "comboBoxInput"]').eq(4).click();
-    cy.get('button[name="Slice Dice"]').click();
+  querySearch(TEST_QUERIES[7].query, TEST_QUERIES[7].dateRangeDOM);
+  cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]')
+    .type('Tree Map')
+    .type('{enter}');
+  cy.get('#configPanel__panelOptions .euiFieldText').click().type('Tree Map');
+  cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]')
+    .click()
+    .type('This is the description for Tree Map');
+  cy.get('.euiIEFlexWrapFix').eq(1).contains('Treemap').should('exist');
+  cy.get('#configPanel__treemap_options').contains('Tiling Algorithm').should('exist');
+  cy.get('[data-test-subj = "comboBoxInput"]').eq(3).click();
+  cy.get('button[name="Slice Dice"]').click();
 };
 
 export const renderPieChart = () => {
@@ -104,11 +143,25 @@ export const renderPieChart = () => {
   cy.wait(delay);
     cy.get('#configPanel__panelOptions .euiFieldText').click().type('Pie chart');
     cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for Pie chart');
-    cy.get('.euiIEFlexWrapFix').eq(1).contains('Value options').should('exist');
-    cy.get('[data-test-subj="comboBoxInput"]').eq(1).click();
-    cy.get('[name="count()"]').eq(0).click();
-    cy.get('[data-test-subj="comboBoxToggleListButton"]').eq(0).click();
-    cy.get('[data-test-subj="comboBoxInput"]').eq(2).click();
+    cy.get('[aria-controls="configPanel__legend"]').contains('Legend').should('exist');
+    cy.get('#configPanel__legend .euiTitle.euiTitle--xxsmall').eq(0).contains('Show Legend');
+    cy.get('span[data-text="Show"]').contains('Show').should('exist');
+    cy.get('#configPanel__legend .euiTitle.euiTitle--xxsmall').eq(1).contains('Position');
+    cy.get('span[data-text="Right"]').contains('Right').should('exist');
+    cy.get('#configPanel__legend .euiTitle.euiTitle--xxsmall').eq(2).contains('Legend Size');
+    cy.get('[aria-controls="configPanel__chartStyles"]').contains('Chart Styles').should('exist');
+    cy.get('#configPanel__chartStyles .euiTitle.euiTitle--xxsmall').eq(0).contains('Mode').click();
+    cy.get('#configPanel__chartStyles .euiComboBox__inputWrap.euiComboBox__inputWrap--noWrap.euiComboBox__inputWrap-isClearable').click();
+    cy.get('.euiComboBoxOption__content').contains('Donut').click();
+    cy.get('#configPanel__chartStyles .euiTitle.euiTitle--xxsmall').eq(1).contains('Label Size');
+    cy.get('#configPanel__chartStyles input[type="number"]').click().type('10');
+    cy.get('#configPanel__chartStyles .euiTitle.euiTitle--xxsmall').eq(2).contains('Color Theme');
+    cy.get('.euiSuperSelectControl').click();
+    cy.get('.euiColorPalettePicker__item').eq(1).contains('Single Color').click();
+    cy.get('.euiFieldText.euiColorPicker__input.euiFieldText--withIcon').click();
+    cy.get('[aria-label="Select #D36086 as the color"]').click();
+    cy.get('.visEditorSidebar__controls [data-test-subj="visualizeEditorRenderButton"]').contains('Preview').click();
+    cy.get('.plot-container.plotly').should('exist');
 };
 
 export const renderDataConfig = () => {
@@ -136,5 +189,29 @@ export const renderDataConfig = () => {
 export const renderLineChart = () => {
   landOnEventVisualizations();
   querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].dateRangeDOM);
+  cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]')
+    .type('Line')
+    .type('{enter}');
+};
+
+export const renderAddParent = () => {
+  cy.get(' [data-test-subj="addParentButton"] .euiButton__text').contains('+ Add Parent').click();
+  cy.get('.first-division .euiFormLabel.euiFormRow__label').contains('Parent 1').should('exist');
+  cy.get('p.euiComboBoxPlaceholder').eq(0).click({ force: true });
+  cy.get('.euiComboBoxOption__content').eq(0).click();
+  cy.get(' [data-test-subj="addParentButton"] .euiButton__text').contains('+ Add Parent').click();
+  cy.get('.first-division .euiFormLabel.euiFormRow__label').contains('Parent 2').should('exist');
+  cy.get('p.euiComboBoxPlaceholder').click({ force: true });
+  cy.get('.euiComboBoxOption__content').eq(1).click();
+  cy.get(' [data-test-subj="addParentButton"] .euiButton__text').contains('+ Add Parent').click();
+  cy.get('.first-division .euiFormLabel.euiFormRow__label').contains('Parent 3').should('exist');
+  cy.get('p.euiComboBoxPlaceholder').click({ force: true });
+  cy.get('.euiComboBoxOption__content').eq(2).click();
   cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Line').type('{enter}');
 };
+
+export const renderGaugeChart = () => {
+  landOnEventVisualizations();
+  querySearch(TEST_QUERIES[1].query, TEST_QUERIES[1].dateRangeDOM);
+  cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Gauge').type('{enter}');
+};
diff --git a/dashboards-observability/common/constants/explorer.ts b/dashboards-observability/common/constants/explorer.ts
index 17612c44e..9199fc8cd 100644
--- a/dashboards-observability/common/constants/explorer.ts
+++ b/dashboards-observability/common/constants/explorer.ts
@@ -75,7 +75,7 @@ export const REDUX_EXPL_SLICE_FIELDS = 'fields';
 export const REDUX_EXPL_SLICE_QUERY_TABS = 'queryTabs';
 export const REDUX_EXPL_SLICE_VISUALIZATION = 'explorerVisualization';
 export const REDUX_EXPL_SLICE_COUNT_DISTRIBUTION = 'countDistributionVisualization';
-export const PLOTLY_GAUGE_COLUMN_NUMBER = 5;
+export const PLOTLY_GAUGE_COLUMN_NUMBER = 4;
 export const APP_ANALYTICS_TAB_ID_REGEX = /application-analytics-tab.+/;
 export const DEFAULT_AVAILABILITY_QUERY = 'stats count() by span( timestamp, 1h )';
 export const ADD_BUTTON_TEXT = '+ Add color theme';
@@ -118,6 +118,8 @@ export const AGGREGATION_OPTIONS = [
   },
 ];
 
+// numeric fields type for metrics
+export const numericalTypes = ['float', 'double', 'bigint', 'long', 'octet', 'short', 'byte', 'integer'];
 // Data table constants
 export const GRID_HEADER_COLUMN_MAX_WIDTH = '150px';
 export const GRID_PAGE_RANGE_DISPLAY = 5;
@@ -130,3 +132,22 @@ export const ROW_DENSITIES = [
 ];
 
 export const HEADER_HEIGHT = 35;
+
+// gauge chart default parameters
+export interface DefaultGaugeChartParametersProps {
+  GaugeTitleSize: number,
+  DisplayDefaultGauges: number,
+  OrientationDefault: string,
+  TickLength: number, 
+  LegendPlacement: string,
+  ThresholdsMaxLimit: number
+};
+
+export const DefaultGaugeChartParameters: DefaultGaugeChartParametersProps = {
+  GaugeTitleSize: 14,
+  DisplayDefaultGauges: 1,
+  OrientationDefault: 'h',
+  TickLength: 5,
+  LegendPlacement: 'center',
+  ThresholdsMaxLimit: 1
+}
diff --git a/dashboards-observability/common/constants/shared.ts b/dashboards-observability/common/constants/shared.ts
index 00b6b3f14..d4021c350 100644
--- a/dashboards-observability/common/constants/shared.ts
+++ b/dashboards-observability/common/constants/shared.ts
@@ -97,7 +97,7 @@ export interface ValueOptionsAxes {
 
 export const NUMERICAL_FIELDS = ['short', 'integer', 'long', 'float', 'double'];
 
-export const ENABLED_VIS_TYPES = [visChartTypes.Bar, visChartTypes.HorizontalBar, visChartTypes.Line, visChartTypes.Pie, visChartTypes.HeatMap, visChartTypes.Text, visChartTypes.TreeMap];
+export const ENABLED_VIS_TYPES = [visChartTypes.Bar, visChartTypes.HorizontalBar, visChartTypes.Line, visChartTypes.Pie, visChartTypes.HeatMap, visChartTypes.Text, visChartTypes.TreeMap, visChartTypes.Gauge, visChartTypes.Histogram];
 
 //Live tail constants
 export const LIVE_OPTIONS = [
@@ -156,7 +156,9 @@ export interface DefaultChartStylesProps {
   FillOpacity: number,
   MarkerSize: number,
   ShowLegend: string,
-  LegendPosition: string
+  LegendPosition: string,
+  LabelAngle: number,
+  DefaultSortSectors: string,
 };
 
 export const DefaultChartStyles: DefaultChartStylesProps = {
@@ -166,7 +168,10 @@ export const DefaultChartStyles: DefaultChartStylesProps = {
   FillOpacity: 40,
   MarkerSize: 5,
   ShowLegend: 'show',
-  LegendPosition: 'v'
+  LegendPosition: 'v',
+  LabelAngle: 0,
+  DefaultSortSectors: 'largest_to_smallest',
 }
 
 export const FILLOPACITY_DIV_FACTOR = 200; 
+
diff --git a/dashboards-observability/common/types/explorer.ts b/dashboards-observability/common/types/explorer.ts
index 2204a6ab4..ade2c6db3 100644
--- a/dashboards-observability/common/types/explorer.ts
+++ b/dashboards-observability/common/types/explorer.ts
@@ -239,8 +239,12 @@ export interface ConfigListEntry {
   side: string;
   type: string;
 }
+export interface HistogramConfigList {
+  bucketSize: string;
+  bucketOffset: string;
+}
 
 export interface ConfigList {
-  dimensions?: ConfigListEntry[];
+  dimensions?: ConfigListEntry[] | HistogramConfigList[];
   metrics?: ConfigListEntry[];
 }
diff --git a/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap b/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
index 3feb1f635..527aa9965 100644
--- a/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
+++ b/dashboards-observability/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
@@ -88,26 +88,6 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                 "mapTo": "dataConfig",
                 "name": "Data",
                 "sections": Array [
-                  Object {
-                    "editor": [Function],
-                    "id": "value_options",
-                    "mapTo": "valueOptions",
-                    "name": "Value options",
-                    "schemas": Array [
-                      Object {
-                        "component": null,
-                        "isSingleSelection": false,
-                        "mapTo": "xaxis",
-                        "name": "X-axis",
-                      },
-                      Object {
-                        "component": null,
-                        "isSingleSelection": false,
-                        "mapTo": "yaxis",
-                        "name": "Y-axis",
-                      },
-                    ],
-                  },
                   Object {
                     "editor": [Function],
                     "id": "legend",
@@ -216,6 +196,12 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                           ],
                         },
                       },
+                      Object {
+                        "component": [Function],
+                        "eleType": "input",
+                        "mapTo": "labelSize",
+                        "name": "Label Size",
+                      },
                       Object {
                         "component": [Function],
                         "defaultState": 0,
@@ -344,7 +330,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
             },
             "isUniColor": false,
             "layout": Object {
-              "height": 500,
+              "height": 1180,
               "legend": Object {
                 "orientation": "v",
                 "traceorder": "normal",
@@ -449,26 +435,6 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                   "mapTo": "dataConfig",
                   "name": "Data",
                   "sections": Array [
-                    Object {
-                      "editor": [Function],
-                      "id": "value_options",
-                      "mapTo": "valueOptions",
-                      "name": "Value options",
-                      "schemas": Array [
-                        Object {
-                          "component": null,
-                          "isSingleSelection": false,
-                          "mapTo": "xaxis",
-                          "name": "X-axis",
-                        },
-                        Object {
-                          "component": null,
-                          "isSingleSelection": false,
-                          "mapTo": "yaxis",
-                          "name": "Y-axis",
-                        },
-                      ],
-                    },
                     Object {
                       "editor": [Function],
                       "id": "legend",
@@ -577,6 +543,12 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                             ],
                           },
                         },
+                        Object {
+                          "component": [Function],
+                          "eleType": "input",
+                          "mapTo": "labelSize",
+                          "name": "Label Size",
+                        },
                         Object {
                           "component": [Function],
                           "defaultState": 0,
@@ -705,7 +677,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
               },
               "isUniColor": false,
               "layout": Object {
-                "height": 500,
+                "height": 1180,
                 "legend": Object {
                   "orientation": "v",
                   "traceorder": "normal",
@@ -733,7 +705,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
         }
         layout={
           Object {
-            "height": 500,
+            "height": 1180,
             "legend": Object {
               "orientation": "v",
               "traceorder": "normal",
@@ -833,26 +805,6 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                     "mapTo": "dataConfig",
                     "name": "Data",
                     "sections": Array [
-                      Object {
-                        "editor": [Function],
-                        "id": "value_options",
-                        "mapTo": "valueOptions",
-                        "name": "Value options",
-                        "schemas": Array [
-                          Object {
-                            "component": null,
-                            "isSingleSelection": false,
-                            "mapTo": "xaxis",
-                            "name": "X-axis",
-                          },
-                          Object {
-                            "component": null,
-                            "isSingleSelection": false,
-                            "mapTo": "yaxis",
-                            "name": "Y-axis",
-                          },
-                        ],
-                      },
                       Object {
                         "editor": [Function],
                         "id": "legend",
@@ -961,6 +913,12 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                               ],
                             },
                           },
+                          Object {
+                            "component": [Function],
+                            "eleType": "input",
+                            "mapTo": "labelSize",
+                            "name": "Label Size",
+                          },
                           Object {
                             "component": [Function],
                             "defaultState": 0,
@@ -1089,7 +1047,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                 },
                 "isUniColor": false,
                 "layout": Object {
-                  "height": 500,
+                  "height": 1180,
                   "legend": Object {
                     "orientation": "v",
                     "traceorder": "normal",
@@ -1108,180 +1066,83 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
           }
         }
       >
-        <Plt
-          config={
-            Object {
-              "displaylogo": false,
-              "responsive": true,
-            }
-          }
-          data={
-            Array [
-              Object {
-                "marker": Object {
-                  "color": "rgba(60,161,199,0.4)",
-                  "line": Object {
-                    "color": "#3CA1C7",
-                    "width": 1,
-                  },
-                },
-                "name": "avg(FlightDelayMin)",
-                "orientation": "v",
-                "type": "bar",
-                "x": Array [
-                  "BeatsWest",
-                  "Logstash Airways",
-                  "OpenSearch Dashboards Airlines",
-                  "OpenSearch-Air",
-                ],
-                "y": Array [
-                  53.65384615384615,
-                  45.36144578313253,
-                  63.1578947368421,
-                  46.81318681318681,
-                ],
-              },
-            ]
-          }
-          layout={
-            Object {
-              "bargap": 0.30000000000000004,
-              "bargroupgap": 0.030000000000000027,
-              "barmode": "group",
-              "colorway": Array [
-                "#3CA1C7",
-                "#8C55A3",
-                "#DB748A",
-                "#F2BE4B",
-                "#68CCC2",
-                "#2A7866",
-                "#843769",
-                "#374FB8",
-                "#BD6F26",
-                "#4C636F",
-              ],
-              "height": 500,
-              "legend": Object {
-                "orientation": "v",
-                "traceorder": "normal",
-              },
-              "margin": Object {
-                "b": 30,
-                "l": 60,
-                "pad": 0,
-                "r": 30,
-                "t": 50,
-              },
-              "showlegend": true,
-              "title": "",
-              "xaxis": Object {
-                "automargin": true,
-                "tickangle": 0,
-              },
-            }
-          }
+        <EmptyPlaceholder
+          icon="visBarVerticalStacked"
         >
-          <PlotlyComponent
-            config={
-              Object {
-                "displayModeBar": false,
-                "displaylogo": false,
-                "responsive": true,
-              }
-            }
-            data={
-              Array [
-                Object {
-                  "marker": Object {
-                    "color": "rgba(60,161,199,0.4)",
-                    "line": Object {
-                      "color": "#3CA1C7",
-                      "width": 1,
-                    },
-                  },
-                  "name": "avg(FlightDelayMin)",
-                  "orientation": "v",
-                  "type": "bar",
-                  "x": Array [
-                    "BeatsWest",
-                    "Logstash Airways",
-                    "OpenSearch Dashboards Airlines",
-                    "OpenSearch-Air",
-                  ],
-                  "y": Array [
-                    53.65384615384615,
-                    45.36144578313253,
-                    63.1578947368421,
-                    46.81318681318681,
-                  ],
-                },
-              ]
-            }
-            debug={false}
-            divId="explorerPlotComponent"
-            layout={
-              Object {
-                "autosize": true,
-                "bargap": 0.30000000000000004,
-                "bargroupgap": 0.030000000000000027,
-                "barmode": "group",
-                "colorway": Array [
-                  "#3CA1C7",
-                  "#8C55A3",
-                  "#DB748A",
-                  "#F2BE4B",
-                  "#68CCC2",
-                  "#2A7866",
-                  "#843769",
-                  "#374FB8",
-                  "#BD6F26",
-                  "#4C636F",
-                ],
-                "height": 500,
-                "hovermode": "closest",
-                "legend": Object {
-                  "orientation": "v",
-                  "traceorder": "normal",
-                },
-                "margin": Object {
-                  "b": 30,
-                  "l": 60,
-                  "pad": 0,
-                  "r": 30,
-                  "t": 50,
-                },
-                "showlegend": true,
-                "title": "",
-                "xaxis": Object {
-                  "automargin": true,
-                  "tickangle": 0,
-                },
-                "yaxis": Object {
-                  "rangemode": "normal",
-                  "showgrid": true,
-                  "zeroline": false,
-                },
-              }
-            }
-            style={
-              Object {
-                "height": "100%",
-                "width": "100%",
-              }
-            }
-            useResizeHandler={true}
+          <EuiText
+            className="lnsChart__empty"
+            color="subdued"
+            data-test-subj="vizWorkspace__noData"
+            size="xs"
+            textAlign="center"
           >
             <div
-              id="explorerPlotComponent"
-              style={
-                Object {
-                  "height": "100%",
-                  "width": "100%",
-                }
-              }
-            />
-          </PlotlyComponent>
-        </Plt>
+              className="euiText euiText--extraSmall lnsChart__empty"
+              data-test-subj="vizWorkspace__noData"
+            >
+              <EuiTextAlign
+                textAlign="center"
+              >
+                <div
+                  className="euiTextAlign euiTextAlign--center"
+                >
+                  <EuiTextColor
+                    color="subdued"
+                    component="div"
+                  >
+                    <div
+                      className="euiTextColor euiTextColor--subdued"
+                    >
+                      <EuiIcon
+                        color="subdued"
+                        size="xxl"
+                        type="visBarVerticalStacked"
+                      >
+                        <EuiIconEmpty
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </EuiIconEmpty>
+                      </EuiIcon>
+                      <EuiSpacer
+                        size="l"
+                      >
+                        <div
+                          className="euiSpacer euiSpacer--l"
+                        />
+                      </EuiSpacer>
+                      <p>
+                        <FormattedMessage
+                          defaultMessage="No results found"
+                          id="visualization_noData"
+                          values={Object {}}
+                        >
+                          <span>
+                            No results found
+                          </span>
+                        </FormattedMessage>
+                      </p>
+                    </div>
+                  </EuiTextColor>
+                </div>
+              </EuiTextAlign>
+            </div>
+          </EuiText>
+        </EmptyPlaceholder>
       </Bar>
     </VisualizationChart>
   </Visualization>
@@ -1296,19 +1157,18 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
         "data": Object {
           "appData": Object {},
           "defaultAxes": Object {
-            "xaxis": Array [
-              Object {
-                "label": "Carrier",
-                "name": "Carrier",
-                "type": "keyword",
-              },
-            ],
+            "xaxis": Array [],
             "yaxis": Array [
               Object {
                 "label": "avg(FlightDelayMin)",
                 "name": "avg(FlightDelayMin)",
                 "type": "double",
               },
+              Object {
+                "label": "Carrier",
+                "name": "Carrier",
+                "type": "keyword",
+              },
             ],
           },
           "indexFields": Object {},
@@ -1427,6 +1287,13 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                           ],
                         },
                       },
+                      Object {
+                        "component": [Function],
+                        "eleType": "input",
+                        "mapTo": "legendSize",
+                        "name": "Legend Size",
+                        "title": "Legend Size",
+                      },
                     ],
                   },
                   Object {
@@ -1452,17 +1319,13 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                               "id": "lines",
                               "name": "Lines",
                             },
-                            Object {
-                              "id": "bar",
-                              "name": "Bars",
-                            },
                             Object {
                               "id": "markers",
-                              "name": "Points",
+                              "name": "Marker",
                             },
                             Object {
                               "id": "lines+markers",
-                              "name": "Lines + Points",
+                              "name": "Lines + Markers",
                             },
                           ],
                         },
@@ -1529,8 +1392,56 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                           "max": 40,
                         },
                       },
+                      Object {
+                        "component": [Function],
+                        "eleType": "input",
+                        "mapTo": "labelSize",
+                        "name": "Label Size",
+                        "title": "Label Size",
+                      },
+                      Object {
+                        "component": [Function],
+                        "defaultState": 0,
+                        "eleType": "slider",
+                        "mapTo": "rotateLabels",
+                        "name": "Rotate labels",
+                        "props": Object {
+                          "max": 90,
+                          "min": -90,
+                          "showTicks": true,
+                          "ticks": Array [
+                            Object {
+                              "label": "-90°",
+                              "value": -90,
+                            },
+                            Object {
+                              "label": "-45°",
+                              "value": -45,
+                            },
+                            Object {
+                              "label": "0°",
+                              "value": 0,
+                            },
+                            Object {
+                              "label": "45°",
+                              "value": 45,
+                            },
+                            Object {
+                              "label": "90°",
+                              "value": 90,
+                            },
+                          ],
+                        },
+                      },
                     ],
                   },
+                  Object {
+                    "editor": [Function],
+                    "id": "color-theme",
+                    "mapTo": "colorTheme",
+                    "name": "Color theme",
+                    "schemas": Array [],
+                  },
                   Object {
                     "defaultState": Array [],
                     "editor": [Function],
@@ -1556,11 +1467,11 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
               },
             ],
           },
-          "fullLabel": "Line",
+          "fullLabel": "Time series",
           "icon": [Function],
           "iconType": "visLine",
           "id": "line",
-          "label": "Line",
+          "label": "Time series",
           "name": "line",
           "selection": Object {
             "dataLoss": "nothing",
@@ -1592,7 +1503,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                 "#BD6F26",
                 "#4C636F",
               ],
-              "height": 500,
+              "height": 1180,
               "legend": Object {
                 "orientation": "v",
                 "traceorder": "normal",
@@ -1629,19 +1540,18 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
           "data": Object {
             "appData": Object {},
             "defaultAxes": Object {
-              "xaxis": Array [
-                Object {
-                  "label": "Carrier",
-                  "name": "Carrier",
-                  "type": "keyword",
-                },
-              ],
+              "xaxis": Array [],
               "yaxis": Array [
                 Object {
                   "label": "avg(FlightDelayMin)",
                   "name": "avg(FlightDelayMin)",
                   "type": "double",
                 },
+                Object {
+                  "label": "Carrier",
+                  "name": "Carrier",
+                  "type": "keyword",
+                },
               ],
             },
             "indexFields": Object {},
@@ -1760,6 +1670,13 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                             ],
                           },
                         },
+                        Object {
+                          "component": [Function],
+                          "eleType": "input",
+                          "mapTo": "legendSize",
+                          "name": "Legend Size",
+                          "title": "Legend Size",
+                        },
                       ],
                     },
                     Object {
@@ -1785,17 +1702,13 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                                 "id": "lines",
                                 "name": "Lines",
                               },
-                              Object {
-                                "id": "bar",
-                                "name": "Bars",
-                              },
                               Object {
                                 "id": "markers",
-                                "name": "Points",
+                                "name": "Marker",
                               },
                               Object {
                                 "id": "lines+markers",
-                                "name": "Lines + Points",
+                                "name": "Lines + Markers",
                               },
                             ],
                           },
@@ -1862,19 +1775,67 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                             "max": 40,
                           },
                         },
-                      ],
-                    },
-                    Object {
-                      "defaultState": Array [],
-                      "editor": [Function],
-                      "id": "thresholds",
-                      "mapTo": "thresholds",
-                      "name": "Thresholds",
-                      "schemas": Array [],
-                    },
-                  ],
-                },
-                Object {
+                        Object {
+                          "component": [Function],
+                          "eleType": "input",
+                          "mapTo": "labelSize",
+                          "name": "Label Size",
+                          "title": "Label Size",
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 0,
+                          "eleType": "slider",
+                          "mapTo": "rotateLabels",
+                          "name": "Rotate labels",
+                          "props": Object {
+                            "max": 90,
+                            "min": -90,
+                            "showTicks": true,
+                            "ticks": Array [
+                              Object {
+                                "label": "-90°",
+                                "value": -90,
+                              },
+                              Object {
+                                "label": "-45°",
+                                "value": -45,
+                              },
+                              Object {
+                                "label": "0°",
+                                "value": 0,
+                              },
+                              Object {
+                                "label": "45°",
+                                "value": 45,
+                              },
+                              Object {
+                                "label": "90°",
+                                "value": 90,
+                              },
+                            ],
+                          },
+                        },
+                      ],
+                    },
+                    Object {
+                      "editor": [Function],
+                      "id": "color-theme",
+                      "mapTo": "colorTheme",
+                      "name": "Color theme",
+                      "schemas": Array [],
+                    },
+                    Object {
+                      "defaultState": Array [],
+                      "editor": [Function],
+                      "id": "thresholds",
+                      "mapTo": "thresholds",
+                      "name": "Thresholds",
+                      "schemas": Array [],
+                    },
+                  ],
+                },
+                Object {
                   "content": Array [],
                   "editor": [Function],
                   "id": "style-panel",
@@ -1889,11 +1850,11 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                 },
               ],
             },
-            "fullLabel": "Line",
+            "fullLabel": "Time series",
             "icon": [Function],
             "iconType": "visLine",
             "id": "line",
-            "label": "Line",
+            "label": "Time series",
             "name": "line",
             "selection": Object {
               "dataLoss": "nothing",
@@ -1925,7 +1886,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                   "#BD6F26",
                   "#4C636F",
                 ],
-                "height": 500,
+                "height": 1180,
                 "legend": Object {
                   "orientation": "v",
                   "traceorder": "normal",
@@ -1984,7 +1945,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
               "#BD6F26",
               "#4C636F",
             ],
-            "height": 500,
+            "height": 1180,
             "legend": Object {
               "orientation": "v",
               "traceorder": "normal",
@@ -2016,19 +1977,18 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
             "data": Object {
               "appData": Object {},
               "defaultAxes": Object {
-                "xaxis": Array [
-                  Object {
-                    "label": "Carrier",
-                    "name": "Carrier",
-                    "type": "keyword",
-                  },
-                ],
+                "xaxis": Array [],
                 "yaxis": Array [
                   Object {
                     "label": "avg(FlightDelayMin)",
                     "name": "avg(FlightDelayMin)",
                     "type": "double",
                   },
+                  Object {
+                    "label": "Carrier",
+                    "name": "Carrier",
+                    "type": "keyword",
+                  },
                 ],
               },
               "indexFields": Object {},
@@ -2147,6 +2107,13 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                               ],
                             },
                           },
+                          Object {
+                            "component": [Function],
+                            "eleType": "input",
+                            "mapTo": "legendSize",
+                            "name": "Legend Size",
+                            "title": "Legend Size",
+                          },
                         ],
                       },
                       Object {
@@ -2172,17 +2139,13 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                                   "id": "lines",
                                   "name": "Lines",
                                 },
-                                Object {
-                                  "id": "bar",
-                                  "name": "Bars",
-                                },
                                 Object {
                                   "id": "markers",
-                                  "name": "Points",
+                                  "name": "Marker",
                                 },
                                 Object {
                                   "id": "lines+markers",
-                                  "name": "Lines + Points",
+                                  "name": "Lines + Markers",
                                 },
                               ],
                             },
@@ -2249,8 +2212,56 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                               "max": 40,
                             },
                           },
+                          Object {
+                            "component": [Function],
+                            "eleType": "input",
+                            "mapTo": "labelSize",
+                            "name": "Label Size",
+                            "title": "Label Size",
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 0,
+                            "eleType": "slider",
+                            "mapTo": "rotateLabels",
+                            "name": "Rotate labels",
+                            "props": Object {
+                              "max": 90,
+                              "min": -90,
+                              "showTicks": true,
+                              "ticks": Array [
+                                Object {
+                                  "label": "-90°",
+                                  "value": -90,
+                                },
+                                Object {
+                                  "label": "-45°",
+                                  "value": -45,
+                                },
+                                Object {
+                                  "label": "0°",
+                                  "value": 0,
+                                },
+                                Object {
+                                  "label": "45°",
+                                  "value": 45,
+                                },
+                                Object {
+                                  "label": "90°",
+                                  "value": 90,
+                                },
+                              ],
+                            },
+                          },
                         ],
                       },
+                      Object {
+                        "editor": [Function],
+                        "id": "color-theme",
+                        "mapTo": "colorTheme",
+                        "name": "Color theme",
+                        "schemas": Array [],
+                      },
                       Object {
                         "defaultState": Array [],
                         "editor": [Function],
@@ -2276,11 +2287,11 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                   },
                 ],
               },
-              "fullLabel": "Line",
+              "fullLabel": "Time series",
               "icon": [Function],
               "iconType": "visLine",
               "id": "line",
-              "label": "Line",
+              "label": "Time series",
               "name": "line",
               "selection": Object {
                 "dataLoss": "nothing",
@@ -2312,7 +2323,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                     "#BD6F26",
                     "#4C636F",
                   ],
-                  "height": 500,
+                  "height": 1180,
                   "legend": Object {
                     "orientation": "v",
                     "traceorder": "normal",
@@ -2343,226 +2354,83 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
           }
         }
       >
-        <Plt
-          config={
-            Object {
-              "barmode": "line",
-              "displaylogo": false,
-              "responsive": true,
-              "xaxis": Object {
-                "automargin": true,
-              },
-              "yaxis": Object {
-                "automargin": true,
-              },
-            }
-          }
-          data={
-            Array [
-              Object {
-                "fill": "tozeroy",
-                "fillcolor": "rgba(60,161,199,0.2)",
-                "line": Object {
-                  "color": "#3CA1C7",
-                  "shape": "spline",
-                  "width": 2,
-                },
-                "marker": Object {
-                  "size": 5,
-                },
-                "mode": "lines",
-                "name": "avg(FlightDelayMin)",
-                "type": "scatter",
-                "x": Array [
-                  "BeatsWest",
-                  "Logstash Airways",
-                  "OpenSearch Dashboards Airlines",
-                  "OpenSearch-Air",
-                ],
-                "y": Array [
-                  53.65384615384615,
-                  45.36144578313253,
-                  63.1578947368421,
-                  46.81318681318681,
-                ],
-              },
-            ]
-          }
-          layout={
-            Object {
-              "colorway": Array [
-                "#3CA1C7",
-                "#8C55A3",
-                "#DB748A",
-                "#F2BE4B",
-                "#68CCC2",
-                "#2A7866",
-                "#843769",
-                "#374FB8",
-                "#BD6F26",
-                "#4C636F",
-              ],
-              "height": 500,
-              "legend": Object {
-                "orientation": "v",
-                "traceorder": "normal",
-              },
-              "margin": Object {
-                "b": 30,
-                "l": 60,
-                "pad": 0,
-                "r": 30,
-                "t": 50,
-              },
-              "paper_bgcolor": "rgba(0, 0, 0, 0)",
-              "plot_bgcolor": "rgba(0, 0, 0, 0)",
-              "showlegend": true,
-              "title": "",
-              "xaxis": Object {
-                "fixedrange": true,
-                "showgrid": false,
-                "visible": true,
-              },
-              "yaxis": Object {
-                "fixedrange": true,
-                "showgrid": false,
-                "visible": true,
-              },
-              "yaxis1": Object {
-                "overlaying": "y",
-                "side": "left",
-                "tickfont": Object {
-                  "color": "#3CA1C7",
-                },
-                "titlefont": Object {
-                  "color": "#3CA1C7",
-                },
-              },
-            }
-          }
+        <EmptyPlaceholder
+          icon="visLine"
         >
-          <PlotlyComponent
-            config={
-              Object {
-                "barmode": "line",
-                "displayModeBar": false,
-                "displaylogo": false,
-                "responsive": true,
-                "xaxis": Object {
-                  "automargin": true,
-                },
-                "yaxis": Object {
-                  "automargin": true,
-                },
-              }
-            }
-            data={
-              Array [
-                Object {
-                  "fill": "tozeroy",
-                  "fillcolor": "rgba(60,161,199,0.2)",
-                  "line": Object {
-                    "color": "#3CA1C7",
-                    "shape": "spline",
-                    "width": 2,
-                  },
-                  "marker": Object {
-                    "size": 5,
-                  },
-                  "mode": "lines",
-                  "name": "avg(FlightDelayMin)",
-                  "type": "scatter",
-                  "x": Array [
-                    "BeatsWest",
-                    "Logstash Airways",
-                    "OpenSearch Dashboards Airlines",
-                    "OpenSearch-Air",
-                  ],
-                  "y": Array [
-                    53.65384615384615,
-                    45.36144578313253,
-                    63.1578947368421,
-                    46.81318681318681,
-                  ],
-                },
-              ]
-            }
-            debug={false}
-            divId="explorerPlotComponent"
-            layout={
-              Object {
-                "autosize": true,
-                "barmode": "stack",
-                "colorway": Array [
-                  "#3CA1C7",
-                  "#8C55A3",
-                  "#DB748A",
-                  "#F2BE4B",
-                  "#68CCC2",
-                  "#2A7866",
-                  "#843769",
-                  "#374FB8",
-                  "#BD6F26",
-                  "#4C636F",
-                ],
-                "height": 500,
-                "hovermode": "closest",
-                "legend": Object {
-                  "orientation": "v",
-                  "traceorder": "normal",
-                },
-                "margin": Object {
-                  "b": 30,
-                  "l": 60,
-                  "pad": 0,
-                  "r": 30,
-                  "t": 50,
-                },
-                "paper_bgcolor": "rgba(0, 0, 0, 0)",
-                "plot_bgcolor": "rgba(0, 0, 0, 0)",
-                "showlegend": true,
-                "title": "",
-                "xaxis": Object {
-                  "fixedrange": true,
-                  "showgrid": false,
-                  "visible": true,
-                },
-                "yaxis": Object {
-                  "fixedrange": true,
-                  "showgrid": false,
-                  "visible": true,
-                },
-                "yaxis1": Object {
-                  "overlaying": "y",
-                  "side": "left",
-                  "tickfont": Object {
-                    "color": "#3CA1C7",
-                  },
-                  "titlefont": Object {
-                    "color": "#3CA1C7",
-                  },
-                },
-              }
-            }
-            style={
-              Object {
-                "height": "100%",
-                "width": "100%",
-              }
-            }
-            useResizeHandler={true}
+          <EuiText
+            className="lnsChart__empty"
+            color="subdued"
+            data-test-subj="vizWorkspace__noData"
+            size="xs"
+            textAlign="center"
           >
             <div
-              id="explorerPlotComponent"
-              style={
-                Object {
-                  "height": "100%",
-                  "width": "100%",
-                }
-              }
-            />
-          </PlotlyComponent>
-        </Plt>
+              className="euiText euiText--extraSmall lnsChart__empty"
+              data-test-subj="vizWorkspace__noData"
+            >
+              <EuiTextAlign
+                textAlign="center"
+              >
+                <div
+                  className="euiTextAlign euiTextAlign--center"
+                >
+                  <EuiTextColor
+                    color="subdued"
+                    component="div"
+                  >
+                    <div
+                      className="euiTextColor euiTextColor--subdued"
+                    >
+                      <EuiIcon
+                        color="subdued"
+                        size="xxl"
+                        type="visLine"
+                      >
+                        <EuiIconEmpty
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </EuiIconEmpty>
+                      </EuiIcon>
+                      <EuiSpacer
+                        size="l"
+                      >
+                        <div
+                          className="euiSpacer euiSpacer--l"
+                        />
+                      </EuiSpacer>
+                      <p>
+                        <FormattedMessage
+                          defaultMessage="No results found"
+                          id="visualization_noData"
+                          values={Object {}}
+                        >
+                          <span>
+                            No results found
+                          </span>
+                        </FormattedMessage>
+                      </p>
+                    </div>
+                  </EuiTextColor>
+                </div>
+              </EuiTextAlign>
+            </div>
+          </EuiText>
+        </EmptyPlaceholder>
       </Line>
     </VisualizationChart>
   </Visualization>
@@ -2762,7 +2630,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
             },
             "isUniColor": false,
             "layout": Object {
-              "height": 500,
+              "height": 1180,
               "legend": Object {
                 "orientation": "v",
                 "traceorder": "normal",
@@ -2972,7 +2840,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
               },
               "isUniColor": false,
               "layout": Object {
-                "height": 500,
+                "height": 1180,
                 "legend": Object {
                   "orientation": "v",
                   "traceorder": "normal",
@@ -3000,7 +2868,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
         }
         layout={
           Object {
-            "height": 500,
+            "height": 1180,
             "legend": Object {
               "orientation": "v",
               "traceorder": "normal",
@@ -3205,7 +3073,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                 },
                 "isUniColor": false,
                 "layout": Object {
-                  "height": 500,
+                  "height": 1180,
                   "legend": Object {
                     "orientation": "v",
                     "traceorder": "normal",
@@ -3224,180 +3092,83 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
           }
         }
       >
-        <Plt
-          config={
-            Object {
-              "displaylogo": false,
-              "responsive": true,
-            }
-          }
-          data={
-            Array [
-              Object {
-                "marker": Object {
-                  "color": "rgba(60,161,199,NaN)",
-                  "line": Object {
-                    "color": "#3CA1C7",
-                    "width": undefined,
-                  },
-                },
-                "name": "avg(FlightDelayMin)",
-                "orientation": "h",
-                "type": "bar",
-                "x": Array [
-                  "BeatsWest",
-                  "Logstash Airways",
-                  "OpenSearch Dashboards Airlines",
-                  "OpenSearch-Air",
-                ],
-                "y": Array [
-                  53.65384615384615,
-                  45.36144578313253,
-                  63.1578947368421,
-                  46.81318681318681,
-                ],
-              },
-            ]
-          }
-          layout={
-            Object {
-              "bargap": NaN,
-              "bargroupgap": NaN,
-              "barmode": undefined,
-              "colorway": Array [
-                "#3CA1C7",
-                "#8C55A3",
-                "#DB748A",
-                "#F2BE4B",
-                "#68CCC2",
-                "#2A7866",
-                "#843769",
-                "#374FB8",
-                "#BD6F26",
-                "#4C636F",
-              ],
-              "height": 500,
-              "legend": Object {
-                "orientation": undefined,
-                "traceorder": "normal",
-              },
-              "margin": Object {
-                "b": 30,
-                "l": 60,
-                "pad": 0,
-                "r": 30,
-                "t": 50,
-              },
-              "showlegend": true,
-              "title": "",
-              "xaxis": Object {
-                "automargin": true,
-                "tickangle": undefined,
-              },
-            }
-          }
+        <EmptyPlaceholder
+          icon="visBarVerticalStacked"
         >
-          <PlotlyComponent
-            config={
-              Object {
-                "displayModeBar": false,
-                "displaylogo": false,
-                "responsive": true,
-              }
-            }
-            data={
-              Array [
-                Object {
-                  "marker": Object {
-                    "color": "rgba(60,161,199,NaN)",
-                    "line": Object {
-                      "color": "#3CA1C7",
-                      "width": undefined,
-                    },
-                  },
-                  "name": "avg(FlightDelayMin)",
-                  "orientation": "h",
-                  "type": "bar",
-                  "x": Array [
-                    "BeatsWest",
-                    "Logstash Airways",
-                    "OpenSearch Dashboards Airlines",
-                    "OpenSearch-Air",
-                  ],
-                  "y": Array [
-                    53.65384615384615,
-                    45.36144578313253,
-                    63.1578947368421,
-                    46.81318681318681,
-                  ],
-                },
-              ]
-            }
-            debug={false}
-            divId="explorerPlotComponent"
-            layout={
-              Object {
-                "autosize": true,
-                "bargap": NaN,
-                "bargroupgap": NaN,
-                "barmode": undefined,
-                "colorway": Array [
-                  "#3CA1C7",
-                  "#8C55A3",
-                  "#DB748A",
-                  "#F2BE4B",
-                  "#68CCC2",
-                  "#2A7866",
-                  "#843769",
-                  "#374FB8",
-                  "#BD6F26",
-                  "#4C636F",
-                ],
-                "height": 500,
-                "hovermode": "closest",
-                "legend": Object {
-                  "orientation": undefined,
-                  "traceorder": "normal",
-                },
-                "margin": Object {
-                  "b": 30,
-                  "l": 60,
-                  "pad": 0,
-                  "r": 30,
-                  "t": 50,
-                },
-                "showlegend": true,
-                "title": "",
-                "xaxis": Object {
-                  "automargin": true,
-                  "tickangle": undefined,
-                },
-                "yaxis": Object {
-                  "rangemode": "normal",
-                  "showgrid": true,
-                  "zeroline": false,
-                },
-              }
-            }
-            style={
-              Object {
-                "height": "100%",
-                "width": "100%",
-              }
-            }
-            useResizeHandler={true}
+          <EuiText
+            className="lnsChart__empty"
+            color="subdued"
+            data-test-subj="vizWorkspace__noData"
+            size="xs"
+            textAlign="center"
           >
             <div
-              id="explorerPlotComponent"
-              style={
-                Object {
-                  "height": "100%",
-                  "width": "100%",
-                }
-              }
-            />
-          </PlotlyComponent>
-        </Plt>
+              className="euiText euiText--extraSmall lnsChart__empty"
+              data-test-subj="vizWorkspace__noData"
+            >
+              <EuiTextAlign
+                textAlign="center"
+              >
+                <div
+                  className="euiTextAlign euiTextAlign--center"
+                >
+                  <EuiTextColor
+                    color="subdued"
+                    component="div"
+                  >
+                    <div
+                      className="euiTextColor euiTextColor--subdued"
+                    >
+                      <EuiIcon
+                        color="subdued"
+                        size="xxl"
+                        type="visBarVerticalStacked"
+                      >
+                        <EuiIconEmpty
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </EuiIconEmpty>
+                      </EuiIcon>
+                      <EuiSpacer
+                        size="l"
+                      >
+                        <div
+                          className="euiSpacer euiSpacer--l"
+                        />
+                      </EuiSpacer>
+                      <p>
+                        <FormattedMessage
+                          defaultMessage="No results found"
+                          id="visualization_noData"
+                          values={Object {}}
+                        >
+                          <span>
+                            No results found
+                          </span>
+                        </FormattedMessage>
+                      </p>
+                    </div>
+                  </EuiTextColor>
+                </div>
+              </EuiTextAlign>
+            </div>
+          </EuiText>
+        </EmptyPlaceholder>
       </Bar>
     </VisualizationChart>
   </Visualization>
@@ -3570,7 +3341,7 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
             },
             "isUniColor": false,
             "layout": Object {
-              "height": 500,
+              "height": 1180,
               "legend": Object {
                 "orientation": "v",
                 "traceorder": "normal",
@@ -3753,7 +3524,7 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
               },
               "isUniColor": false,
               "layout": Object {
-                "height": 500,
+                "height": 1180,
                 "legend": Object {
                   "orientation": "v",
                   "traceorder": "normal",
@@ -3781,7 +3552,7 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
         }
         layout={
           Object {
-            "height": 500,
+            "height": 1180,
             "legend": Object {
               "orientation": "v",
               "traceorder": "normal",
@@ -3959,7 +3730,7 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
                 },
                 "isUniColor": false,
                 "layout": Object {
-                  "height": 500,
+                  "height": 1180,
                   "legend": Object {
                     "orientation": "v",
                     "traceorder": "normal",
@@ -3978,160 +3749,83 @@ exports[`Utils helper functions renders displayVisualization function 4`] = `
           }
         }
       >
-        <Plt
-          config={
-            Object {
-              "displaylogo": false,
-              "responsive": true,
-            }
-          }
-          data={
-            Array [
-              Object {
-                "marker": Object {
-                  "color": "rgba(60,161,199,NaN)",
-                  "line": Object {
-                    "color": "#3CA1C7",
-                    "width": undefined,
-                  },
-                },
-                "name": "count('ip')",
-                "orientation": "h",
-                "type": "bar",
-                "x": Array [],
-                "y": Array [],
-              },
-            ]
-          }
-          layout={
-            Object {
-              "bargap": NaN,
-              "bargroupgap": NaN,
-              "barmode": undefined,
-              "colorway": Array [
-                "#3CA1C7",
-                "#8C55A3",
-                "#DB748A",
-                "#F2BE4B",
-                "#68CCC2",
-                "#2A7866",
-                "#843769",
-                "#374FB8",
-                "#BD6F26",
-                "#4C636F",
-              ],
-              "height": 500,
-              "legend": Object {
-                "orientation": undefined,
-                "traceorder": "normal",
-              },
-              "margin": Object {
-                "b": 30,
-                "l": 60,
-                "pad": 0,
-                "r": 30,
-                "t": 50,
-              },
-              "showlegend": true,
-              "title": "",
-              "xaxis": Object {
-                "automargin": true,
-                "tickangle": undefined,
-              },
-            }
-          }
+        <EmptyPlaceholder
+          icon="visBarVerticalStacked"
         >
-          <PlotlyComponent
-            config={
-              Object {
-                "displayModeBar": false,
-                "displaylogo": false,
-                "responsive": true,
-              }
-            }
-            data={
-              Array [
-                Object {
-                  "marker": Object {
-                    "color": "rgba(60,161,199,NaN)",
-                    "line": Object {
-                      "color": "#3CA1C7",
-                      "width": undefined,
-                    },
-                  },
-                  "name": "count('ip')",
-                  "orientation": "h",
-                  "type": "bar",
-                  "x": Array [],
-                  "y": Array [],
-                },
-              ]
-            }
-            debug={false}
-            divId="explorerPlotComponent"
-            layout={
-              Object {
-                "autosize": true,
-                "bargap": NaN,
-                "bargroupgap": NaN,
-                "barmode": undefined,
-                "colorway": Array [
-                  "#3CA1C7",
-                  "#8C55A3",
-                  "#DB748A",
-                  "#F2BE4B",
-                  "#68CCC2",
-                  "#2A7866",
-                  "#843769",
-                  "#374FB8",
-                  "#BD6F26",
-                  "#4C636F",
-                ],
-                "height": 500,
-                "hovermode": "closest",
-                "legend": Object {
-                  "orientation": undefined,
-                  "traceorder": "normal",
-                },
-                "margin": Object {
-                  "b": 30,
-                  "l": 60,
-                  "pad": 0,
-                  "r": 30,
-                  "t": 50,
-                },
-                "showlegend": true,
-                "title": "",
-                "xaxis": Object {
-                  "automargin": true,
-                  "tickangle": undefined,
-                },
-                "yaxis": Object {
-                  "rangemode": "normal",
-                  "showgrid": true,
-                  "zeroline": false,
-                },
-              }
-            }
-            style={
-              Object {
-                "height": "100%",
-                "width": "100%",
-              }
-            }
-            useResizeHandler={true}
+          <EuiText
+            className="lnsChart__empty"
+            color="subdued"
+            data-test-subj="vizWorkspace__noData"
+            size="xs"
+            textAlign="center"
           >
             <div
-              id="explorerPlotComponent"
-              style={
-                Object {
-                  "height": "100%",
-                  "width": "100%",
-                }
-              }
-            />
-          </PlotlyComponent>
-        </Plt>
+              className="euiText euiText--extraSmall lnsChart__empty"
+              data-test-subj="vizWorkspace__noData"
+            >
+              <EuiTextAlign
+                textAlign="center"
+              >
+                <div
+                  className="euiTextAlign euiTextAlign--center"
+                >
+                  <EuiTextColor
+                    color="subdued"
+                    component="div"
+                  >
+                    <div
+                      className="euiTextColor euiTextColor--subdued"
+                    >
+                      <EuiIcon
+                        color="subdued"
+                        size="xxl"
+                        type="visBarVerticalStacked"
+                      >
+                        <EuiIconEmpty
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </EuiIconEmpty>
+                      </EuiIcon>
+                      <EuiSpacer
+                        size="l"
+                      >
+                        <div
+                          className="euiSpacer euiSpacer--l"
+                        />
+                      </EuiSpacer>
+                      <p>
+                        <FormattedMessage
+                          defaultMessage="No results found"
+                          id="visualization_noData"
+                          values={Object {}}
+                        >
+                          <span>
+                            No results found
+                          </span>
+                        </FormattedMessage>
+                      </p>
+                    </div>
+                  </EuiTextColor>
+                </div>
+              </EuiTextAlign>
+            </div>
+          </EuiText>
+        </EmptyPlaceholder>
       </Bar>
     </VisualizationChart>
   </Visualization>
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/app.scss b/dashboards-observability/public/components/event_analytics/explorer/visualizations/app.scss
index 2f01e1b8e..ef67ba34b 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/app.scss
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/app.scss
@@ -32,6 +32,35 @@
   flex-grow: 1;
 }
 
+.containerPanel {
+  padding: 0 16px;
+}
+
+.dataConfigContainer {
+  height: 1242px;
+  overflow: auto;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c2c2c2;
+}
+
+.euiResizableToggleButton:not(:focus):not(:active):not(.euiResizableToggleButton-isVisible):not(.euiResizableToggleButton-isCollapsed) {
+  height: 24px;
+  width: 24px;
+  top: 0;
+  left: inherit;
+  box-shadow: none;
+}
+
 .lensChartIcon__subdued {
   fill: $euiTextSubduedColor;
 
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
index 435c32d43..1cac93734 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
@@ -213,26 +213,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
               "mapTo": "dataConfig",
               "name": "Data",
               "sections": Array [
-                Object {
-                  "editor": [Function],
-                  "id": "value_options",
-                  "mapTo": "valueOptions",
-                  "name": "Value options",
-                  "schemas": Array [
-                    Object {
-                      "component": null,
-                      "isSingleSelection": false,
-                      "mapTo": "xaxis",
-                      "name": "X-axis",
-                    },
-                    Object {
-                      "component": null,
-                      "isSingleSelection": false,
-                      "mapTo": "yaxis",
-                      "name": "Y-axis",
-                    },
-                  ],
-                },
                 Object {
                   "editor": [Function],
                   "id": "legend",
@@ -341,6 +321,12 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         ],
                       },
                     },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "labelSize",
+                      "name": "Label Size",
+                    },
                     Object {
                       "component": [Function],
                       "defaultState": 0,
@@ -469,7 +455,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
           },
           "isUniColor": false,
           "layout": Object {
-            "height": 500,
+            "height": 1180,
             "legend": Object {
               "orientation": "v",
               "traceorder": "normal",
@@ -517,7 +503,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
             async={false}
             compressed={false}
             fullWidth={true}
-            isClearable={true}
+            isClearable={false}
             onChange={[Function]}
             options={
               Array [
@@ -534,26 +520,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         "mapTo": "dataConfig",
                         "name": "Data",
                         "sections": Array [
-                          Object {
-                            "editor": [Function],
-                            "id": "value_options",
-                            "mapTo": "valueOptions",
-                            "name": "Value options",
-                            "schemas": Array [
-                              Object {
-                                "component": null,
-                                "isSingleSelection": false,
-                                "mapTo": "xaxis",
-                                "name": "X-axis",
-                              },
-                              Object {
-                                "component": null,
-                                "isSingleSelection": false,
-                                "mapTo": "yaxis",
-                                "name": "Y-axis",
-                              },
-                            ],
-                          },
                           Object {
                             "editor": [Function],
                             "id": "legend",
@@ -662,6 +628,12 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   ],
                                 },
                               },
+                              Object {
+                                "component": [Function],
+                                "eleType": "input",
+                                "mapTo": "labelSize",
+                                "name": "Label Size",
+                              },
                               Object {
                                 "component": [Function],
                                 "defaultState": 0,
@@ -790,7 +762,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                     },
                     "isUniColor": false,
                     "layout": Object {
-                      "height": 500,
+                      "height": 1180,
                       "legend": Object {
                         "orientation": "v",
                         "traceorder": "normal",
@@ -870,6 +842,13 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   ],
                                 },
                               },
+                              Object {
+                                "component": [Function],
+                                "eleType": "input",
+                                "mapTo": "legendSize",
+                                "name": "Legend Size",
+                                "title": "Legend Size",
+                              },
                             ],
                           },
                           Object {
@@ -895,17 +874,13 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                       "id": "lines",
                                       "name": "Lines",
                                     },
-                                    Object {
-                                      "id": "bar",
-                                      "name": "Bars",
-                                    },
                                     Object {
                                       "id": "markers",
-                                      "name": "Points",
+                                      "name": "Marker",
                                     },
                                     Object {
                                       "id": "lines+markers",
-                                      "name": "Lines + Points",
+                                      "name": "Lines + Markers",
                                     },
                                   ],
                                 },
@@ -972,8 +947,56 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   "max": 40,
                                 },
                               },
+                              Object {
+                                "component": [Function],
+                                "eleType": "input",
+                                "mapTo": "labelSize",
+                                "name": "Label Size",
+                                "title": "Label Size",
+                              },
+                              Object {
+                                "component": [Function],
+                                "defaultState": 0,
+                                "eleType": "slider",
+                                "mapTo": "rotateLabels",
+                                "name": "Rotate labels",
+                                "props": Object {
+                                  "max": 90,
+                                  "min": -90,
+                                  "showTicks": true,
+                                  "ticks": Array [
+                                    Object {
+                                      "label": "-90°",
+                                      "value": -90,
+                                    },
+                                    Object {
+                                      "label": "-45°",
+                                      "value": -45,
+                                    },
+                                    Object {
+                                      "label": "0°",
+                                      "value": 0,
+                                    },
+                                    Object {
+                                      "label": "45°",
+                                      "value": 45,
+                                    },
+                                    Object {
+                                      "label": "90°",
+                                      "value": 90,
+                                    },
+                                  ],
+                                },
+                              },
                             ],
                           },
+                          Object {
+                            "editor": [Function],
+                            "id": "color-theme",
+                            "mapTo": "colorTheme",
+                            "name": "Color theme",
+                            "schemas": Array [],
+                          },
                           Object {
                             "defaultState": Array [],
                             "editor": [Function],
@@ -999,11 +1022,11 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                       },
                     ],
                   },
-                  "fullLabel": "Line",
+                  "fullLabel": "Time series",
                   "icon": [Function],
                   "iconType": "visLine",
                   "id": "line",
-                  "label": "Line",
+                  "label": "Time series",
                   "name": "line",
                   "selection": Object {
                     "dataLoss": "nothing",
@@ -1035,7 +1058,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         "#BD6F26",
                         "#4C636F",
                       ],
-                      "height": 500,
+                      "height": 1180,
                       "legend": Object {
                         "orientation": "v",
                         "traceorder": "normal",
@@ -1238,7 +1261,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         "#BD6F26",
                         "#4C636F",
                       ],
-                      "height": 500,
+                      "height": 1180,
                       "legend": Object {
                         "orientation": "v",
                         "traceorder": "normal",
@@ -1277,6 +1300,37 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         "mapTo": "dataConfig",
                         "name": "Data",
                         "sections": Array [
+                          Object {
+                            "editor": [Function],
+                            "id": "legend",
+                            "mapTo": "legend",
+                            "name": "Legend",
+                            "schemas": Array [
+                              Object {
+                                "component": null,
+                                "mapTo": "showLegend",
+                                "name": "Show Colorscale",
+                                "props": Object {
+                                  "defaultSelections": Array [
+                                    Object {
+                                      "id": "show",
+                                      "name": "Show",
+                                    },
+                                  ],
+                                  "options": Array [
+                                    Object {
+                                      "id": "show",
+                                      "name": "Show",
+                                    },
+                                    Object {
+                                      "id": "hidden",
+                                      "name": "Hidden",
+                                    },
+                                  ],
+                                },
+                              },
+                            ],
+                          },
                           Object {
                             "editor": [Function],
                             "id": "chart_styles",
@@ -1579,7 +1633,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                       "responsive": true,
                     },
                     "layout": Object {
-                      "height": 500,
+                      "height": 1180,
                       "legend": Object {
                         "orientation": "v",
                         "traceorder": "normal",
@@ -1652,7 +1706,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         "#BD6F26",
                         "#4C636F",
                       ],
-                      "height": 500,
+                      "height": 1180,
                       "legend": Object {
                         "orientation": "v",
                         "traceorder": "normal",
@@ -1692,6 +1746,37 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         "mapTo": "dataConfig",
                         "name": "Data",
                         "sections": Array [
+                          Object {
+                            "editor": [Function],
+                            "id": "legend",
+                            "mapTo": "legend",
+                            "name": "Legend",
+                            "schemas": Array [
+                              Object {
+                                "component": null,
+                                "mapTo": "showLegend",
+                                "name": "Show Colorscale",
+                                "props": Object {
+                                  "defaultSelections": Array [
+                                    Object {
+                                      "id": "show",
+                                      "name": "Show",
+                                    },
+                                  ],
+                                  "options": Array [
+                                    Object {
+                                      "id": "show",
+                                      "name": "Show",
+                                    },
+                                    Object {
+                                      "id": "hidden",
+                                      "name": "Hidden",
+                                    },
+                                  ],
+                                },
+                              },
+                            ],
+                          },
                           Object {
                             "editor": [Function],
                             "id": "treemap_options",
@@ -1740,6 +1825,30 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                   "isClearable": false,
                                 },
                               },
+                              Object {
+                                "component": [Function],
+                                "eleType": "buttons",
+                                "mapTo": "sort_sectors",
+                                "name": "Sort Sectors",
+                                "props": Object {
+                                  "defaultSelections": Array [
+                                    Object {
+                                      "id": undefined,
+                                      "name": "Largest to Smallest",
+                                    },
+                                  ],
+                                  "options": Array [
+                                    Object {
+                                      "id": "largest_to_smallest",
+                                      "name": "Largest to Smallest",
+                                    },
+                                    Object {
+                                      "id": "random",
+                                      "name": "Random",
+                                    },
+                                  ],
+                                },
+                              },
                             ],
                           },
                           Object {
@@ -2023,7 +2132,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                     },
                     "isUniColor": false,
                     "layout": Object {
-                      "height": 500,
+                      "height": 1180,
                       "legend": Object {
                         "orientation": "v",
                         "traceorder": "normal",
@@ -2039,16 +2148,8 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                     },
                   },
                 },
-              ]
-            }
-            placeholder="Select a chart"
-            renderOption={[Function]}
-            selectedOptions={
-              Array [
                 Object {
-                  "barWidth": 0.97,
                   "category": "Visualizations",
-                  "categoryAxis": "xaxis",
                   "component": [Function],
                   "editorConfig": Object {
                     "panelTabs": Array [
@@ -2060,81 +2161,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         "sections": Array [
                           Object {
                             "editor": [Function],
-                            "id": "value_options",
-                            "mapTo": "valueOptions",
-                            "name": "Value options",
-                            "schemas": Array [
-                              Object {
-                                "component": null,
-                                "isSingleSelection": false,
-                                "mapTo": "xaxis",
-                                "name": "X-axis",
-                              },
-                              Object {
-                                "component": null,
-                                "isSingleSelection": false,
-                                "mapTo": "yaxis",
-                                "name": "Y-axis",
-                              },
-                            ],
-                          },
-                          Object {
-                            "editor": [Function],
-                            "id": "legend",
-                            "mapTo": "legend",
-                            "name": "Legend",
-                            "schemas": Array [
-                              Object {
-                                "component": null,
-                                "mapTo": "showLegend",
-                                "name": "Show Legend",
-                                "props": Object {
-                                  "defaultSelections": Array [
-                                    Object {
-                                      "id": "show",
-                                      "name": "Show",
-                                    },
-                                  ],
-                                  "options": Array [
-                                    Object {
-                                      "id": "show",
-                                      "name": "Show",
-                                    },
-                                    Object {
-                                      "id": "hidden",
-                                      "name": "Hidden",
-                                    },
-                                  ],
-                                },
-                              },
-                              Object {
-                                "component": null,
-                                "mapTo": "position",
-                                "name": "Position",
-                                "props": Object {
-                                  "defaultSelections": Array [
-                                    Object {
-                                      "id": "v",
-                                      "name": "Right",
-                                    },
-                                  ],
-                                  "options": Array [
-                                    Object {
-                                      "id": "v",
-                                      "name": "Right",
-                                    },
-                                    Object {
-                                      "id": "h",
-                                      "name": "Bottom",
-                                    },
-                                  ],
-                                },
-                              },
-                            ],
-                          },
-                          Object {
-                            "editor": [Function],
-                            "id": "chart_styles",
+                            "id": "chart-styles",
                             "mapTo": "chartStyles",
                             "name": "Chart styles",
                             "schemas": Array [
@@ -2146,11 +2173,15 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                 "props": Object {
                                   "defaultSelections": Array [
                                     Object {
-                                      "id": "v",
-                                      "name": "Vertical",
+                                      "id": "auto",
+                                      "name": "Auto",
                                     },
                                   ],
                                   "options": Array [
+                                    Object {
+                                      "id": "auto",
+                                      "name": "Auto",
+                                    },
                                     Object {
                                       "id": "v",
                                       "name": "Vertical",
@@ -2165,86 +2196,138 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                               Object {
                                 "component": [Function],
                                 "eleType": "buttons",
-                                "mapTo": "mode",
-                                "name": "Mode",
+                                "mapTo": "legendPlacement",
+                                "name": "Legend Placement",
                                 "props": Object {
                                   "defaultSelections": Array [
                                     Object {
-                                      "id": "group",
-                                      "name": "Group",
+                                      "id": "center",
+                                      "name": "Center",
                                     },
                                   ],
                                   "options": Array [
                                     Object {
-                                      "id": "group",
-                                      "name": "Group",
+                                      "id": "center",
+                                      "name": "Center",
                                     },
                                     Object {
-                                      "id": "stack",
-                                      "name": "Stack",
+                                      "id": "right",
+                                      "name": "Right",
+                                    },
+                                    Object {
+                                      "id": "left",
+                                      "name": "Left",
                                     },
                                   ],
                                 },
                               },
                               Object {
                                 "component": [Function],
-                                "defaultState": 0,
-                                "eleType": "slider",
-                                "mapTo": "rotateBarLabels",
-                                "name": "Rotate bar labels",
-                                "props": Object {
-                                  "max": 90,
-                                  "min": -90,
-                                  "showTicks": true,
-                                  "ticks": Array [
-                                    Object {
-                                      "label": "-90°",
-                                      "value": -90,
-                                    },
-                                    Object {
-                                      "label": "-45°",
-                                      "value": -45,
-                                    },
-                                    Object {
-                                      "label": "0°",
-                                      "value": 0,
-                                    },
-                                    Object {
-                                      "label": "45°",
-                                      "value": 45,
-                                    },
-                                    Object {
-                                      "label": "90°",
-                                      "value": 90,
-                                    },
-                                  ],
-                                },
+                                "eleType": "input",
+                                "mapTo": "titleSize",
+                                "name": "Title Size",
+                                "title": "Title Size",
                               },
                               Object {
                                 "component": [Function],
-                                "defaultState": 0.7,
-                                "eleType": "slider",
-                                "mapTo": "groupWidth",
-                                "name": "Group width",
-                                "props": Object {
-                                  "max": 1,
-                                  "step": 0.01,
-                                },
+                                "eleType": "input",
+                                "mapTo": "valueSize",
+                                "name": "Value Size",
+                                "title": "Value Size",
                               },
                               Object {
                                 "component": [Function],
-                                "defaultState": 0.97,
-                                "eleType": "slider",
-                                "mapTo": "barWidth",
-                                "name": "Bar width",
-                                "props": Object {
-                                  "max": 1,
-                                  "step": 0.01,
-                                },
+                                "currentValue": false,
+                                "eleType": "switchButton",
+                                "mapTo": "showThresholdLabels",
+                                "name": "Show threshold labels",
+                                "title": "Show threshold labels",
                               },
                               Object {
                                 "component": [Function],
-                                "defaultState": 1,
+                                "currentValue": true,
+                                "eleType": "switchButton",
+                                "mapTo": "showThresholdMarkers",
+                                "name": "Show threshold markers",
+                                "title": "Show threshold markers",
+                              },
+                            ],
+                          },
+                          Object {
+                            "defaultState": Array [],
+                            "editor": [Function],
+                            "id": "thresholds",
+                            "mapTo": "thresholds",
+                            "name": "Thresholds",
+                            "props": Object {
+                              "maxLimit": 1,
+                            },
+                            "schemas": Array [],
+                          },
+                        ],
+                      },
+                      Object {
+                        "content": Array [],
+                        "editor": [Function],
+                        "id": "style-panel",
+                        "mapTo": "layoutConfig",
+                        "name": "Layout",
+                      },
+                    ],
+                  },
+                  "fullLabel": "Gauge",
+                  "icon": [Function],
+                  "iconType": "visGauge",
+                  "id": "gauge",
+                  "label": "Gauge",
+                  "name": "Gauge",
+                  "selection": Object {
+                    "dataLoss": "nothing",
+                  },
+                  "type": "indicator",
+                  "valueSeries": "yaxis",
+                  "visConfig": Object {
+                    "config": Object {
+                      "displaylogo": false,
+                      "responsive": true,
+                    },
+                    "layout": Object {
+                      "height": 1180,
+                      "legend": Object {
+                        "orientation": "v",
+                        "traceorder": "normal",
+                      },
+                      "margin": Object {
+                        "b": 30,
+                        "l": 60,
+                        "pad": 0,
+                        "r": 30,
+                        "t": 50,
+                      },
+                      "showlegend": true,
+                    },
+                  },
+                },
+                Object {
+                  "category": "Visualizations",
+                  "component": [Function],
+                  "editorConfig": Object {
+                    "panelTabs": Array [
+                      Object {
+                        "editor": [Function],
+                        "id": "data-panel",
+                        "mapTo": "dataConfig",
+                        "name": "Data",
+                        "sections": Array [
+                          Object {
+                            "editor": [Function],
+                            "id": "chart-styles",
+                            "mapTo": "chartStyles",
+                            "name": "Chart styles",
+                            "schemas": Array [
+                              Object {
+                                "component": [Function],
+                                "defaultState": 2,
                                 "eleType": "slider",
                                 "mapTo": "lineWidth",
                                 "name": "Line width",
@@ -2254,7 +2337,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                               },
                               Object {
                                 "component": [Function],
-                                "defaultState": 80,
+                                "defaultState": 40,
                                 "eleType": "slider",
                                 "mapTo": "fillOpacity",
                                 "name": "Fill Opacity",
@@ -2271,6 +2354,60 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                             "name": "Color Theme",
                             "schemas": Array [],
                           },
+                          Object {
+                            "editor": [Function],
+                            "id": "legend",
+                            "mapTo": "legend",
+                            "name": "Legend",
+                            "schemas": Array [
+                              Object {
+                                "component": null,
+                                "mapTo": "showLegend",
+                                "name": "Show Legend",
+                                "props": Object {
+                                  "defaultSelections": Array [
+                                    Object {
+                                      "id": "show",
+                                      "name": "Show",
+                                    },
+                                  ],
+                                  "options": Array [
+                                    Object {
+                                      "id": "show",
+                                      "name": "Show",
+                                    },
+                                    Object {
+                                      "id": "hidden",
+                                      "name": "Hidden",
+                                    },
+                                  ],
+                                },
+                              },
+                              Object {
+                                "component": null,
+                                "mapTo": "position",
+                                "name": "Position",
+                                "props": Object {
+                                  "defaultSelections": Array [
+                                    Object {
+                                      "id": "v",
+                                      "name": "Right",
+                                    },
+                                  ],
+                                  "options": Array [
+                                    Object {
+                                      "id": "v",
+                                      "name": "Right",
+                                    },
+                                    Object {
+                                      "id": "h",
+                                      "name": "Bottom",
+                                    },
+                                  ],
+                                },
+                              },
+                            ],
+                          },
                         ],
                       },
                       Object {
@@ -2280,41 +2417,25 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         "mapTo": "layoutConfig",
                         "name": "Layout",
                       },
-                      Object {
-                        "editor": [Function],
-                        "id": "availability-panel",
-                        "mapTo": "availabilityConfig",
-                        "name": "Availability",
-                      },
                     ],
                   },
-                  "fillOpacity": 80,
-                  "fullLabel": "Bar",
-                  "groupWidth": 0.7,
-                  "icon": [Function],
-                  "iconType": "visBarVerticalStacked",
-                  "id": "bar",
-                  "label": "Bar",
-                  "labelAngle": 0,
-                  "legendPosition": "v",
-                  "lineWidth": 1,
-                  "mode": "group",
-                  "name": "bar",
-                  "orientation": "v",
+                  "fullLabel": "Histogram",
+                  "iconType": "visArea",
+                  "id": "histogram",
+                  "label": "Histogram",
+                  "name": "histogram",
                   "selection": Object {
                     "dataLoss": "nothing",
                   },
-                  "seriesAxis": "yaxis",
-                  "showLegend": "show",
-                  "type": "bar",
+                  "type": "histogram",
+                  "valueSeries": "yaxis",
                   "visConfig": Object {
                     "config": Object {
                       "displaylogo": false,
                       "responsive": true,
                     },
-                    "isUniColor": false,
                     "layout": Object {
-                      "height": 500,
+                      "height": 1180,
                       "legend": Object {
                         "orientation": "v",
                         "traceorder": "normal",
@@ -2332,2504 +2453,326 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                 },
               ]
             }
-            singleSelection={true}
-            sortMatchesBy="none"
-          >
-            <div
-              aria-expanded={false}
-              aria-haspopup="listbox"
-              aria-label="config chart selector"
-              className="euiComboBox euiComboBox--fullWidth"
-              onKeyDown={[Function]}
-              role="combobox"
-            >
-              <EuiComboBoxInput
-                autoSizeInputRef={[Function]}
-                compressed={false}
-                fullWidth={true}
-                hasSelectedOptions={true}
-                inputRef={[Function]}
-                isListOpen={false}
-                noIcon={false}
-                onChange={[Function]}
-                onClear={[Function]}
-                onClick={[Function]}
-                onCloseListClick={[Function]}
-                onFocus={[Function]}
-                onOpenListClick={[Function]}
-                onRemoveOption={[Function]}
-                placeholder="Select a chart"
-                rootId={[Function]}
-                searchValue=""
-                selectedOptions={
-                  Array [
-                    Object {
-                      "barWidth": 0.97,
-                      "category": "Visualizations",
-                      "categoryAxis": "xaxis",
-                      "component": [Function],
-                      "editorConfig": Object {
-                        "panelTabs": Array [
+            placeholder="Select a chart"
+            renderOption={[Function]}
+            selectedOptions={
+              Array [
+                Object {
+                  "barWidth": 0.97,
+                  "category": "Visualizations",
+                  "categoryAxis": "xaxis",
+                  "component": [Function],
+                  "editorConfig": Object {
+                    "panelTabs": Array [
+                      Object {
+                        "editor": [Function],
+                        "id": "data-panel",
+                        "mapTo": "dataConfig",
+                        "name": "Data",
+                        "sections": Array [
                           Object {
                             "editor": [Function],
-                            "id": "data-panel",
-                            "mapTo": "dataConfig",
-                            "name": "Data",
-                            "sections": Array [
+                            "id": "legend",
+                            "mapTo": "legend",
+                            "name": "Legend",
+                            "schemas": Array [
                               Object {
-                                "editor": [Function],
-                                "id": "value_options",
-                                "mapTo": "valueOptions",
-                                "name": "Value options",
-                                "schemas": Array [
-                                  Object {
-                                    "component": null,
-                                    "isSingleSelection": false,
-                                    "mapTo": "xaxis",
-                                    "name": "X-axis",
-                                  },
-                                  Object {
-                                    "component": null,
-                                    "isSingleSelection": false,
-                                    "mapTo": "yaxis",
-                                    "name": "Y-axis",
-                                  },
-                                ],
-                              },
-                              Object {
-                                "editor": [Function],
-                                "id": "legend",
-                                "mapTo": "legend",
-                                "name": "Legend",
-                                "schemas": Array [
-                                  Object {
-                                    "component": null,
-                                    "mapTo": "showLegend",
-                                    "name": "Show Legend",
-                                    "props": Object {
-                                      "defaultSelections": Array [
-                                        Object {
-                                          "id": "show",
-                                          "name": "Show",
-                                        },
-                                      ],
-                                      "options": Array [
-                                        Object {
-                                          "id": "show",
-                                          "name": "Show",
-                                        },
-                                        Object {
-                                          "id": "hidden",
-                                          "name": "Hidden",
-                                        },
-                                      ],
+                                "component": null,
+                                "mapTo": "showLegend",
+                                "name": "Show Legend",
+                                "props": Object {
+                                  "defaultSelections": Array [
+                                    Object {
+                                      "id": "show",
+                                      "name": "Show",
                                     },
-                                  },
-                                  Object {
-                                    "component": null,
-                                    "mapTo": "position",
-                                    "name": "Position",
-                                    "props": Object {
-                                      "defaultSelections": Array [
-                                        Object {
-                                          "id": "v",
-                                          "name": "Right",
-                                        },
-                                      ],
-                                      "options": Array [
-                                        Object {
-                                          "id": "v",
-                                          "name": "Right",
-                                        },
-                                        Object {
-                                          "id": "h",
-                                          "name": "Bottom",
-                                        },
-                                      ],
+                                  ],
+                                  "options": Array [
+                                    Object {
+                                      "id": "show",
+                                      "name": "Show",
                                     },
-                                  },
-                                ],
+                                    Object {
+                                      "id": "hidden",
+                                      "name": "Hidden",
+                                    },
+                                  ],
+                                },
                               },
                               Object {
-                                "editor": [Function],
-                                "id": "chart_styles",
-                                "mapTo": "chartStyles",
-                                "name": "Chart styles",
-                                "schemas": Array [
-                                  Object {
-                                    "component": [Function],
-                                    "eleType": "buttons",
-                                    "mapTo": "orientation",
-                                    "name": "Orientation",
-                                    "props": Object {
-                                      "defaultSelections": Array [
-                                        Object {
-                                          "id": "v",
-                                          "name": "Vertical",
-                                        },
-                                      ],
-                                      "options": Array [
-                                        Object {
-                                          "id": "v",
-                                          "name": "Vertical",
-                                        },
-                                        Object {
-                                          "id": "h",
-                                          "name": "Horizontal",
-                                        },
-                                      ],
-                                    },
-                                  },
-                                  Object {
-                                    "component": [Function],
-                                    "eleType": "buttons",
-                                    "mapTo": "mode",
-                                    "name": "Mode",
-                                    "props": Object {
-                                      "defaultSelections": Array [
-                                        Object {
-                                          "id": "group",
-                                          "name": "Group",
-                                        },
-                                      ],
-                                      "options": Array [
-                                        Object {
-                                          "id": "group",
-                                          "name": "Group",
-                                        },
-                                        Object {
-                                          "id": "stack",
-                                          "name": "Stack",
-                                        },
-                                      ],
-                                    },
-                                  },
-                                  Object {
-                                    "component": [Function],
-                                    "defaultState": 0,
-                                    "eleType": "slider",
-                                    "mapTo": "rotateBarLabels",
-                                    "name": "Rotate bar labels",
-                                    "props": Object {
-                                      "max": 90,
-                                      "min": -90,
-                                      "showTicks": true,
-                                      "ticks": Array [
-                                        Object {
-                                          "label": "-90°",
-                                          "value": -90,
-                                        },
-                                        Object {
-                                          "label": "-45°",
-                                          "value": -45,
-                                        },
-                                        Object {
-                                          "label": "0°",
-                                          "value": 0,
-                                        },
-                                        Object {
-                                          "label": "45°",
-                                          "value": 45,
-                                        },
-                                        Object {
-                                          "label": "90°",
-                                          "value": 90,
-                                        },
-                                      ],
-                                    },
-                                  },
-                                  Object {
-                                    "component": [Function],
-                                    "defaultState": 0.7,
-                                    "eleType": "slider",
-                                    "mapTo": "groupWidth",
-                                    "name": "Group width",
-                                    "props": Object {
-                                      "max": 1,
-                                      "step": 0.01,
-                                    },
-                                  },
-                                  Object {
-                                    "component": [Function],
-                                    "defaultState": 0.97,
-                                    "eleType": "slider",
-                                    "mapTo": "barWidth",
-                                    "name": "Bar width",
-                                    "props": Object {
-                                      "max": 1,
-                                      "step": 0.01,
+                                "component": null,
+                                "mapTo": "position",
+                                "name": "Position",
+                                "props": Object {
+                                  "defaultSelections": Array [
+                                    Object {
+                                      "id": "v",
+                                      "name": "Right",
                                     },
-                                  },
-                                  Object {
-                                    "component": [Function],
-                                    "defaultState": 1,
-                                    "eleType": "slider",
-                                    "mapTo": "lineWidth",
-                                    "name": "Line width",
-                                    "props": Object {
-                                      "max": 10,
+                                  ],
+                                  "options": Array [
+                                    Object {
+                                      "id": "v",
+                                      "name": "Right",
                                     },
-                                  },
-                                  Object {
-                                    "component": [Function],
-                                    "defaultState": 80,
-                                    "eleType": "slider",
-                                    "mapTo": "fillOpacity",
-                                    "name": "Fill Opacity",
-                                    "props": Object {
-                                      "max": 100,
+                                    Object {
+                                      "id": "h",
+                                      "name": "Bottom",
                                     },
-                                  },
-                                ],
-                              },
-                              Object {
-                                "editor": [Function],
-                                "id": "color-theme",
-                                "mapTo": "colorTheme",
-                                "name": "Color Theme",
-                                "schemas": Array [],
+                                  ],
+                                },
                               },
                             ],
                           },
-                          Object {
-                            "content": Array [],
-                            "editor": [Function],
-                            "id": "style-panel",
-                            "mapTo": "layoutConfig",
-                            "name": "Layout",
-                          },
                           Object {
                             "editor": [Function],
-                            "id": "availability-panel",
-                            "mapTo": "availabilityConfig",
-                            "name": "Availability",
-                          },
-                        ],
-                      },
-                      "fillOpacity": 80,
-                      "fullLabel": "Bar",
-                      "groupWidth": 0.7,
-                      "icon": [Function],
-                      "iconType": "visBarVerticalStacked",
-                      "id": "bar",
-                      "label": "Bar",
-                      "labelAngle": 0,
-                      "legendPosition": "v",
-                      "lineWidth": 1,
-                      "mode": "group",
-                      "name": "bar",
-                      "orientation": "v",
-                      "selection": Object {
-                        "dataLoss": "nothing",
-                      },
-                      "seriesAxis": "yaxis",
-                      "showLegend": "show",
-                      "type": "bar",
-                      "visConfig": Object {
-                        "config": Object {
-                          "displaylogo": false,
-                          "responsive": true,
-                        },
-                        "isUniColor": false,
-                        "layout": Object {
-                          "height": 500,
-                          "legend": Object {
-                            "orientation": "v",
-                            "traceorder": "normal",
-                          },
-                          "margin": Object {
-                            "b": 30,
-                            "l": 60,
-                            "pad": 0,
-                            "r": 30,
-                            "t": 50,
-                          },
-                          "showlegend": true,
-                        },
-                      },
-                    },
-                  ]
-                }
-                singleSelection={true}
-                toggleButtonRef={[Function]}
-                updatePosition={[Function]}
-                value="Bar"
-              >
-                <EuiFormControlLayout
-                  clear={
-                    Object {
-                      "data-test-subj": "comboBoxClearButton",
-                      "onClick": [Function],
-                    }
-                  }
-                  compressed={false}
-                  fullWidth={true}
-                  icon={
-                    Object {
-                      "aria-label": "Open list of options",
-                      "data-test-subj": "comboBoxToggleListButton",
-                      "disabled": undefined,
-                      "onClick": [Function],
-                      "ref": [Function],
-                      "side": "right",
-                      "type": "arrowDown",
-                    }
-                  }
-                >
-                  <div
-                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
-                  >
-                    <div
-                      className="euiFormControlLayout__childrenWrapper"
-                    >
-                      <div
-                        className="euiComboBox__inputWrap euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
-                        data-test-subj="comboBoxInput"
-                        onClick={[Function]}
-                        tabIndex={-1}
-                      >
-                        <EuiComboBoxPill
-                          asPlainText={false}
-                          barWidth={0.97}
-                          category="Visualizations"
-                          categoryAxis="xaxis"
-                          color="hollow"
-                          component={[Function]}
-                          editorConfig={
-                            Object {
-                              "panelTabs": Array [
-                                Object {
-                                  "editor": [Function],
-                                  "id": "data-panel",
-                                  "mapTo": "dataConfig",
-                                  "name": "Data",
-                                  "sections": Array [
+                            "id": "chart_styles",
+                            "mapTo": "chartStyles",
+                            "name": "Chart styles",
+                            "schemas": Array [
+                              Object {
+                                "component": [Function],
+                                "eleType": "buttons",
+                                "mapTo": "orientation",
+                                "name": "Orientation",
+                                "props": Object {
+                                  "defaultSelections": Array [
                                     Object {
-                                      "editor": [Function],
-                                      "id": "value_options",
-                                      "mapTo": "valueOptions",
-                                      "name": "Value options",
-                                      "schemas": Array [
-                                        Object {
-                                          "component": null,
-                                          "isSingleSelection": false,
-                                          "mapTo": "xaxis",
-                                          "name": "X-axis",
-                                        },
-                                        Object {
-                                          "component": null,
-                                          "isSingleSelection": false,
-                                          "mapTo": "yaxis",
-                                          "name": "Y-axis",
-                                        },
-                                      ],
+                                      "id": "v",
+                                      "name": "Vertical",
                                     },
+                                  ],
+                                  "options": Array [
                                     Object {
-                                      "editor": [Function],
-                                      "id": "legend",
-                                      "mapTo": "legend",
-                                      "name": "Legend",
-                                      "schemas": Array [
-                                        Object {
-                                          "component": null,
-                                          "mapTo": "showLegend",
-                                          "name": "Show Legend",
-                                          "props": Object {
-                                            "defaultSelections": Array [
-                                              Object {
-                                                "id": "show",
-                                                "name": "Show",
-                                              },
-                                            ],
-                                            "options": Array [
-                                              Object {
-                                                "id": "show",
-                                                "name": "Show",
-                                              },
-                                              Object {
-                                                "id": "hidden",
-                                                "name": "Hidden",
-                                              },
-                                            ],
-                                          },
-                                        },
-                                        Object {
-                                          "component": null,
-                                          "mapTo": "position",
-                                          "name": "Position",
-                                          "props": Object {
-                                            "defaultSelections": Array [
-                                              Object {
-                                                "id": "v",
-                                                "name": "Right",
-                                              },
-                                            ],
-                                            "options": Array [
-                                              Object {
-                                                "id": "v",
-                                                "name": "Right",
-                                              },
-                                              Object {
-                                                "id": "h",
-                                                "name": "Bottom",
-                                              },
-                                            ],
-                                          },
-                                        },
-                                      ],
+                                      "id": "v",
+                                      "name": "Vertical",
                                     },
                                     Object {
-                                      "editor": [Function],
-                                      "id": "chart_styles",
-                                      "mapTo": "chartStyles",
-                                      "name": "Chart styles",
-                                      "schemas": Array [
-                                        Object {
-                                          "component": [Function],
-                                          "eleType": "buttons",
-                                          "mapTo": "orientation",
-                                          "name": "Orientation",
-                                          "props": Object {
-                                            "defaultSelections": Array [
-                                              Object {
-                                                "id": "v",
-                                                "name": "Vertical",
-                                              },
-                                            ],
-                                            "options": Array [
-                                              Object {
-                                                "id": "v",
-                                                "name": "Vertical",
-                                              },
-                                              Object {
-                                                "id": "h",
-                                                "name": "Horizontal",
-                                              },
-                                            ],
-                                          },
-                                        },
-                                        Object {
-                                          "component": [Function],
-                                          "eleType": "buttons",
-                                          "mapTo": "mode",
-                                          "name": "Mode",
-                                          "props": Object {
-                                            "defaultSelections": Array [
-                                              Object {
-                                                "id": "group",
-                                                "name": "Group",
-                                              },
-                                            ],
-                                            "options": Array [
-                                              Object {
-                                                "id": "group",
-                                                "name": "Group",
-                                              },
-                                              Object {
-                                                "id": "stack",
-                                                "name": "Stack",
-                                              },
-                                            ],
-                                          },
-                                        },
-                                        Object {
-                                          "component": [Function],
-                                          "defaultState": 0,
-                                          "eleType": "slider",
-                                          "mapTo": "rotateBarLabels",
-                                          "name": "Rotate bar labels",
-                                          "props": Object {
-                                            "max": 90,
-                                            "min": -90,
-                                            "showTicks": true,
-                                            "ticks": Array [
-                                              Object {
-                                                "label": "-90°",
-                                                "value": -90,
-                                              },
-                                              Object {
-                                                "label": "-45°",
-                                                "value": -45,
-                                              },
-                                              Object {
-                                                "label": "0°",
-                                                "value": 0,
-                                              },
-                                              Object {
-                                                "label": "45°",
-                                                "value": 45,
-                                              },
-                                              Object {
-                                                "label": "90°",
-                                                "value": 90,
-                                              },
-                                            ],
-                                          },
-                                        },
-                                        Object {
-                                          "component": [Function],
-                                          "defaultState": 0.7,
-                                          "eleType": "slider",
-                                          "mapTo": "groupWidth",
-                                          "name": "Group width",
-                                          "props": Object {
-                                            "max": 1,
-                                            "step": 0.01,
-                                          },
-                                        },
-                                        Object {
-                                          "component": [Function],
-                                          "defaultState": 0.97,
-                                          "eleType": "slider",
-                                          "mapTo": "barWidth",
-                                          "name": "Bar width",
-                                          "props": Object {
-                                            "max": 1,
-                                            "step": 0.01,
-                                          },
-                                        },
-                                        Object {
-                                          "component": [Function],
-                                          "defaultState": 1,
-                                          "eleType": "slider",
-                                          "mapTo": "lineWidth",
-                                          "name": "Line width",
-                                          "props": Object {
-                                            "max": 10,
-                                          },
-                                        },
-                                        Object {
-                                          "component": [Function],
-                                          "defaultState": 80,
-                                          "eleType": "slider",
-                                          "mapTo": "fillOpacity",
-                                          "name": "Fill Opacity",
-                                          "props": Object {
-                                            "max": 100,
-                                          },
-                                        },
-                                      ],
+                                      "id": "h",
+                                      "name": "Horizontal",
+                                    },
+                                  ],
+                                },
+                              },
+                              Object {
+                                "component": [Function],
+                                "eleType": "buttons",
+                                "mapTo": "mode",
+                                "name": "Mode",
+                                "props": Object {
+                                  "defaultSelections": Array [
+                                    Object {
+                                      "id": "group",
+                                      "name": "Group",
                                     },
+                                  ],
+                                  "options": Array [
                                     Object {
-                                      "editor": [Function],
-                                      "id": "color-theme",
-                                      "mapTo": "colorTheme",
-                                      "name": "Color Theme",
-                                      "schemas": Array [],
+                                      "id": "group",
+                                      "name": "Group",
+                                    },
+                                    Object {
+                                      "id": "stack",
+                                      "name": "Stack",
                                     },
                                   ],
                                 },
-                                Object {
-                                  "content": Array [],
-                                  "editor": [Function],
-                                  "id": "style-panel",
-                                  "mapTo": "layoutConfig",
-                                  "name": "Layout",
+                              },
+                              Object {
+                                "component": [Function],
+                                "eleType": "input",
+                                "mapTo": "labelSize",
+                                "name": "Label Size",
+                              },
+                              Object {
+                                "component": [Function],
+                                "defaultState": 0,
+                                "eleType": "slider",
+                                "mapTo": "rotateBarLabels",
+                                "name": "Rotate bar labels",
+                                "props": Object {
+                                  "max": 90,
+                                  "min": -90,
+                                  "showTicks": true,
+                                  "ticks": Array [
+                                    Object {
+                                      "label": "-90°",
+                                      "value": -90,
+                                    },
+                                    Object {
+                                      "label": "-45°",
+                                      "value": -45,
+                                    },
+                                    Object {
+                                      "label": "0°",
+                                      "value": 0,
+                                    },
+                                    Object {
+                                      "label": "45°",
+                                      "value": 45,
+                                    },
+                                    Object {
+                                      "label": "90°",
+                                      "value": 90,
+                                    },
+                                  ],
                                 },
-                                Object {
-                                  "editor": [Function],
-                                  "id": "availability-panel",
-                                  "mapTo": "availabilityConfig",
-                                  "name": "Availability",
+                              },
+                              Object {
+                                "component": [Function],
+                                "defaultState": 0.7,
+                                "eleType": "slider",
+                                "mapTo": "groupWidth",
+                                "name": "Group width",
+                                "props": Object {
+                                  "max": 1,
+                                  "step": 0.01,
                                 },
-                              ],
-                            }
-                          }
-                          fillOpacity={80}
-                          fullLabel="Bar"
-                          groupWidth={0.7}
-                          icon={[Function]}
-                          iconType="visBarVerticalStacked"
-                          id="bar"
-                          key="bar"
-                          labelAngle={0}
-                          legendPosition="v"
-                          lineWidth={1}
-                          mode="group"
-                          name="bar"
-                          option={
-                            Object {
-                              "barWidth": 0.97,
-                              "category": "Visualizations",
-                              "categoryAxis": "xaxis",
-                              "component": [Function],
-                              "editorConfig": Object {
-                                "panelTabs": Array [
-                                  Object {
-                                    "editor": [Function],
-                                    "id": "data-panel",
-                                    "mapTo": "dataConfig",
-                                    "name": "Data",
-                                    "sections": Array [
-                                      Object {
-                                        "editor": [Function],
-                                        "id": "value_options",
-                                        "mapTo": "valueOptions",
-                                        "name": "Value options",
-                                        "schemas": Array [
-                                          Object {
-                                            "component": null,
-                                            "isSingleSelection": false,
-                                            "mapTo": "xaxis",
-                                            "name": "X-axis",
-                                          },
-                                          Object {
-                                            "component": null,
-                                            "isSingleSelection": false,
-                                            "mapTo": "yaxis",
-                                            "name": "Y-axis",
-                                          },
-                                        ],
-                                      },
-                                      Object {
-                                        "editor": [Function],
-                                        "id": "legend",
-                                        "mapTo": "legend",
-                                        "name": "Legend",
-                                        "schemas": Array [
-                                          Object {
-                                            "component": null,
-                                            "mapTo": "showLegend",
-                                            "name": "Show Legend",
-                                            "props": Object {
-                                              "defaultSelections": Array [
-                                                Object {
-                                                  "id": "show",
-                                                  "name": "Show",
-                                                },
-                                              ],
-                                              "options": Array [
-                                                Object {
-                                                  "id": "show",
-                                                  "name": "Show",
-                                                },
-                                                Object {
-                                                  "id": "hidden",
-                                                  "name": "Hidden",
-                                                },
-                                              ],
-                                            },
-                                          },
-                                          Object {
-                                            "component": null,
-                                            "mapTo": "position",
-                                            "name": "Position",
-                                            "props": Object {
-                                              "defaultSelections": Array [
-                                                Object {
-                                                  "id": "v",
-                                                  "name": "Right",
-                                                },
-                                              ],
-                                              "options": Array [
-                                                Object {
-                                                  "id": "v",
-                                                  "name": "Right",
-                                                },
-                                                Object {
-                                                  "id": "h",
-                                                  "name": "Bottom",
-                                                },
-                                              ],
-                                            },
-                                          },
-                                        ],
-                                      },
-                                      Object {
-                                        "editor": [Function],
-                                        "id": "chart_styles",
-                                        "mapTo": "chartStyles",
-                                        "name": "Chart styles",
-                                        "schemas": Array [
-                                          Object {
-                                            "component": [Function],
-                                            "eleType": "buttons",
-                                            "mapTo": "orientation",
-                                            "name": "Orientation",
-                                            "props": Object {
-                                              "defaultSelections": Array [
-                                                Object {
-                                                  "id": "v",
-                                                  "name": "Vertical",
-                                                },
-                                              ],
-                                              "options": Array [
-                                                Object {
-                                                  "id": "v",
-                                                  "name": "Vertical",
-                                                },
-                                                Object {
-                                                  "id": "h",
-                                                  "name": "Horizontal",
-                                                },
-                                              ],
-                                            },
-                                          },
-                                          Object {
-                                            "component": [Function],
-                                            "eleType": "buttons",
-                                            "mapTo": "mode",
-                                            "name": "Mode",
-                                            "props": Object {
-                                              "defaultSelections": Array [
-                                                Object {
-                                                  "id": "group",
-                                                  "name": "Group",
-                                                },
-                                              ],
-                                              "options": Array [
-                                                Object {
-                                                  "id": "group",
-                                                  "name": "Group",
-                                                },
-                                                Object {
-                                                  "id": "stack",
-                                                  "name": "Stack",
-                                                },
-                                              ],
-                                            },
-                                          },
-                                          Object {
-                                            "component": [Function],
-                                            "defaultState": 0,
-                                            "eleType": "slider",
-                                            "mapTo": "rotateBarLabels",
-                                            "name": "Rotate bar labels",
-                                            "props": Object {
-                                              "max": 90,
-                                              "min": -90,
-                                              "showTicks": true,
-                                              "ticks": Array [
-                                                Object {
-                                                  "label": "-90°",
-                                                  "value": -90,
-                                                },
-                                                Object {
-                                                  "label": "-45°",
-                                                  "value": -45,
-                                                },
-                                                Object {
-                                                  "label": "0°",
-                                                  "value": 0,
-                                                },
-                                                Object {
-                                                  "label": "45°",
-                                                  "value": 45,
-                                                },
-                                                Object {
-                                                  "label": "90°",
-                                                  "value": 90,
-                                                },
-                                              ],
-                                            },
-                                          },
-                                          Object {
-                                            "component": [Function],
-                                            "defaultState": 0.7,
-                                            "eleType": "slider",
-                                            "mapTo": "groupWidth",
-                                            "name": "Group width",
-                                            "props": Object {
-                                              "max": 1,
-                                              "step": 0.01,
-                                            },
-                                          },
-                                          Object {
-                                            "component": [Function],
-                                            "defaultState": 0.97,
-                                            "eleType": "slider",
-                                            "mapTo": "barWidth",
-                                            "name": "Bar width",
-                                            "props": Object {
-                                              "max": 1,
-                                              "step": 0.01,
-                                            },
-                                          },
-                                          Object {
-                                            "component": [Function],
-                                            "defaultState": 1,
-                                            "eleType": "slider",
-                                            "mapTo": "lineWidth",
-                                            "name": "Line width",
-                                            "props": Object {
-                                              "max": 10,
-                                            },
-                                          },
-                                          Object {
-                                            "component": [Function],
-                                            "defaultState": 80,
-                                            "eleType": "slider",
-                                            "mapTo": "fillOpacity",
-                                            "name": "Fill Opacity",
-                                            "props": Object {
-                                              "max": 100,
-                                            },
-                                          },
-                                        ],
-                                      },
-                                      Object {
-                                        "editor": [Function],
-                                        "id": "color-theme",
-                                        "mapTo": "colorTheme",
-                                        "name": "Color Theme",
-                                        "schemas": Array [],
-                                      },
-                                    ],
-                                  },
-                                  Object {
-                                    "content": Array [],
-                                    "editor": [Function],
-                                    "id": "style-panel",
-                                    "mapTo": "layoutConfig",
-                                    "name": "Layout",
-                                  },
-                                  Object {
-                                    "editor": [Function],
-                                    "id": "availability-panel",
-                                    "mapTo": "availabilityConfig",
-                                    "name": "Availability",
-                                  },
-                                ],
-                              },
-                              "fillOpacity": 80,
-                              "fullLabel": "Bar",
-                              "groupWidth": 0.7,
-                              "icon": [Function],
-                              "iconType": "visBarVerticalStacked",
-                              "id": "bar",
-                              "label": "Bar",
-                              "labelAngle": 0,
-                              "legendPosition": "v",
-                              "lineWidth": 1,
-                              "mode": "group",
-                              "name": "bar",
-                              "orientation": "v",
-                              "selection": Object {
-                                "dataLoss": "nothing",
                               },
-                              "seriesAxis": "yaxis",
-                              "showLegend": "show",
-                              "type": "bar",
-                              "visConfig": Object {
-                                "config": Object {
-                                  "displaylogo": false,
-                                  "responsive": true,
-                                },
-                                "isUniColor": false,
-                                "layout": Object {
-                                  "height": 500,
-                                  "legend": Object {
-                                    "orientation": "v",
-                                    "traceorder": "normal",
-                                  },
-                                  "margin": Object {
-                                    "b": 30,
-                                    "l": 60,
-                                    "pad": 0,
-                                    "r": 30,
-                                    "t": 50,
-                                  },
-                                  "showlegend": true,
+                              Object {
+                                "component": [Function],
+                                "defaultState": 0.97,
+                                "eleType": "slider",
+                                "mapTo": "barWidth",
+                                "name": "Bar width",
+                                "props": Object {
+                                  "max": 1,
+                                  "step": 0.01,
                                 },
                               },
-                            }
-                          }
-                          orientation="v"
-                          selection={
-                            Object {
-                              "dataLoss": "nothing",
-                            }
-                          }
-                          seriesAxis="yaxis"
-                          showLegend="show"
-                          type="bar"
-                          visConfig={
-                            Object {
-                              "config": Object {
-                                "displaylogo": false,
-                                "responsive": true,
-                              },
-                              "isUniColor": false,
-                              "layout": Object {
-                                "height": 500,
-                                "legend": Object {
-                                  "orientation": "v",
-                                  "traceorder": "normal",
-                                },
-                                "margin": Object {
-                                  "b": 30,
-                                  "l": 60,
-                                  "pad": 0,
-                                  "r": 30,
-                                  "t": 50,
+                              Object {
+                                "component": [Function],
+                                "defaultState": 1,
+                                "eleType": "slider",
+                                "mapTo": "lineWidth",
+                                "name": "Line width",
+                                "props": Object {
+                                  "max": 10,
                                 },
-                                "showlegend": true,
                               },
-                            }
-                          }
-                        >
-                          <EuiBadge
-                            barWidth={0.97}
-                            category="Visualizations"
-                            categoryAxis="xaxis"
-                            className="euiComboBoxPill"
-                            color="hollow"
-                            component={[Function]}
-                            editorConfig={
                               Object {
-                                "panelTabs": Array [
-                                  Object {
-                                    "editor": [Function],
-                                    "id": "data-panel",
-                                    "mapTo": "dataConfig",
-                                    "name": "Data",
-                                    "sections": Array [
-                                      Object {
-                                        "editor": [Function],
-                                        "id": "value_options",
-                                        "mapTo": "valueOptions",
-                                        "name": "Value options",
-                                        "schemas": Array [
-                                          Object {
-                                            "component": null,
-                                            "isSingleSelection": false,
-                                            "mapTo": "xaxis",
-                                            "name": "X-axis",
-                                          },
-                                          Object {
-                                            "component": null,
-                                            "isSingleSelection": false,
-                                            "mapTo": "yaxis",
-                                            "name": "Y-axis",
-                                          },
-                                        ],
-                                      },
-                                      Object {
-                                        "editor": [Function],
-                                        "id": "legend",
-                                        "mapTo": "legend",
-                                        "name": "Legend",
-                                        "schemas": Array [
-                                          Object {
-                                            "component": null,
-                                            "mapTo": "showLegend",
-                                            "name": "Show Legend",
-                                            "props": Object {
-                                              "defaultSelections": Array [
-                                                Object {
-                                                  "id": "show",
-                                                  "name": "Show",
-                                                },
-                                              ],
-                                              "options": Array [
-                                                Object {
-                                                  "id": "show",
-                                                  "name": "Show",
-                                                },
-                                                Object {
-                                                  "id": "hidden",
-                                                  "name": "Hidden",
-                                                },
-                                              ],
-                                            },
-                                          },
-                                          Object {
-                                            "component": null,
-                                            "mapTo": "position",
-                                            "name": "Position",
-                                            "props": Object {
-                                              "defaultSelections": Array [
-                                                Object {
-                                                  "id": "v",
-                                                  "name": "Right",
-                                                },
-                                              ],
-                                              "options": Array [
-                                                Object {
-                                                  "id": "v",
-                                                  "name": "Right",
-                                                },
-                                                Object {
-                                                  "id": "h",
-                                                  "name": "Bottom",
-                                                },
-                                              ],
-                                            },
-                                          },
-                                        ],
-                                      },
-                                      Object {
-                                        "editor": [Function],
-                                        "id": "chart_styles",
-                                        "mapTo": "chartStyles",
-                                        "name": "Chart styles",
-                                        "schemas": Array [
-                                          Object {
-                                            "component": [Function],
-                                            "eleType": "buttons",
-                                            "mapTo": "orientation",
-                                            "name": "Orientation",
-                                            "props": Object {
-                                              "defaultSelections": Array [
-                                                Object {
-                                                  "id": "v",
-                                                  "name": "Vertical",
-                                                },
-                                              ],
-                                              "options": Array [
-                                                Object {
-                                                  "id": "v",
-                                                  "name": "Vertical",
-                                                },
-                                                Object {
-                                                  "id": "h",
-                                                  "name": "Horizontal",
-                                                },
-                                              ],
-                                            },
-                                          },
-                                          Object {
-                                            "component": [Function],
-                                            "eleType": "buttons",
-                                            "mapTo": "mode",
-                                            "name": "Mode",
-                                            "props": Object {
-                                              "defaultSelections": Array [
-                                                Object {
-                                                  "id": "group",
-                                                  "name": "Group",
-                                                },
-                                              ],
-                                              "options": Array [
-                                                Object {
-                                                  "id": "group",
-                                                  "name": "Group",
-                                                },
-                                                Object {
-                                                  "id": "stack",
-                                                  "name": "Stack",
-                                                },
-                                              ],
-                                            },
-                                          },
-                                          Object {
-                                            "component": [Function],
-                                            "defaultState": 0,
-                                            "eleType": "slider",
-                                            "mapTo": "rotateBarLabels",
-                                            "name": "Rotate bar labels",
-                                            "props": Object {
-                                              "max": 90,
-                                              "min": -90,
-                                              "showTicks": true,
-                                              "ticks": Array [
-                                                Object {
-                                                  "label": "-90°",
-                                                  "value": -90,
-                                                },
-                                                Object {
-                                                  "label": "-45°",
-                                                  "value": -45,
-                                                },
-                                                Object {
-                                                  "label": "0°",
-                                                  "value": 0,
-                                                },
-                                                Object {
-                                                  "label": "45°",
-                                                  "value": 45,
-                                                },
-                                                Object {
-                                                  "label": "90°",
-                                                  "value": 90,
-                                                },
-                                              ],
-                                            },
-                                          },
-                                          Object {
-                                            "component": [Function],
-                                            "defaultState": 0.7,
-                                            "eleType": "slider",
-                                            "mapTo": "groupWidth",
-                                            "name": "Group width",
-                                            "props": Object {
-                                              "max": 1,
-                                              "step": 0.01,
-                                            },
-                                          },
-                                          Object {
-                                            "component": [Function],
-                                            "defaultState": 0.97,
-                                            "eleType": "slider",
-                                            "mapTo": "barWidth",
-                                            "name": "Bar width",
-                                            "props": Object {
-                                              "max": 1,
-                                              "step": 0.01,
-                                            },
-                                          },
-                                          Object {
-                                            "component": [Function],
-                                            "defaultState": 1,
-                                            "eleType": "slider",
-                                            "mapTo": "lineWidth",
-                                            "name": "Line width",
-                                            "props": Object {
-                                              "max": 10,
-                                            },
-                                          },
-                                          Object {
-                                            "component": [Function],
-                                            "defaultState": 80,
-                                            "eleType": "slider",
-                                            "mapTo": "fillOpacity",
-                                            "name": "Fill Opacity",
-                                            "props": Object {
-                                              "max": 100,
-                                            },
-                                          },
-                                        ],
-                                      },
-                                      Object {
-                                        "editor": [Function],
-                                        "id": "color-theme",
-                                        "mapTo": "colorTheme",
-                                        "name": "Color Theme",
-                                        "schemas": Array [],
-                                      },
-                                    ],
-                                  },
-                                  Object {
-                                    "content": Array [],
-                                    "editor": [Function],
-                                    "id": "style-panel",
-                                    "mapTo": "layoutConfig",
-                                    "name": "Layout",
-                                  },
-                                  Object {
-                                    "editor": [Function],
-                                    "id": "availability-panel",
-                                    "mapTo": "availabilityConfig",
-                                    "name": "Availability",
-                                  },
-                                ],
-                              }
-                            }
-                            fillOpacity={80}
-                            fullLabel="Bar"
-                            groupWidth={0.7}
-                            icon={[Function]}
-                            iconType="visBarVerticalStacked"
-                            id="bar"
-                            labelAngle={0}
-                            legendPosition="v"
-                            lineWidth={1}
-                            mode="group"
-                            name="bar"
-                            orientation="v"
-                            selection={
-                              Object {
-                                "dataLoss": "nothing",
-                              }
-                            }
-                            seriesAxis="yaxis"
-                            showLegend="show"
-                            title="Bar"
-                            type="bar"
-                            visConfig={
-                              Object {
-                                "config": Object {
-                                  "displaylogo": false,
-                                  "responsive": true,
-                                },
-                                "isUniColor": false,
-                                "layout": Object {
-                                  "height": 500,
-                                  "legend": Object {
-                                    "orientation": "v",
-                                    "traceorder": "normal",
-                                  },
-                                  "margin": Object {
-                                    "b": 30,
-                                    "l": 60,
-                                    "pad": 0,
-                                    "r": 30,
-                                    "t": 50,
-                                  },
-                                  "showlegend": true,
+                                "component": [Function],
+                                "defaultState": 80,
+                                "eleType": "slider",
+                                "mapTo": "fillOpacity",
+                                "name": "Fill Opacity",
+                                "props": Object {
+                                  "max": 100,
                                 },
-                              }
-                            }
-                          >
-                            <EuiInnerText>
-                              <span
-                                barWidth={0.97}
-                                category="Visualizations"
-                                categoryAxis="xaxis"
-                                className="euiBadge euiBadge--hollow euiBadge--iconLeft euiComboBoxPill"
-                                component={[Function]}
-                                editorConfig={
-                                  Object {
-                                    "panelTabs": Array [
-                                      Object {
-                                        "editor": [Function],
-                                        "id": "data-panel",
-                                        "mapTo": "dataConfig",
-                                        "name": "Data",
-                                        "sections": Array [
-                                          Object {
-                                            "editor": [Function],
-                                            "id": "value_options",
-                                            "mapTo": "valueOptions",
-                                            "name": "Value options",
-                                            "schemas": Array [
-                                              Object {
-                                                "component": null,
-                                                "isSingleSelection": false,
-                                                "mapTo": "xaxis",
-                                                "name": "X-axis",
-                                              },
-                                              Object {
-                                                "component": null,
-                                                "isSingleSelection": false,
-                                                "mapTo": "yaxis",
-                                                "name": "Y-axis",
-                                              },
-                                            ],
-                                          },
-                                          Object {
-                                            "editor": [Function],
-                                            "id": "legend",
-                                            "mapTo": "legend",
-                                            "name": "Legend",
-                                            "schemas": Array [
-                                              Object {
-                                                "component": null,
-                                                "mapTo": "showLegend",
-                                                "name": "Show Legend",
-                                                "props": Object {
-                                                  "defaultSelections": Array [
-                                                    Object {
-                                                      "id": "show",
-                                                      "name": "Show",
-                                                    },
-                                                  ],
-                                                  "options": Array [
-                                                    Object {
-                                                      "id": "show",
-                                                      "name": "Show",
-                                                    },
-                                                    Object {
-                                                      "id": "hidden",
-                                                      "name": "Hidden",
-                                                    },
-                                                  ],
-                                                },
-                                              },
-                                              Object {
-                                                "component": null,
-                                                "mapTo": "position",
-                                                "name": "Position",
-                                                "props": Object {
-                                                  "defaultSelections": Array [
-                                                    Object {
-                                                      "id": "v",
-                                                      "name": "Right",
-                                                    },
-                                                  ],
-                                                  "options": Array [
-                                                    Object {
-                                                      "id": "v",
-                                                      "name": "Right",
-                                                    },
-                                                    Object {
-                                                      "id": "h",
-                                                      "name": "Bottom",
-                                                    },
-                                                  ],
-                                                },
-                                              },
-                                            ],
-                                          },
-                                          Object {
-                                            "editor": [Function],
-                                            "id": "chart_styles",
-                                            "mapTo": "chartStyles",
-                                            "name": "Chart styles",
-                                            "schemas": Array [
-                                              Object {
-                                                "component": [Function],
-                                                "eleType": "buttons",
-                                                "mapTo": "orientation",
-                                                "name": "Orientation",
-                                                "props": Object {
-                                                  "defaultSelections": Array [
-                                                    Object {
-                                                      "id": "v",
-                                                      "name": "Vertical",
-                                                    },
-                                                  ],
-                                                  "options": Array [
-                                                    Object {
-                                                      "id": "v",
-                                                      "name": "Vertical",
-                                                    },
-                                                    Object {
-                                                      "id": "h",
-                                                      "name": "Horizontal",
-                                                    },
-                                                  ],
-                                                },
-                                              },
-                                              Object {
-                                                "component": [Function],
-                                                "eleType": "buttons",
-                                                "mapTo": "mode",
-                                                "name": "Mode",
-                                                "props": Object {
-                                                  "defaultSelections": Array [
-                                                    Object {
-                                                      "id": "group",
-                                                      "name": "Group",
-                                                    },
-                                                  ],
-                                                  "options": Array [
-                                                    Object {
-                                                      "id": "group",
-                                                      "name": "Group",
-                                                    },
-                                                    Object {
-                                                      "id": "stack",
-                                                      "name": "Stack",
-                                                    },
-                                                  ],
-                                                },
-                                              },
-                                              Object {
-                                                "component": [Function],
-                                                "defaultState": 0,
-                                                "eleType": "slider",
-                                                "mapTo": "rotateBarLabels",
-                                                "name": "Rotate bar labels",
-                                                "props": Object {
-                                                  "max": 90,
-                                                  "min": -90,
-                                                  "showTicks": true,
-                                                  "ticks": Array [
-                                                    Object {
-                                                      "label": "-90°",
-                                                      "value": -90,
-                                                    },
-                                                    Object {
-                                                      "label": "-45°",
-                                                      "value": -45,
-                                                    },
-                                                    Object {
-                                                      "label": "0°",
-                                                      "value": 0,
-                                                    },
-                                                    Object {
-                                                      "label": "45°",
-                                                      "value": 45,
-                                                    },
-                                                    Object {
-                                                      "label": "90°",
-                                                      "value": 90,
-                                                    },
-                                                  ],
-                                                },
-                                              },
-                                              Object {
-                                                "component": [Function],
-                                                "defaultState": 0.7,
-                                                "eleType": "slider",
-                                                "mapTo": "groupWidth",
-                                                "name": "Group width",
-                                                "props": Object {
-                                                  "max": 1,
-                                                  "step": 0.01,
-                                                },
-                                              },
-                                              Object {
-                                                "component": [Function],
-                                                "defaultState": 0.97,
-                                                "eleType": "slider",
-                                                "mapTo": "barWidth",
-                                                "name": "Bar width",
-                                                "props": Object {
-                                                  "max": 1,
-                                                  "step": 0.01,
-                                                },
-                                              },
-                                              Object {
-                                                "component": [Function],
-                                                "defaultState": 1,
-                                                "eleType": "slider",
-                                                "mapTo": "lineWidth",
-                                                "name": "Line width",
-                                                "props": Object {
-                                                  "max": 10,
-                                                },
-                                              },
-                                              Object {
-                                                "component": [Function],
-                                                "defaultState": 80,
-                                                "eleType": "slider",
-                                                "mapTo": "fillOpacity",
-                                                "name": "Fill Opacity",
-                                                "props": Object {
-                                                  "max": 100,
-                                                },
-                                              },
-                                            ],
-                                          },
-                                          Object {
-                                            "editor": [Function],
-                                            "id": "color-theme",
-                                            "mapTo": "colorTheme",
-                                            "name": "Color Theme",
-                                            "schemas": Array [],
-                                          },
-                                        ],
-                                      },
-                                      Object {
-                                        "content": Array [],
-                                        "editor": [Function],
-                                        "id": "style-panel",
-                                        "mapTo": "layoutConfig",
-                                        "name": "Layout",
-                                      },
-                                      Object {
-                                        "editor": [Function],
-                                        "id": "availability-panel",
-                                        "mapTo": "availabilityConfig",
-                                        "name": "Availability",
-                                      },
-                                    ],
-                                  }
-                                }
-                                fillOpacity={80}
-                                fullLabel="Bar"
-                                groupWidth={0.7}
-                                icon={[Function]}
-                                id="bar"
-                                labelAngle={0}
-                                legendPosition="v"
-                                lineWidth={1}
-                                mode="group"
-                                name="bar"
-                                orientation="v"
-                                selection={
-                                  Object {
-                                    "dataLoss": "nothing",
-                                  }
-                                }
-                                seriesAxis="yaxis"
-                                showLegend="show"
-                                title="Bar"
-                                type="bar"
-                                visConfig={
-                                  Object {
-                                    "config": Object {
-                                      "displaylogo": false,
-                                      "responsive": true,
-                                    },
-                                    "isUniColor": false,
-                                    "layout": Object {
-                                      "height": 500,
-                                      "legend": Object {
-                                        "orientation": "v",
-                                        "traceorder": "normal",
-                                      },
-                                      "margin": Object {
-                                        "b": 30,
-                                        "l": 60,
-                                        "pad": 0,
-                                        "r": 30,
-                                        "t": 50,
-                                      },
-                                      "showlegend": true,
-                                    },
-                                  }
-                                }
-                              >
-                                <span
-                                  className="euiBadge__content"
-                                >
-                                  <span
-                                    className="euiBadge__text"
-                                  >
-                                    Bar
-                                  </span>
-                                  <EuiIcon
-                                    className="euiBadge__icon"
-                                    color="inherit"
-                                    size="s"
-                                    type="visBarVerticalStacked"
-                                  >
-                                    <EuiIconEmpty
-                                      aria-hidden={true}
-                                      className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiBadge__icon"
-                                      focusable="false"
-                                      role="img"
-                                      style={null}
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiBadge__icon"
-                                        focusable="false"
-                                        height={16}
-                                        role="img"
-                                        style={null}
-                                        viewBox="0 0 16 16"
-                                        width={16}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      />
-                                    </EuiIconEmpty>
-                                  </EuiIcon>
-                                </span>
-                              </span>
-                            </EuiInnerText>
-                          </EuiBadge>
-                        </EuiComboBoxPill>
-                        <AutosizeInput
-                          aria-controls=""
-                          className="euiComboBox__input"
-                          data-test-subj="comboBoxSearchInput"
-                          injectStyles={true}
-                          inputRef={[Function]}
-                          minWidth={1}
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          role="textbox"
-                          style={
-                            Object {
-                              "fontSize": 14,
-                            }
-                          }
-                          value=""
-                        >
-                          <div
-                            className="euiComboBox__input"
-                            style={
-                              Object {
-                                "display": "inline-block",
-                                "fontSize": 14,
-                              }
-                            }
-                          >
-                            <input
-                              aria-controls=""
-                              data-test-subj="comboBoxSearchInput"
-                              onBlur={[Function]}
-                              onChange={[Function]}
-                              onFocus={[Function]}
-                              role="textbox"
-                              style={
-                                Object {
-                                  "boxSizing": "content-box",
-                                  "width": "2px",
-                                }
-                              }
-                              value=""
-                            />
-                            <div
-                              style={
-                                Object {
-                                  "height": 0,
-                                  "left": 0,
-                                  "overflow": "scroll",
-                                  "position": "absolute",
-                                  "top": 0,
-                                  "visibility": "hidden",
-                                  "whiteSpace": "pre",
-                                }
-                              }
-                            />
-                          </div>
-                        </AutosizeInput>
-                      </div>
-                      <EuiFormControlLayoutIcons
-                        clear={
-                          Object {
-                            "data-test-subj": "comboBoxClearButton",
-                            "onClick": [Function],
-                          }
-                        }
-                        compressed={false}
-                        icon={
-                          Object {
-                            "aria-label": "Open list of options",
-                            "data-test-subj": "comboBoxToggleListButton",
-                            "disabled": undefined,
-                            "onClick": [Function],
-                            "ref": [Function],
-                            "side": "right",
-                            "type": "arrowDown",
-                          }
-                        }
-                      >
-                        <div
-                          className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                        >
-                          <EuiFormControlLayoutClearButton
-                            data-test-subj="comboBoxClearButton"
-                            onClick={[Function]}
-                            size="m"
-                          >
-                            <EuiI18n
-                              default="Clear input"
-                              token="euiFormControlLayoutClearButton.label"
-                            >
-                              <button
-                                aria-label="Clear input"
-                                className="euiFormControlLayoutClearButton"
-                                data-test-subj="comboBoxClearButton"
-                                onClick={[Function]}
-                                type="button"
-                              >
-                                <EuiIcon
-                                  className="euiFormControlLayoutClearButton__icon"
-                                  type="cross"
-                                >
-                                  <EuiIconEmpty
-                                    aria-hidden={true}
-                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutClearButton__icon"
-                                    focusable="false"
-                                    role="img"
-                                    style={null}
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutClearButton__icon"
-                                      focusable="false"
-                                      height={16}
-                                      role="img"
-                                      style={null}
-                                      viewBox="0 0 16 16"
-                                      width={16}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    />
-                                  </EuiIconEmpty>
-                                </EuiIcon>
-                              </button>
-                            </EuiI18n>
-                          </EuiFormControlLayoutClearButton>
-                          <EuiFormControlLayoutCustomIcon
-                            aria-label="Open list of options"
-                            data-test-subj="comboBoxToggleListButton"
-                            iconRef={[Function]}
-                            onClick={[Function]}
-                            size="m"
-                            type="arrowDown"
-                          >
-                            <button
-                              aria-label="Open list of options"
-                              className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
-                              data-test-subj="comboBoxToggleListButton"
-                              onClick={[Function]}
-                              type="button"
-                            >
-                              <EuiIcon
-                                aria-hidden="true"
-                                className="euiFormControlLayoutCustomIcon__icon"
-                                size="m"
-                                type="arrowDown"
-                              >
-                                <EuiIconEmpty
-                                  aria-hidden={true}
-                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                  focusable="false"
-                                  role="img"
-                                  style={null}
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                    focusable="false"
-                                    height={16}
-                                    role="img"
-                                    style={null}
-                                    viewBox="0 0 16 16"
-                                    width={16}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  />
-                                </EuiIconEmpty>
-                              </EuiIcon>
-                            </button>
-                          </EuiFormControlLayoutCustomIcon>
-                        </div>
-                      </EuiFormControlLayoutIcons>
-                    </div>
-                  </div>
-                </EuiFormControlLayout>
-              </EuiComboBoxInput>
-            </div>
-          </EuiComboBox>
-          <EuiSpacer
-            size="xs"
-          >
-            <div
-              className="euiSpacer euiSpacer--xs"
-            />
-          </EuiSpacer>
-        </div>
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <div
-          className="euiFlexItem"
-        >
-          <EuiPanel
-            paddingSize="s"
-          >
-            <div
-              className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
-            >
-              <EuiTabbedContent
-                autoFocus="initial"
-                className="vis-config-tabs"
-                onTabClick={[Function]}
-                selectedTab={
-                  Object {
-                    "content": <VizDataPanel
-                      curVisId="bar"
-                      onConfigChange={[Function]}
-                      tabProps={
-                        Object {
-                          "editor": [Function],
-                          "id": "data-panel",
-                          "mapTo": "dataConfig",
-                          "name": "Data",
-                          "sections": Array [
-                            Object {
-                              "editor": [Function],
-                              "id": "value_options",
-                              "mapTo": "valueOptions",
-                              "name": "Value options",
-                              "schemas": Array [
-                                Object {
-                                  "component": null,
-                                  "isSingleSelection": false,
-                                  "mapTo": "xaxis",
-                                  "name": "X-axis",
-                                },
-                                Object {
-                                  "component": null,
-                                  "isSingleSelection": false,
-                                  "mapTo": "yaxis",
-                                  "name": "Y-axis",
-                                },
-                              ],
-                            },
-                            Object {
-                              "editor": [Function],
-                              "id": "legend",
-                              "mapTo": "legend",
-                              "name": "Legend",
-                              "schemas": Array [
-                                Object {
-                                  "component": null,
-                                  "mapTo": "showLegend",
-                                  "name": "Show Legend",
-                                  "props": Object {
-                                    "defaultSelections": Array [
-                                      Object {
-                                        "id": "show",
-                                        "name": "Show",
-                                      },
-                                    ],
-                                    "options": Array [
-                                      Object {
-                                        "id": "show",
-                                        "name": "Show",
-                                      },
-                                      Object {
-                                        "id": "hidden",
-                                        "name": "Hidden",
-                                      },
-                                    ],
-                                  },
-                                },
-                                Object {
-                                  "component": null,
-                                  "mapTo": "position",
-                                  "name": "Position",
-                                  "props": Object {
-                                    "defaultSelections": Array [
-                                      Object {
-                                        "id": "v",
-                                        "name": "Right",
-                                      },
-                                    ],
-                                    "options": Array [
-                                      Object {
-                                        "id": "v",
-                                        "name": "Right",
-                                      },
-                                      Object {
-                                        "id": "h",
-                                        "name": "Bottom",
-                                      },
-                                    ],
-                                  },
-                                },
-                              ],
-                            },
-                            Object {
-                              "editor": [Function],
-                              "id": "chart_styles",
-                              "mapTo": "chartStyles",
-                              "name": "Chart styles",
-                              "schemas": Array [
-                                Object {
-                                  "component": [Function],
-                                  "eleType": "buttons",
-                                  "mapTo": "orientation",
-                                  "name": "Orientation",
-                                  "props": Object {
-                                    "defaultSelections": Array [
-                                      Object {
-                                        "id": "v",
-                                        "name": "Vertical",
-                                      },
-                                    ],
-                                    "options": Array [
-                                      Object {
-                                        "id": "v",
-                                        "name": "Vertical",
-                                      },
-                                      Object {
-                                        "id": "h",
-                                        "name": "Horizontal",
-                                      },
-                                    ],
-                                  },
-                                },
-                                Object {
-                                  "component": [Function],
-                                  "eleType": "buttons",
-                                  "mapTo": "mode",
-                                  "name": "Mode",
-                                  "props": Object {
-                                    "defaultSelections": Array [
-                                      Object {
-                                        "id": "group",
-                                        "name": "Group",
-                                      },
-                                    ],
-                                    "options": Array [
-                                      Object {
-                                        "id": "group",
-                                        "name": "Group",
-                                      },
-                                      Object {
-                                        "id": "stack",
-                                        "name": "Stack",
-                                      },
-                                    ],
-                                  },
-                                },
-                                Object {
-                                  "component": [Function],
-                                  "defaultState": 0,
-                                  "eleType": "slider",
-                                  "mapTo": "rotateBarLabels",
-                                  "name": "Rotate bar labels",
-                                  "props": Object {
-                                    "max": 90,
-                                    "min": -90,
-                                    "showTicks": true,
-                                    "ticks": Array [
-                                      Object {
-                                        "label": "-90°",
-                                        "value": -90,
-                                      },
-                                      Object {
-                                        "label": "-45°",
-                                        "value": -45,
-                                      },
-                                      Object {
-                                        "label": "0°",
-                                        "value": 0,
-                                      },
-                                      Object {
-                                        "label": "45°",
-                                        "value": 45,
-                                      },
-                                      Object {
-                                        "label": "90°",
-                                        "value": 90,
-                                      },
-                                    ],
-                                  },
-                                },
-                                Object {
-                                  "component": [Function],
-                                  "defaultState": 0.7,
-                                  "eleType": "slider",
-                                  "mapTo": "groupWidth",
-                                  "name": "Group width",
-                                  "props": Object {
-                                    "max": 1,
-                                    "step": 0.01,
-                                  },
-                                },
-                                Object {
-                                  "component": [Function],
-                                  "defaultState": 0.97,
-                                  "eleType": "slider",
-                                  "mapTo": "barWidth",
-                                  "name": "Bar width",
-                                  "props": Object {
-                                    "max": 1,
-                                    "step": 0.01,
-                                  },
-                                },
-                                Object {
-                                  "component": [Function],
-                                  "defaultState": 1,
-                                  "eleType": "slider",
-                                  "mapTo": "lineWidth",
-                                  "name": "Line width",
-                                  "props": Object {
-                                    "max": 10,
-                                  },
-                                },
-                                Object {
-                                  "component": [Function],
-                                  "defaultState": 80,
-                                  "eleType": "slider",
-                                  "mapTo": "fillOpacity",
-                                  "name": "Fill Opacity",
-                                  "props": Object {
-                                    "max": 100,
-                                  },
-                                },
-                              ],
-                            },
-                            Object {
-                              "editor": [Function],
-                              "id": "color-theme",
-                              "mapTo": "colorTheme",
-                              "name": "Color Theme",
-                              "schemas": Array [],
-                            },
-                          ],
-                        }
-                      }
-                      visualizations={
-                        Object {
-                          "data": Object {
-                            "appData": Object {
-                              "fromApp": false,
-                            },
-                            "defaultAxes": Object {},
-                            "indexFields": Object {
-                              "availableFields": Array [
-                                Object {
-                                  "name": "agent",
-                                  "type": "string",
-                                },
-                                Object {
-                                  "name": "bytes",
-                                  "type": "long",
-                                },
-                                Object {
-                                  "name": "clientip",
-                                  "type": "ip",
-                                },
-                                Object {
-                                  "name": "event",
-                                  "type": "struct",
-                                },
-                                Object {
-                                  "name": "extension",
-                                  "type": "string",
-                                },
-                                Object {
-                                  "name": "geo",
-                                  "type": "struct",
-                                },
-                                Object {
-                                  "name": "host",
-                                  "type": "string",
-                                },
-                                Object {
-                                  "name": "index",
-                                  "type": "string",
-                                },
-                                Object {
-                                  "name": "ip",
-                                  "type": "ip",
-                                },
-                                Object {
-                                  "name": "machine",
-                                  "type": "struct",
-                                },
-                                Object {
-                                  "name": "memory",
-                                  "type": "double",
-                                },
-                                Object {
-                                  "name": "message",
-                                  "type": "string",
-                                },
-                                Object {
-                                  "name": "phpmemory",
-                                  "type": "long",
-                                },
-                                Object {
-                                  "name": "referer",
-                                  "type": "string",
-                                },
-                                Object {
-                                  "name": "request",
-                                  "type": "string",
-                                },
-                                Object {
-                                  "name": "response",
-                                  "type": "string",
-                                },
-                                Object {
-                                  "name": "tags",
-                                  "type": "string",
-                                },
-                                Object {
-                                  "name": "timestamp",
-                                  "type": "timestamp",
-                                },
-                                Object {
-                                  "name": "url",
-                                  "type": "string",
-                                },
-                                Object {
-                                  "name": "utc_time",
-                                  "type": "timestamp",
-                                },
-                              ],
-                              "queriedFields": Array [
-                                Object {
-                                  "name": "double_per_ip_bytes",
-                                  "type": "long",
-                                },
-                                Object {
-                                  "name": "host",
-                                  "type": "text",
-                                },
-                                Object {
-                                  "name": "ip_count",
-                                  "type": "integer",
-                                },
-                                Object {
-                                  "name": "per_ip_bytes",
-                                  "type": "long",
-                                },
-                                Object {
-                                  "name": "resp_code",
-                                  "type": "text",
-                                },
-                                Object {
-                                  "name": "sum_bytes",
-                                  "type": "long",
-                                },
-                              ],
-                              "selectedFields": Array [],
-                              "unselectedFields": Array [],
-                            },
-                            "query": Object {},
-                            "rawVizData": Object {
-                              "data": Object {
-                                "count()": Array [
-                                  154,
-                                  1753,
-                                  116,
-                                  468,
-                                  1964,
-                                  219,
-                                ],
-                                "tags": Array [
-                                  "error",
-                                  "info",
-                                  "login",
-                                  "security",
-                                  "success",
-                                  "warning",
-                                ],
-                              },
-                              "jsonData": Array [
-                                Object {
-                                  "count()": 154,
-                                  "tags": "error",
-                                },
-                                Object {
-                                  "count()": 1753,
-                                  "tags": "info",
-                                },
-                                Object {
-                                  "count()": 116,
-                                  "tags": "login",
-                                },
-                                Object {
-                                  "count()": 468,
-                                  "tags": "security",
-                                },
-                                Object {
-                                  "count()": 1964,
-                                  "tags": "success",
-                                },
-                                Object {
-                                  "count()": 219,
-                                  "tags": "warning",
-                                },
-                              ],
-                              "metadata": Object {
-                                "fields": Array [
-                                  Object {
-                                    "name": "count()",
-                                    "type": "integer",
-                                  },
-                                  Object {
-                                    "name": "tags",
-                                    "type": "text",
-                                  },
-                                ],
-                                "size": 6,
-                                "status": 200,
-                              },
-                            },
-                            "userConfigs": Object {},
-                          },
-                          "vis": Object {
-                            "barWidth": 0.97,
-                            "category": "Visualizations",
-                            "categoryAxis": "xaxis",
-                            "component": [Function],
-                            "editorConfig": Object {
-                              "panelTabs": Array [
-                                Object {
-                                  "editor": [Function],
-                                  "id": "data-panel",
-                                  "mapTo": "dataConfig",
-                                  "name": "Data",
-                                  "sections": Array [
-                                    Object {
-                                      "editor": [Function],
-                                      "id": "value_options",
-                                      "mapTo": "valueOptions",
-                                      "name": "Value options",
-                                      "schemas": Array [
-                                        Object {
-                                          "component": null,
-                                          "isSingleSelection": false,
-                                          "mapTo": "xaxis",
-                                          "name": "X-axis",
-                                        },
-                                        Object {
-                                          "component": null,
-                                          "isSingleSelection": false,
-                                          "mapTo": "yaxis",
-                                          "name": "Y-axis",
-                                        },
-                                      ],
-                                    },
-                                    Object {
-                                      "editor": [Function],
-                                      "id": "legend",
-                                      "mapTo": "legend",
-                                      "name": "Legend",
-                                      "schemas": Array [
-                                        Object {
-                                          "component": null,
-                                          "mapTo": "showLegend",
-                                          "name": "Show Legend",
-                                          "props": Object {
-                                            "defaultSelections": Array [
-                                              Object {
-                                                "id": "show",
-                                                "name": "Show",
-                                              },
-                                            ],
-                                            "options": Array [
-                                              Object {
-                                                "id": "show",
-                                                "name": "Show",
-                                              },
-                                              Object {
-                                                "id": "hidden",
-                                                "name": "Hidden",
-                                              },
-                                            ],
-                                          },
-                                        },
-                                        Object {
-                                          "component": null,
-                                          "mapTo": "position",
-                                          "name": "Position",
-                                          "props": Object {
-                                            "defaultSelections": Array [
-                                              Object {
-                                                "id": "v",
-                                                "name": "Right",
-                                              },
-                                            ],
-                                            "options": Array [
-                                              Object {
-                                                "id": "v",
-                                                "name": "Right",
-                                              },
-                                              Object {
-                                                "id": "h",
-                                                "name": "Bottom",
-                                              },
-                                            ],
-                                          },
-                                        },
-                                      ],
-                                    },
-                                    Object {
-                                      "editor": [Function],
-                                      "id": "chart_styles",
-                                      "mapTo": "chartStyles",
-                                      "name": "Chart styles",
-                                      "schemas": Array [
-                                        Object {
-                                          "component": [Function],
-                                          "eleType": "buttons",
-                                          "mapTo": "orientation",
-                                          "name": "Orientation",
-                                          "props": Object {
-                                            "defaultSelections": Array [
-                                              Object {
-                                                "id": "v",
-                                                "name": "Vertical",
-                                              },
-                                            ],
-                                            "options": Array [
-                                              Object {
-                                                "id": "v",
-                                                "name": "Vertical",
-                                              },
-                                              Object {
-                                                "id": "h",
-                                                "name": "Horizontal",
-                                              },
-                                            ],
-                                          },
-                                        },
-                                        Object {
-                                          "component": [Function],
-                                          "eleType": "buttons",
-                                          "mapTo": "mode",
-                                          "name": "Mode",
-                                          "props": Object {
-                                            "defaultSelections": Array [
-                                              Object {
-                                                "id": "group",
-                                                "name": "Group",
-                                              },
-                                            ],
-                                            "options": Array [
-                                              Object {
-                                                "id": "group",
-                                                "name": "Group",
-                                              },
-                                              Object {
-                                                "id": "stack",
-                                                "name": "Stack",
-                                              },
-                                            ],
-                                          },
-                                        },
-                                        Object {
-                                          "component": [Function],
-                                          "defaultState": 0,
-                                          "eleType": "slider",
-                                          "mapTo": "rotateBarLabels",
-                                          "name": "Rotate bar labels",
-                                          "props": Object {
-                                            "max": 90,
-                                            "min": -90,
-                                            "showTicks": true,
-                                            "ticks": Array [
-                                              Object {
-                                                "label": "-90°",
-                                                "value": -90,
-                                              },
-                                              Object {
-                                                "label": "-45°",
-                                                "value": -45,
-                                              },
-                                              Object {
-                                                "label": "0°",
-                                                "value": 0,
-                                              },
-                                              Object {
-                                                "label": "45°",
-                                                "value": 45,
-                                              },
-                                              Object {
-                                                "label": "90°",
-                                                "value": 90,
-                                              },
-                                            ],
-                                          },
-                                        },
-                                        Object {
-                                          "component": [Function],
-                                          "defaultState": 0.7,
-                                          "eleType": "slider",
-                                          "mapTo": "groupWidth",
-                                          "name": "Group width",
-                                          "props": Object {
-                                            "max": 1,
-                                            "step": 0.01,
-                                          },
-                                        },
-                                        Object {
-                                          "component": [Function],
-                                          "defaultState": 0.97,
-                                          "eleType": "slider",
-                                          "mapTo": "barWidth",
-                                          "name": "Bar width",
-                                          "props": Object {
-                                            "max": 1,
-                                            "step": 0.01,
-                                          },
-                                        },
-                                        Object {
-                                          "component": [Function],
-                                          "defaultState": 1,
-                                          "eleType": "slider",
-                                          "mapTo": "lineWidth",
-                                          "name": "Line width",
-                                          "props": Object {
-                                            "max": 10,
-                                          },
-                                        },
-                                        Object {
-                                          "component": [Function],
-                                          "defaultState": 80,
-                                          "eleType": "slider",
-                                          "mapTo": "fillOpacity",
-                                          "name": "Fill Opacity",
-                                          "props": Object {
-                                            "max": 100,
-                                          },
-                                        },
-                                      ],
-                                    },
-                                    Object {
-                                      "editor": [Function],
-                                      "id": "color-theme",
-                                      "mapTo": "colorTheme",
-                                      "name": "Color Theme",
-                                      "schemas": Array [],
-                                    },
-                                  ],
-                                },
-                                Object {
-                                  "content": Array [],
-                                  "editor": [Function],
-                                  "id": "style-panel",
-                                  "mapTo": "layoutConfig",
-                                  "name": "Layout",
-                                },
-                                Object {
-                                  "editor": [Function],
-                                  "id": "availability-panel",
-                                  "mapTo": "availabilityConfig",
-                                  "name": "Availability",
-                                },
-                              ],
-                            },
-                            "fillOpacity": 80,
-                            "fullLabel": "Bar",
-                            "groupWidth": 0.7,
-                            "icon": [Function],
-                            "iconType": "visBarVerticalStacked",
-                            "id": "bar",
-                            "label": "Bar",
-                            "labelAngle": 0,
-                            "legendPosition": "v",
-                            "lineWidth": 1,
-                            "mode": "group",
-                            "name": "bar",
-                            "orientation": "v",
-                            "selection": Object {
-                              "dataLoss": "nothing",
-                            },
-                            "seriesAxis": "yaxis",
-                            "showLegend": "show",
-                            "type": "bar",
-                            "visConfig": Object {
-                              "config": Object {
-                                "displaylogo": false,
-                                "responsive": true,
-                              },
-                              "isUniColor": false,
-                              "layout": Object {
-                                "height": 500,
-                                "legend": Object {
-                                  "orientation": "v",
-                                  "traceorder": "normal",
-                                },
-                                "margin": Object {
-                                  "b": 30,
-                                  "l": 60,
-                                  "pad": 0,
-                                  "r": 30,
-                                  "t": 50,
-                                },
-                                "showlegend": true,
                               },
-                            },
+                            ],
                           },
-                        }
-                      }
-                      vizState={
-                        Object {
-                          "valueOptions": Object {},
-                        }
-                      }
-                    />,
-                    "id": "data-panel",
-                    "name": "Data",
-                  }
-                }
-                tabs={
+                          Object {
+                            "editor": [Function],
+                            "id": "color-theme",
+                            "mapTo": "colorTheme",
+                            "name": "Color Theme",
+                            "schemas": Array [],
+                          },
+                        ],
+                      },
+                      Object {
+                        "content": Array [],
+                        "editor": [Function],
+                        "id": "style-panel",
+                        "mapTo": "layoutConfig",
+                        "name": "Layout",
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "availability-panel",
+                        "mapTo": "availabilityConfig",
+                        "name": "Availability",
+                      },
+                    ],
+                  },
+                  "fillOpacity": 80,
+                  "fullLabel": "Bar",
+                  "groupWidth": 0.7,
+                  "icon": [Function],
+                  "iconType": "visBarVerticalStacked",
+                  "id": "bar",
+                  "label": "Bar",
+                  "labelAngle": 0,
+                  "legendPosition": "v",
+                  "lineWidth": 1,
+                  "mode": "group",
+                  "name": "bar",
+                  "orientation": "v",
+                  "selection": Object {
+                    "dataLoss": "nothing",
+                  },
+                  "seriesAxis": "yaxis",
+                  "showLegend": "show",
+                  "type": "bar",
+                  "visConfig": Object {
+                    "config": Object {
+                      "displaylogo": false,
+                      "responsive": true,
+                    },
+                    "isUniColor": false,
+                    "layout": Object {
+                      "height": 1180,
+                      "legend": Object {
+                        "orientation": "v",
+                        "traceorder": "normal",
+                      },
+                      "margin": Object {
+                        "b": 30,
+                        "l": 60,
+                        "pad": 0,
+                        "r": 30,
+                        "t": 50,
+                      },
+                      "showlegend": true,
+                    },
+                  },
+                },
+              ]
+            }
+            singleSelection={true}
+            sortMatchesBy="none"
+          >
+            <div
+              aria-expanded={false}
+              aria-haspopup="listbox"
+              aria-label="config chart selector"
+              className="euiComboBox euiComboBox--fullWidth"
+              onKeyDown={[Function]}
+              role="combobox"
+            >
+              <EuiComboBoxInput
+                autoSizeInputRef={[Function]}
+                compressed={false}
+                fullWidth={true}
+                hasSelectedOptions={true}
+                inputRef={[Function]}
+                isListOpen={false}
+                noIcon={false}
+                onChange={[Function]}
+                onClick={[Function]}
+                onCloseListClick={[Function]}
+                onFocus={[Function]}
+                onOpenListClick={[Function]}
+                onRemoveOption={[Function]}
+                placeholder="Select a chart"
+                rootId={[Function]}
+                searchValue=""
+                selectedOptions={
                   Array [
                     Object {
-                      "content": <VizDataPanel
-                        curVisId="bar"
-                        onConfigChange={[Function]}
-                        tabProps={
+                      "barWidth": 0.97,
+                      "category": "Visualizations",
+                      "categoryAxis": "xaxis",
+                      "component": [Function],
+                      "editorConfig": Object {
+                        "panelTabs": Array [
                           Object {
                             "editor": [Function],
                             "id": "data-panel",
                             "mapTo": "dataConfig",
                             "name": "Data",
                             "sections": Array [
-                              Object {
-                                "editor": [Function],
-                                "id": "value_options",
-                                "mapTo": "valueOptions",
-                                "name": "Value options",
-                                "schemas": Array [
-                                  Object {
-                                    "component": null,
-                                    "isSingleSelection": false,
-                                    "mapTo": "xaxis",
-                                    "name": "X-axis",
-                                  },
-                                  Object {
-                                    "component": null,
-                                    "isSingleSelection": false,
-                                    "mapTo": "yaxis",
-                                    "name": "Y-axis",
-                                  },
-                                ],
-                              },
                               Object {
                                 "editor": [Function],
                                 "id": "legend",
@@ -4904,311 +2847,471 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                       ],
                                       "options": Array [
                                         Object {
-                                          "id": "v",
-                                          "name": "Vertical",
+                                          "id": "v",
+                                          "name": "Vertical",
+                                        },
+                                        Object {
+                                          "id": "h",
+                                          "name": "Horizontal",
+                                        },
+                                      ],
+                                    },
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "eleType": "buttons",
+                                    "mapTo": "mode",
+                                    "name": "Mode",
+                                    "props": Object {
+                                      "defaultSelections": Array [
+                                        Object {
+                                          "id": "group",
+                                          "name": "Group",
+                                        },
+                                      ],
+                                      "options": Array [
+                                        Object {
+                                          "id": "group",
+                                          "name": "Group",
+                                        },
+                                        Object {
+                                          "id": "stack",
+                                          "name": "Stack",
+                                        },
+                                      ],
+                                    },
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "eleType": "input",
+                                    "mapTo": "labelSize",
+                                    "name": "Label Size",
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "defaultState": 0,
+                                    "eleType": "slider",
+                                    "mapTo": "rotateBarLabels",
+                                    "name": "Rotate bar labels",
+                                    "props": Object {
+                                      "max": 90,
+                                      "min": -90,
+                                      "showTicks": true,
+                                      "ticks": Array [
+                                        Object {
+                                          "label": "-90°",
+                                          "value": -90,
+                                        },
+                                        Object {
+                                          "label": "-45°",
+                                          "value": -45,
+                                        },
+                                        Object {
+                                          "label": "0°",
+                                          "value": 0,
+                                        },
+                                        Object {
+                                          "label": "45°",
+                                          "value": 45,
+                                        },
+                                        Object {
+                                          "label": "90°",
+                                          "value": 90,
+                                        },
+                                      ],
+                                    },
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "defaultState": 0.7,
+                                    "eleType": "slider",
+                                    "mapTo": "groupWidth",
+                                    "name": "Group width",
+                                    "props": Object {
+                                      "max": 1,
+                                      "step": 0.01,
+                                    },
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "defaultState": 0.97,
+                                    "eleType": "slider",
+                                    "mapTo": "barWidth",
+                                    "name": "Bar width",
+                                    "props": Object {
+                                      "max": 1,
+                                      "step": 0.01,
+                                    },
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "defaultState": 1,
+                                    "eleType": "slider",
+                                    "mapTo": "lineWidth",
+                                    "name": "Line width",
+                                    "props": Object {
+                                      "max": 10,
+                                    },
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "defaultState": 80,
+                                    "eleType": "slider",
+                                    "mapTo": "fillOpacity",
+                                    "name": "Fill Opacity",
+                                    "props": Object {
+                                      "max": 100,
+                                    },
+                                  },
+                                ],
+                              },
+                              Object {
+                                "editor": [Function],
+                                "id": "color-theme",
+                                "mapTo": "colorTheme",
+                                "name": "Color Theme",
+                                "schemas": Array [],
+                              },
+                            ],
+                          },
+                          Object {
+                            "content": Array [],
+                            "editor": [Function],
+                            "id": "style-panel",
+                            "mapTo": "layoutConfig",
+                            "name": "Layout",
+                          },
+                          Object {
+                            "editor": [Function],
+                            "id": "availability-panel",
+                            "mapTo": "availabilityConfig",
+                            "name": "Availability",
+                          },
+                        ],
+                      },
+                      "fillOpacity": 80,
+                      "fullLabel": "Bar",
+                      "groupWidth": 0.7,
+                      "icon": [Function],
+                      "iconType": "visBarVerticalStacked",
+                      "id": "bar",
+                      "label": "Bar",
+                      "labelAngle": 0,
+                      "legendPosition": "v",
+                      "lineWidth": 1,
+                      "mode": "group",
+                      "name": "bar",
+                      "orientation": "v",
+                      "selection": Object {
+                        "dataLoss": "nothing",
+                      },
+                      "seriesAxis": "yaxis",
+                      "showLegend": "show",
+                      "type": "bar",
+                      "visConfig": Object {
+                        "config": Object {
+                          "displaylogo": false,
+                          "responsive": true,
+                        },
+                        "isUniColor": false,
+                        "layout": Object {
+                          "height": 1180,
+                          "legend": Object {
+                            "orientation": "v",
+                            "traceorder": "normal",
+                          },
+                          "margin": Object {
+                            "b": 30,
+                            "l": 60,
+                            "pad": 0,
+                            "r": 30,
+                            "t": 50,
+                          },
+                          "showlegend": true,
+                        },
+                      },
+                    },
+                  ]
+                }
+                singleSelection={true}
+                toggleButtonRef={[Function]}
+                updatePosition={[Function]}
+                value="Bar"
+              >
+                <EuiFormControlLayout
+                  compressed={false}
+                  fullWidth={true}
+                  icon={
+                    Object {
+                      "aria-label": "Open list of options",
+                      "data-test-subj": "comboBoxToggleListButton",
+                      "disabled": undefined,
+                      "onClick": [Function],
+                      "ref": [Function],
+                      "side": "right",
+                      "type": "arrowDown",
+                    }
+                  }
+                >
+                  <div
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                  >
+                    <div
+                      className="euiFormControlLayout__childrenWrapper"
+                    >
+                      <div
+                        className="euiComboBox__inputWrap euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap"
+                        data-test-subj="comboBoxInput"
+                        onClick={[Function]}
+                        tabIndex={-1}
+                      >
+                        <EuiComboBoxPill
+                          asPlainText={false}
+                          barWidth={0.97}
+                          category="Visualizations"
+                          categoryAxis="xaxis"
+                          color="hollow"
+                          component={[Function]}
+                          editorConfig={
+                            Object {
+                              "panelTabs": Array [
+                                Object {
+                                  "editor": [Function],
+                                  "id": "data-panel",
+                                  "mapTo": "dataConfig",
+                                  "name": "Data",
+                                  "sections": Array [
+                                    Object {
+                                      "editor": [Function],
+                                      "id": "legend",
+                                      "mapTo": "legend",
+                                      "name": "Legend",
+                                      "schemas": Array [
+                                        Object {
+                                          "component": null,
+                                          "mapTo": "showLegend",
+                                          "name": "Show Legend",
+                                          "props": Object {
+                                            "defaultSelections": Array [
+                                              Object {
+                                                "id": "show",
+                                                "name": "Show",
+                                              },
+                                            ],
+                                            "options": Array [
+                                              Object {
+                                                "id": "show",
+                                                "name": "Show",
+                                              },
+                                              Object {
+                                                "id": "hidden",
+                                                "name": "Hidden",
+                                              },
+                                            ],
+                                          },
                                         },
                                         Object {
-                                          "id": "h",
-                                          "name": "Horizontal",
+                                          "component": null,
+                                          "mapTo": "position",
+                                          "name": "Position",
+                                          "props": Object {
+                                            "defaultSelections": Array [
+                                              Object {
+                                                "id": "v",
+                                                "name": "Right",
+                                              },
+                                            ],
+                                            "options": Array [
+                                              Object {
+                                                "id": "v",
+                                                "name": "Right",
+                                              },
+                                              Object {
+                                                "id": "h",
+                                                "name": "Bottom",
+                                              },
+                                            ],
+                                          },
                                         },
                                       ],
                                     },
-                                  },
-                                  Object {
-                                    "component": [Function],
-                                    "eleType": "buttons",
-                                    "mapTo": "mode",
-                                    "name": "Mode",
-                                    "props": Object {
-                                      "defaultSelections": Array [
+                                    Object {
+                                      "editor": [Function],
+                                      "id": "chart_styles",
+                                      "mapTo": "chartStyles",
+                                      "name": "Chart styles",
+                                      "schemas": Array [
                                         Object {
-                                          "id": "group",
-                                          "name": "Group",
+                                          "component": [Function],
+                                          "eleType": "buttons",
+                                          "mapTo": "orientation",
+                                          "name": "Orientation",
+                                          "props": Object {
+                                            "defaultSelections": Array [
+                                              Object {
+                                                "id": "v",
+                                                "name": "Vertical",
+                                              },
+                                            ],
+                                            "options": Array [
+                                              Object {
+                                                "id": "v",
+                                                "name": "Vertical",
+                                              },
+                                              Object {
+                                                "id": "h",
+                                                "name": "Horizontal",
+                                              },
+                                            ],
+                                          },
                                         },
-                                      ],
-                                      "options": Array [
                                         Object {
-                                          "id": "group",
-                                          "name": "Group",
+                                          "component": [Function],
+                                          "eleType": "buttons",
+                                          "mapTo": "mode",
+                                          "name": "Mode",
+                                          "props": Object {
+                                            "defaultSelections": Array [
+                                              Object {
+                                                "id": "group",
+                                                "name": "Group",
+                                              },
+                                            ],
+                                            "options": Array [
+                                              Object {
+                                                "id": "group",
+                                                "name": "Group",
+                                              },
+                                              Object {
+                                                "id": "stack",
+                                                "name": "Stack",
+                                              },
+                                            ],
+                                          },
                                         },
                                         Object {
-                                          "id": "stack",
-                                          "name": "Stack",
+                                          "component": [Function],
+                                          "eleType": "input",
+                                          "mapTo": "labelSize",
+                                          "name": "Label Size",
                                         },
-                                      ],
-                                    },
-                                  },
-                                  Object {
-                                    "component": [Function],
-                                    "defaultState": 0,
-                                    "eleType": "slider",
-                                    "mapTo": "rotateBarLabels",
-                                    "name": "Rotate bar labels",
-                                    "props": Object {
-                                      "max": 90,
-                                      "min": -90,
-                                      "showTicks": true,
-                                      "ticks": Array [
                                         Object {
-                                          "label": "-90°",
-                                          "value": -90,
+                                          "component": [Function],
+                                          "defaultState": 0,
+                                          "eleType": "slider",
+                                          "mapTo": "rotateBarLabels",
+                                          "name": "Rotate bar labels",
+                                          "props": Object {
+                                            "max": 90,
+                                            "min": -90,
+                                            "showTicks": true,
+                                            "ticks": Array [
+                                              Object {
+                                                "label": "-90°",
+                                                "value": -90,
+                                              },
+                                              Object {
+                                                "label": "-45°",
+                                                "value": -45,
+                                              },
+                                              Object {
+                                                "label": "0°",
+                                                "value": 0,
+                                              },
+                                              Object {
+                                                "label": "45°",
+                                                "value": 45,
+                                              },
+                                              Object {
+                                                "label": "90°",
+                                                "value": 90,
+                                              },
+                                            ],
+                                          },
                                         },
                                         Object {
-                                          "label": "-45°",
-                                          "value": -45,
+                                          "component": [Function],
+                                          "defaultState": 0.7,
+                                          "eleType": "slider",
+                                          "mapTo": "groupWidth",
+                                          "name": "Group width",
+                                          "props": Object {
+                                            "max": 1,
+                                            "step": 0.01,
+                                          },
                                         },
                                         Object {
-                                          "label": "0°",
-                                          "value": 0,
+                                          "component": [Function],
+                                          "defaultState": 0.97,
+                                          "eleType": "slider",
+                                          "mapTo": "barWidth",
+                                          "name": "Bar width",
+                                          "props": Object {
+                                            "max": 1,
+                                            "step": 0.01,
+                                          },
                                         },
                                         Object {
-                                          "label": "45°",
-                                          "value": 45,
+                                          "component": [Function],
+                                          "defaultState": 1,
+                                          "eleType": "slider",
+                                          "mapTo": "lineWidth",
+                                          "name": "Line width",
+                                          "props": Object {
+                                            "max": 10,
+                                          },
                                         },
                                         Object {
-                                          "label": "90°",
-                                          "value": 90,
+                                          "component": [Function],
+                                          "defaultState": 80,
+                                          "eleType": "slider",
+                                          "mapTo": "fillOpacity",
+                                          "name": "Fill Opacity",
+                                          "props": Object {
+                                            "max": 100,
+                                          },
                                         },
                                       ],
                                     },
-                                  },
-                                  Object {
-                                    "component": [Function],
-                                    "defaultState": 0.7,
-                                    "eleType": "slider",
-                                    "mapTo": "groupWidth",
-                                    "name": "Group width",
-                                    "props": Object {
-                                      "max": 1,
-                                      "step": 0.01,
-                                    },
-                                  },
-                                  Object {
-                                    "component": [Function],
-                                    "defaultState": 0.97,
-                                    "eleType": "slider",
-                                    "mapTo": "barWidth",
-                                    "name": "Bar width",
-                                    "props": Object {
-                                      "max": 1,
-                                      "step": 0.01,
-                                    },
-                                  },
-                                  Object {
-                                    "component": [Function],
-                                    "defaultState": 1,
-                                    "eleType": "slider",
-                                    "mapTo": "lineWidth",
-                                    "name": "Line width",
-                                    "props": Object {
-                                      "max": 10,
-                                    },
-                                  },
-                                  Object {
-                                    "component": [Function],
-                                    "defaultState": 80,
-                                    "eleType": "slider",
-                                    "mapTo": "fillOpacity",
-                                    "name": "Fill Opacity",
-                                    "props": Object {
-                                      "max": 100,
-                                    },
-                                  },
-                                ],
-                              },
-                              Object {
-                                "editor": [Function],
-                                "id": "color-theme",
-                                "mapTo": "colorTheme",
-                                "name": "Color Theme",
-                                "schemas": Array [],
-                              },
-                            ],
-                          }
-                        }
-                        visualizations={
-                          Object {
-                            "data": Object {
-                              "appData": Object {
-                                "fromApp": false,
-                              },
-                              "defaultAxes": Object {},
-                              "indexFields": Object {
-                                "availableFields": Array [
-                                  Object {
-                                    "name": "agent",
-                                    "type": "string",
-                                  },
-                                  Object {
-                                    "name": "bytes",
-                                    "type": "long",
-                                  },
-                                  Object {
-                                    "name": "clientip",
-                                    "type": "ip",
-                                  },
-                                  Object {
-                                    "name": "event",
-                                    "type": "struct",
-                                  },
-                                  Object {
-                                    "name": "extension",
-                                    "type": "string",
-                                  },
-                                  Object {
-                                    "name": "geo",
-                                    "type": "struct",
-                                  },
-                                  Object {
-                                    "name": "host",
-                                    "type": "string",
-                                  },
-                                  Object {
-                                    "name": "index",
-                                    "type": "string",
-                                  },
-                                  Object {
-                                    "name": "ip",
-                                    "type": "ip",
-                                  },
-                                  Object {
-                                    "name": "machine",
-                                    "type": "struct",
-                                  },
-                                  Object {
-                                    "name": "memory",
-                                    "type": "double",
-                                  },
-                                  Object {
-                                    "name": "message",
-                                    "type": "string",
-                                  },
-                                  Object {
-                                    "name": "phpmemory",
-                                    "type": "long",
-                                  },
-                                  Object {
-                                    "name": "referer",
-                                    "type": "string",
-                                  },
-                                  Object {
-                                    "name": "request",
-                                    "type": "string",
-                                  },
-                                  Object {
-                                    "name": "response",
-                                    "type": "string",
-                                  },
-                                  Object {
-                                    "name": "tags",
-                                    "type": "string",
-                                  },
-                                  Object {
-                                    "name": "timestamp",
-                                    "type": "timestamp",
-                                  },
-                                  Object {
-                                    "name": "url",
-                                    "type": "string",
-                                  },
-                                  Object {
-                                    "name": "utc_time",
-                                    "type": "timestamp",
-                                  },
-                                ],
-                                "queriedFields": Array [
-                                  Object {
-                                    "name": "double_per_ip_bytes",
-                                    "type": "long",
-                                  },
-                                  Object {
-                                    "name": "host",
-                                    "type": "text",
-                                  },
-                                  Object {
-                                    "name": "ip_count",
-                                    "type": "integer",
-                                  },
-                                  Object {
-                                    "name": "per_ip_bytes",
-                                    "type": "long",
-                                  },
-                                  Object {
-                                    "name": "resp_code",
-                                    "type": "text",
-                                  },
-                                  Object {
-                                    "name": "sum_bytes",
-                                    "type": "long",
-                                  },
-                                ],
-                                "selectedFields": Array [],
-                                "unselectedFields": Array [],
-                              },
-                              "query": Object {},
-                              "rawVizData": Object {
-                                "data": Object {
-                                  "count()": Array [
-                                    154,
-                                    1753,
-                                    116,
-                                    468,
-                                    1964,
-                                    219,
-                                  ],
-                                  "tags": Array [
-                                    "error",
-                                    "info",
-                                    "login",
-                                    "security",
-                                    "success",
-                                    "warning",
-                                  ],
-                                },
-                                "jsonData": Array [
-                                  Object {
-                                    "count()": 154,
-                                    "tags": "error",
-                                  },
-                                  Object {
-                                    "count()": 1753,
-                                    "tags": "info",
-                                  },
-                                  Object {
-                                    "count()": 116,
-                                    "tags": "login",
-                                  },
-                                  Object {
-                                    "count()": 468,
-                                    "tags": "security",
-                                  },
-                                  Object {
-                                    "count()": 1964,
-                                    "tags": "success",
-                                  },
-                                  Object {
-                                    "count()": 219,
-                                    "tags": "warning",
-                                  },
-                                ],
-                                "metadata": Object {
-                                  "fields": Array [
-                                    Object {
-                                      "name": "count()",
-                                      "type": "integer",
-                                    },
                                     Object {
-                                      "name": "tags",
-                                      "type": "text",
+                                      "editor": [Function],
+                                      "id": "color-theme",
+                                      "mapTo": "colorTheme",
+                                      "name": "Color Theme",
+                                      "schemas": Array [],
                                     },
                                   ],
-                                  "size": 6,
-                                  "status": 200,
                                 },
-                              },
-                              "userConfigs": Object {},
-                            },
-                            "vis": Object {
+                                Object {
+                                  "content": Array [],
+                                  "editor": [Function],
+                                  "id": "style-panel",
+                                  "mapTo": "layoutConfig",
+                                  "name": "Layout",
+                                },
+                                Object {
+                                  "editor": [Function],
+                                  "id": "availability-panel",
+                                  "mapTo": "availabilityConfig",
+                                  "name": "Availability",
+                                },
+                              ],
+                            }
+                          }
+                          fillOpacity={80}
+                          fullLabel="Bar"
+                          groupWidth={0.7}
+                          icon={[Function]}
+                          iconType="visBarVerticalStacked"
+                          id="bar"
+                          key="bar"
+                          labelAngle={0}
+                          legendPosition="v"
+                          lineWidth={1}
+                          mode="group"
+                          name="bar"
+                          option={
+                            Object {
                               "barWidth": 0.97,
                               "category": "Visualizations",
                               "categoryAxis": "xaxis",
@@ -5221,26 +3324,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                     "mapTo": "dataConfig",
                                     "name": "Data",
                                     "sections": Array [
-                                      Object {
-                                        "editor": [Function],
-                                        "id": "value_options",
-                                        "mapTo": "valueOptions",
-                                        "name": "Value options",
-                                        "schemas": Array [
-                                          Object {
-                                            "component": null,
-                                            "isSingleSelection": false,
-                                            "mapTo": "xaxis",
-                                            "name": "X-axis",
-                                          },
-                                          Object {
-                                            "component": null,
-                                            "isSingleSelection": false,
-                                            "mapTo": "yaxis",
-                                            "name": "Y-axis",
-                                          },
-                                        ],
-                                      },
                                       Object {
                                         "editor": [Function],
                                         "id": "legend",
@@ -5349,6 +3432,12 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               ],
                                             },
                                           },
+                                          Object {
+                                            "component": [Function],
+                                            "eleType": "input",
+                                            "mapTo": "labelSize",
+                                            "name": "Label Size",
+                                          },
                                           Object {
                                             "component": [Function],
                                             "defaultState": 0,
@@ -5437,291 +3526,106 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                     ],
                                   },
                                   Object {
-                                    "content": Array [],
-                                    "editor": [Function],
-                                    "id": "style-panel",
-                                    "mapTo": "layoutConfig",
-                                    "name": "Layout",
-                                  },
-                                  Object {
-                                    "editor": [Function],
-                                    "id": "availability-panel",
-                                    "mapTo": "availabilityConfig",
-                                    "name": "Availability",
-                                  },
-                                ],
-                              },
-                              "fillOpacity": 80,
-                              "fullLabel": "Bar",
-                              "groupWidth": 0.7,
-                              "icon": [Function],
-                              "iconType": "visBarVerticalStacked",
-                              "id": "bar",
-                              "label": "Bar",
-                              "labelAngle": 0,
-                              "legendPosition": "v",
-                              "lineWidth": 1,
-                              "mode": "group",
-                              "name": "bar",
-                              "orientation": "v",
-                              "selection": Object {
-                                "dataLoss": "nothing",
-                              },
-                              "seriesAxis": "yaxis",
-                              "showLegend": "show",
-                              "type": "bar",
-                              "visConfig": Object {
-                                "config": Object {
-                                  "displaylogo": false,
-                                  "responsive": true,
-                                },
-                                "isUniColor": false,
-                                "layout": Object {
-                                  "height": 500,
-                                  "legend": Object {
-                                    "orientation": "v",
-                                    "traceorder": "normal",
-                                  },
-                                  "margin": Object {
-                                    "b": 30,
-                                    "l": 60,
-                                    "pad": 0,
-                                    "r": 30,
-                                    "t": 50,
-                                  },
-                                  "showlegend": true,
-                                },
-                              },
-                            },
-                          }
-                        }
-                        vizState={
-                          Object {
-                            "valueOptions": Object {},
-                          }
-                        }
-                      />,
-                      "id": "data-panel",
-                      "name": "Data",
-                    },
-                    Object {
-                      "content": <ConfigEditor
-                        onConfigEditorChange={[Function]}
-                        setToast={[MockFunction]}
-                        spec="MOCK HJSON STRING"
-                        tabProps={
-                          Object {
-                            "content": Array [],
-                            "editor": [Function],
-                            "id": "style-panel",
-                            "mapTo": "layoutConfig",
-                            "name": "Layout",
-                          }
-                        }
-                      />,
-                      "id": "style-panel",
-                      "name": "Layout",
-                    },
-                    Object {
-                      "content": <ConfigAvailability
-                        curVisId="bar"
-                        onConfigChange={[Function]}
-                        tabProps={
-                          Object {
-                            "editor": [Function],
-                            "id": "availability-panel",
-                            "mapTo": "availabilityConfig",
-                            "name": "Availability",
-                          }
-                        }
-                        visualizations={
-                          Object {
-                            "data": Object {
-                              "appData": Object {
-                                "fromApp": false,
-                              },
-                              "defaultAxes": Object {},
-                              "indexFields": Object {
-                                "availableFields": Array [
-                                  Object {
-                                    "name": "agent",
-                                    "type": "string",
-                                  },
-                                  Object {
-                                    "name": "bytes",
-                                    "type": "long",
-                                  },
-                                  Object {
-                                    "name": "clientip",
-                                    "type": "ip",
-                                  },
-                                  Object {
-                                    "name": "event",
-                                    "type": "struct",
-                                  },
-                                  Object {
-                                    "name": "extension",
-                                    "type": "string",
-                                  },
-                                  Object {
-                                    "name": "geo",
-                                    "type": "struct",
-                                  },
-                                  Object {
-                                    "name": "host",
-                                    "type": "string",
-                                  },
-                                  Object {
-                                    "name": "index",
-                                    "type": "string",
-                                  },
-                                  Object {
-                                    "name": "ip",
-                                    "type": "ip",
-                                  },
-                                  Object {
-                                    "name": "machine",
-                                    "type": "struct",
-                                  },
-                                  Object {
-                                    "name": "memory",
-                                    "type": "double",
-                                  },
-                                  Object {
-                                    "name": "message",
-                                    "type": "string",
-                                  },
-                                  Object {
-                                    "name": "phpmemory",
-                                    "type": "long",
-                                  },
-                                  Object {
-                                    "name": "referer",
-                                    "type": "string",
-                                  },
-                                  Object {
-                                    "name": "request",
-                                    "type": "string",
-                                  },
-                                  Object {
-                                    "name": "response",
-                                    "type": "string",
-                                  },
-                                  Object {
-                                    "name": "tags",
-                                    "type": "string",
-                                  },
-                                  Object {
-                                    "name": "timestamp",
-                                    "type": "timestamp",
-                                  },
-                                  Object {
-                                    "name": "url",
-                                    "type": "string",
-                                  },
-                                  Object {
-                                    "name": "utc_time",
-                                    "type": "timestamp",
-                                  },
-                                ],
-                                "queriedFields": Array [
-                                  Object {
-                                    "name": "double_per_ip_bytes",
-                                    "type": "long",
-                                  },
-                                  Object {
-                                    "name": "host",
-                                    "type": "text",
-                                  },
-                                  Object {
-                                    "name": "ip_count",
-                                    "type": "integer",
-                                  },
-                                  Object {
-                                    "name": "per_ip_bytes",
-                                    "type": "long",
-                                  },
-                                  Object {
-                                    "name": "resp_code",
-                                    "type": "text",
+                                    "content": Array [],
+                                    "editor": [Function],
+                                    "id": "style-panel",
+                                    "mapTo": "layoutConfig",
+                                    "name": "Layout",
                                   },
                                   Object {
-                                    "name": "sum_bytes",
-                                    "type": "long",
+                                    "editor": [Function],
+                                    "id": "availability-panel",
+                                    "mapTo": "availabilityConfig",
+                                    "name": "Availability",
                                   },
                                 ],
-                                "selectedFields": Array [],
-                                "unselectedFields": Array [],
                               },
-                              "query": Object {},
-                              "rawVizData": Object {
-                                "data": Object {
-                                  "count()": Array [
-                                    154,
-                                    1753,
-                                    116,
-                                    468,
-                                    1964,
-                                    219,
-                                  ],
-                                  "tags": Array [
-                                    "error",
-                                    "info",
-                                    "login",
-                                    "security",
-                                    "success",
-                                    "warning",
-                                  ],
+                              "fillOpacity": 80,
+                              "fullLabel": "Bar",
+                              "groupWidth": 0.7,
+                              "icon": [Function],
+                              "iconType": "visBarVerticalStacked",
+                              "id": "bar",
+                              "label": "Bar",
+                              "labelAngle": 0,
+                              "legendPosition": "v",
+                              "lineWidth": 1,
+                              "mode": "group",
+                              "name": "bar",
+                              "orientation": "v",
+                              "selection": Object {
+                                "dataLoss": "nothing",
+                              },
+                              "seriesAxis": "yaxis",
+                              "showLegend": "show",
+                              "type": "bar",
+                              "visConfig": Object {
+                                "config": Object {
+                                  "displaylogo": false,
+                                  "responsive": true,
                                 },
-                                "jsonData": Array [
-                                  Object {
-                                    "count()": 154,
-                                    "tags": "error",
-                                  },
-                                  Object {
-                                    "count()": 1753,
-                                    "tags": "info",
-                                  },
-                                  Object {
-                                    "count()": 116,
-                                    "tags": "login",
-                                  },
-                                  Object {
-                                    "count()": 468,
-                                    "tags": "security",
-                                  },
-                                  Object {
-                                    "count()": 1964,
-                                    "tags": "success",
+                                "isUniColor": false,
+                                "layout": Object {
+                                  "height": 1180,
+                                  "legend": Object {
+                                    "orientation": "v",
+                                    "traceorder": "normal",
                                   },
-                                  Object {
-                                    "count()": 219,
-                                    "tags": "warning",
+                                  "margin": Object {
+                                    "b": 30,
+                                    "l": 60,
+                                    "pad": 0,
+                                    "r": 30,
+                                    "t": 50,
                                   },
-                                ],
-                                "metadata": Object {
-                                  "fields": Array [
-                                    Object {
-                                      "name": "count()",
-                                      "type": "integer",
-                                    },
-                                    Object {
-                                      "name": "tags",
-                                      "type": "text",
-                                    },
-                                  ],
-                                  "size": 6,
-                                  "status": 200,
+                                  "showlegend": true,
                                 },
                               },
-                              "userConfigs": Object {},
-                            },
-                            "vis": Object {
-                              "barWidth": 0.97,
-                              "category": "Visualizations",
-                              "categoryAxis": "xaxis",
-                              "component": [Function],
-                              "editorConfig": Object {
+                            }
+                          }
+                          orientation="v"
+                          selection={
+                            Object {
+                              "dataLoss": "nothing",
+                            }
+                          }
+                          seriesAxis="yaxis"
+                          showLegend="show"
+                          type="bar"
+                          visConfig={
+                            Object {
+                              "config": Object {
+                                "displaylogo": false,
+                                "responsive": true,
+                              },
+                              "isUniColor": false,
+                              "layout": Object {
+                                "height": 1180,
+                                "legend": Object {
+                                  "orientation": "v",
+                                  "traceorder": "normal",
+                                },
+                                "margin": Object {
+                                  "b": 30,
+                                  "l": 60,
+                                  "pad": 0,
+                                  "r": 30,
+                                  "t": 50,
+                                },
+                                "showlegend": true,
+                              },
+                            }
+                          }
+                        >
+                          <EuiBadge
+                            barWidth={0.97}
+                            category="Visualizations"
+                            categoryAxis="xaxis"
+                            className="euiComboBoxPill"
+                            color="hollow"
+                            component={[Function]}
+                            editorConfig={
+                              Object {
                                 "panelTabs": Array [
                                   Object {
                                     "editor": [Function],
@@ -5729,26 +3633,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                     "mapTo": "dataConfig",
                                     "name": "Data",
                                     "sections": Array [
-                                      Object {
-                                        "editor": [Function],
-                                        "id": "value_options",
-                                        "mapTo": "valueOptions",
-                                        "name": "Value options",
-                                        "schemas": Array [
-                                          Object {
-                                            "component": null,
-                                            "isSingleSelection": false,
-                                            "mapTo": "xaxis",
-                                            "name": "X-axis",
-                                          },
-                                          Object {
-                                            "component": null,
-                                            "isSingleSelection": false,
-                                            "mapTo": "yaxis",
-                                            "name": "Y-axis",
-                                          },
-                                        ],
-                                      },
                                       Object {
                                         "editor": [Function],
                                         "id": "legend",
@@ -5835,272 +3719,653 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                           },
                                           Object {
                                             "component": [Function],
-                                            "eleType": "buttons",
-                                            "mapTo": "mode",
-                                            "name": "Mode",
+                                            "eleType": "buttons",
+                                            "mapTo": "mode",
+                                            "name": "Mode",
+                                            "props": Object {
+                                              "defaultSelections": Array [
+                                                Object {
+                                                  "id": "group",
+                                                  "name": "Group",
+                                                },
+                                              ],
+                                              "options": Array [
+                                                Object {
+                                                  "id": "group",
+                                                  "name": "Group",
+                                                },
+                                                Object {
+                                                  "id": "stack",
+                                                  "name": "Stack",
+                                                },
+                                              ],
+                                            },
+                                          },
+                                          Object {
+                                            "component": [Function],
+                                            "eleType": "input",
+                                            "mapTo": "labelSize",
+                                            "name": "Label Size",
+                                          },
+                                          Object {
+                                            "component": [Function],
+                                            "defaultState": 0,
+                                            "eleType": "slider",
+                                            "mapTo": "rotateBarLabels",
+                                            "name": "Rotate bar labels",
+                                            "props": Object {
+                                              "max": 90,
+                                              "min": -90,
+                                              "showTicks": true,
+                                              "ticks": Array [
+                                                Object {
+                                                  "label": "-90°",
+                                                  "value": -90,
+                                                },
+                                                Object {
+                                                  "label": "-45°",
+                                                  "value": -45,
+                                                },
+                                                Object {
+                                                  "label": "0°",
+                                                  "value": 0,
+                                                },
+                                                Object {
+                                                  "label": "45°",
+                                                  "value": 45,
+                                                },
+                                                Object {
+                                                  "label": "90°",
+                                                  "value": 90,
+                                                },
+                                              ],
+                                            },
+                                          },
+                                          Object {
+                                            "component": [Function],
+                                            "defaultState": 0.7,
+                                            "eleType": "slider",
+                                            "mapTo": "groupWidth",
+                                            "name": "Group width",
+                                            "props": Object {
+                                              "max": 1,
+                                              "step": 0.01,
+                                            },
+                                          },
+                                          Object {
+                                            "component": [Function],
+                                            "defaultState": 0.97,
+                                            "eleType": "slider",
+                                            "mapTo": "barWidth",
+                                            "name": "Bar width",
+                                            "props": Object {
+                                              "max": 1,
+                                              "step": 0.01,
+                                            },
+                                          },
+                                          Object {
+                                            "component": [Function],
+                                            "defaultState": 1,
+                                            "eleType": "slider",
+                                            "mapTo": "lineWidth",
+                                            "name": "Line width",
+                                            "props": Object {
+                                              "max": 10,
+                                            },
+                                          },
+                                          Object {
+                                            "component": [Function],
+                                            "defaultState": 80,
+                                            "eleType": "slider",
+                                            "mapTo": "fillOpacity",
+                                            "name": "Fill Opacity",
                                             "props": Object {
-                                              "defaultSelections": Array [
-                                                Object {
-                                                  "id": "group",
-                                                  "name": "Group",
-                                                },
-                                              ],
-                                              "options": Array [
-                                                Object {
-                                                  "id": "group",
-                                                  "name": "Group",
+                                              "max": 100,
+                                            },
+                                          },
+                                        ],
+                                      },
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "color-theme",
+                                        "mapTo": "colorTheme",
+                                        "name": "Color Theme",
+                                        "schemas": Array [],
+                                      },
+                                    ],
+                                  },
+                                  Object {
+                                    "content": Array [],
+                                    "editor": [Function],
+                                    "id": "style-panel",
+                                    "mapTo": "layoutConfig",
+                                    "name": "Layout",
+                                  },
+                                  Object {
+                                    "editor": [Function],
+                                    "id": "availability-panel",
+                                    "mapTo": "availabilityConfig",
+                                    "name": "Availability",
+                                  },
+                                ],
+                              }
+                            }
+                            fillOpacity={80}
+                            fullLabel="Bar"
+                            groupWidth={0.7}
+                            icon={[Function]}
+                            iconType="visBarVerticalStacked"
+                            id="bar"
+                            labelAngle={0}
+                            legendPosition="v"
+                            lineWidth={1}
+                            mode="group"
+                            name="bar"
+                            orientation="v"
+                            selection={
+                              Object {
+                                "dataLoss": "nothing",
+                              }
+                            }
+                            seriesAxis="yaxis"
+                            showLegend="show"
+                            title="Bar"
+                            type="bar"
+                            visConfig={
+                              Object {
+                                "config": Object {
+                                  "displaylogo": false,
+                                  "responsive": true,
+                                },
+                                "isUniColor": false,
+                                "layout": Object {
+                                  "height": 1180,
+                                  "legend": Object {
+                                    "orientation": "v",
+                                    "traceorder": "normal",
+                                  },
+                                  "margin": Object {
+                                    "b": 30,
+                                    "l": 60,
+                                    "pad": 0,
+                                    "r": 30,
+                                    "t": 50,
+                                  },
+                                  "showlegend": true,
+                                },
+                              }
+                            }
+                          >
+                            <EuiInnerText>
+                              <span
+                                barWidth={0.97}
+                                category="Visualizations"
+                                categoryAxis="xaxis"
+                                className="euiBadge euiBadge--hollow euiBadge--iconLeft euiComboBoxPill"
+                                component={[Function]}
+                                editorConfig={
+                                  Object {
+                                    "panelTabs": Array [
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "data-panel",
+                                        "mapTo": "dataConfig",
+                                        "name": "Data",
+                                        "sections": Array [
+                                          Object {
+                                            "editor": [Function],
+                                            "id": "legend",
+                                            "mapTo": "legend",
+                                            "name": "Legend",
+                                            "schemas": Array [
+                                              Object {
+                                                "component": null,
+                                                "mapTo": "showLegend",
+                                                "name": "Show Legend",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "show",
+                                                      "name": "Show",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "show",
+                                                      "name": "Show",
+                                                    },
+                                                    Object {
+                                                      "id": "hidden",
+                                                      "name": "Hidden",
+                                                    },
+                                                  ],
                                                 },
-                                                Object {
-                                                  "id": "stack",
-                                                  "name": "Stack",
+                                              },
+                                              Object {
+                                                "component": null,
+                                                "mapTo": "position",
+                                                "name": "Position",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "v",
+                                                      "name": "Right",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "v",
+                                                      "name": "Right",
+                                                    },
+                                                    Object {
+                                                      "id": "h",
+                                                      "name": "Bottom",
+                                                    },
+                                                  ],
                                                 },
-                                              ],
-                                            },
+                                              },
+                                            ],
                                           },
                                           Object {
-                                            "component": [Function],
-                                            "defaultState": 0,
-                                            "eleType": "slider",
-                                            "mapTo": "rotateBarLabels",
-                                            "name": "Rotate bar labels",
-                                            "props": Object {
-                                              "max": 90,
-                                              "min": -90,
-                                              "showTicks": true,
-                                              "ticks": Array [
-                                                Object {
-                                                  "label": "-90°",
-                                                  "value": -90,
+                                            "editor": [Function],
+                                            "id": "chart_styles",
+                                            "mapTo": "chartStyles",
+                                            "name": "Chart styles",
+                                            "schemas": Array [
+                                              Object {
+                                                "component": [Function],
+                                                "eleType": "buttons",
+                                                "mapTo": "orientation",
+                                                "name": "Orientation",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "v",
+                                                      "name": "Vertical",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "v",
+                                                      "name": "Vertical",
+                                                    },
+                                                    Object {
+                                                      "id": "h",
+                                                      "name": "Horizontal",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "eleType": "buttons",
+                                                "mapTo": "mode",
+                                                "name": "Mode",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "group",
+                                                      "name": "Group",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "group",
+                                                      "name": "Group",
+                                                    },
+                                                    Object {
+                                                      "id": "stack",
+                                                      "name": "Stack",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "eleType": "input",
+                                                "mapTo": "labelSize",
+                                                "name": "Label Size",
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 0,
+                                                "eleType": "slider",
+                                                "mapTo": "rotateBarLabels",
+                                                "name": "Rotate bar labels",
+                                                "props": Object {
+                                                  "max": 90,
+                                                  "min": -90,
+                                                  "showTicks": true,
+                                                  "ticks": Array [
+                                                    Object {
+                                                      "label": "-90°",
+                                                      "value": -90,
+                                                    },
+                                                    Object {
+                                                      "label": "-45°",
+                                                      "value": -45,
+                                                    },
+                                                    Object {
+                                                      "label": "0°",
+                                                      "value": 0,
+                                                    },
+                                                    Object {
+                                                      "label": "45°",
+                                                      "value": 45,
+                                                    },
+                                                    Object {
+                                                      "label": "90°",
+                                                      "value": 90,
+                                                    },
+                                                  ],
                                                 },
-                                                Object {
-                                                  "label": "-45°",
-                                                  "value": -45,
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 0.7,
+                                                "eleType": "slider",
+                                                "mapTo": "groupWidth",
+                                                "name": "Group width",
+                                                "props": Object {
+                                                  "max": 1,
+                                                  "step": 0.01,
                                                 },
-                                                Object {
-                                                  "label": "0°",
-                                                  "value": 0,
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 0.97,
+                                                "eleType": "slider",
+                                                "mapTo": "barWidth",
+                                                "name": "Bar width",
+                                                "props": Object {
+                                                  "max": 1,
+                                                  "step": 0.01,
                                                 },
-                                                Object {
-                                                  "label": "45°",
-                                                  "value": 45,
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 1,
+                                                "eleType": "slider",
+                                                "mapTo": "lineWidth",
+                                                "name": "Line width",
+                                                "props": Object {
+                                                  "max": 10,
                                                 },
-                                                Object {
-                                                  "label": "90°",
-                                                  "value": 90,
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 80,
+                                                "eleType": "slider",
+                                                "mapTo": "fillOpacity",
+                                                "name": "Fill Opacity",
+                                                "props": Object {
+                                                  "max": 100,
                                                 },
-                                              ],
-                                            },
-                                          },
-                                          Object {
-                                            "component": [Function],
-                                            "defaultState": 0.7,
-                                            "eleType": "slider",
-                                            "mapTo": "groupWidth",
-                                            "name": "Group width",
-                                            "props": Object {
-                                              "max": 1,
-                                              "step": 0.01,
-                                            },
-                                          },
-                                          Object {
-                                            "component": [Function],
-                                            "defaultState": 0.97,
-                                            "eleType": "slider",
-                                            "mapTo": "barWidth",
-                                            "name": "Bar width",
-                                            "props": Object {
-                                              "max": 1,
-                                              "step": 0.01,
-                                            },
-                                          },
-                                          Object {
-                                            "component": [Function],
-                                            "defaultState": 1,
-                                            "eleType": "slider",
-                                            "mapTo": "lineWidth",
-                                            "name": "Line width",
-                                            "props": Object {
-                                              "max": 10,
-                                            },
+                                              },
+                                            ],
                                           },
                                           Object {
-                                            "component": [Function],
-                                            "defaultState": 80,
-                                            "eleType": "slider",
-                                            "mapTo": "fillOpacity",
-                                            "name": "Fill Opacity",
-                                            "props": Object {
-                                              "max": 100,
-                                            },
+                                            "editor": [Function],
+                                            "id": "color-theme",
+                                            "mapTo": "colorTheme",
+                                            "name": "Color Theme",
+                                            "schemas": Array [],
                                           },
                                         ],
                                       },
                                       Object {
+                                        "content": Array [],
                                         "editor": [Function],
-                                        "id": "color-theme",
-                                        "mapTo": "colorTheme",
-                                        "name": "Color Theme",
-                                        "schemas": Array [],
+                                        "id": "style-panel",
+                                        "mapTo": "layoutConfig",
+                                        "name": "Layout",
+                                      },
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "availability-panel",
+                                        "mapTo": "availabilityConfig",
+                                        "name": "Availability",
                                       },
                                     ],
-                                  },
+                                  }
+                                }
+                                fillOpacity={80}
+                                fullLabel="Bar"
+                                groupWidth={0.7}
+                                icon={[Function]}
+                                id="bar"
+                                labelAngle={0}
+                                legendPosition="v"
+                                lineWidth={1}
+                                mode="group"
+                                name="bar"
+                                orientation="v"
+                                selection={
                                   Object {
-                                    "content": Array [],
-                                    "editor": [Function],
-                                    "id": "style-panel",
-                                    "mapTo": "layoutConfig",
-                                    "name": "Layout",
-                                  },
+                                    "dataLoss": "nothing",
+                                  }
+                                }
+                                seriesAxis="yaxis"
+                                showLegend="show"
+                                title="Bar"
+                                type="bar"
+                                visConfig={
                                   Object {
-                                    "editor": [Function],
-                                    "id": "availability-panel",
-                                    "mapTo": "availabilityConfig",
-                                    "name": "Availability",
-                                  },
-                                ],
-                              },
-                              "fillOpacity": 80,
-                              "fullLabel": "Bar",
-                              "groupWidth": 0.7,
-                              "icon": [Function],
-                              "iconType": "visBarVerticalStacked",
-                              "id": "bar",
-                              "label": "Bar",
-                              "labelAngle": 0,
-                              "legendPosition": "v",
-                              "lineWidth": 1,
-                              "mode": "group",
-                              "name": "bar",
-                              "orientation": "v",
-                              "selection": Object {
-                                "dataLoss": "nothing",
-                              },
-                              "seriesAxis": "yaxis",
-                              "showLegend": "show",
-                              "type": "bar",
-                              "visConfig": Object {
-                                "config": Object {
-                                  "displaylogo": false,
-                                  "responsive": true,
-                                },
-                                "isUniColor": false,
-                                "layout": Object {
-                                  "height": 500,
-                                  "legend": Object {
-                                    "orientation": "v",
-                                    "traceorder": "normal",
-                                  },
-                                  "margin": Object {
-                                    "b": 30,
-                                    "l": 60,
-                                    "pad": 0,
-                                    "r": 30,
-                                    "t": 50,
-                                  },
-                                  "showlegend": true,
-                                },
-                              },
-                            },
+                                    "config": Object {
+                                      "displaylogo": false,
+                                      "responsive": true,
+                                    },
+                                    "isUniColor": false,
+                                    "layout": Object {
+                                      "height": 1180,
+                                      "legend": Object {
+                                        "orientation": "v",
+                                        "traceorder": "normal",
+                                      },
+                                      "margin": Object {
+                                        "b": 30,
+                                        "l": 60,
+                                        "pad": 0,
+                                        "r": 30,
+                                        "t": 50,
+                                      },
+                                      "showlegend": true,
+                                    },
+                                  }
+                                }
+                              >
+                                <span
+                                  className="euiBadge__content"
+                                >
+                                  <span
+                                    className="euiBadge__text"
+                                  >
+                                    Bar
+                                  </span>
+                                  <EuiIcon
+                                    className="euiBadge__icon"
+                                    color="inherit"
+                                    size="s"
+                                    type="visBarVerticalStacked"
+                                  >
+                                    <EuiIconEmpty
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiBadge__icon"
+                                      focusable="false"
+                                      role="img"
+                                      style={null}
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiBadge__icon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      />
+                                    </EuiIconEmpty>
+                                  </EuiIcon>
+                                </span>
+                              </span>
+                            </EuiInnerText>
+                          </EuiBadge>
+                        </EuiComboBoxPill>
+                        <AutosizeInput
+                          aria-controls=""
+                          className="euiComboBox__input"
+                          data-test-subj="comboBoxSearchInput"
+                          injectStyles={true}
+                          inputRef={[Function]}
+                          minWidth={1}
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          role="textbox"
+                          style={
+                            Object {
+                              "fontSize": 14,
+                            }
                           }
-                        }
-                      />,
-                      "id": "availability-panel",
-                      "name": "Availability",
-                    },
-                  ]
-                }
-              >
-                <div
-                  className="vis-config-tabs"
-                >
-                  <EuiTabs
-                    onFocus={[Function]}
-                  >
-                    <div
-                      className="euiTabs"
-                      onFocus={[Function]}
-                      role="tablist"
-                    >
-                      <EuiTab
-                        aria-controls="random_html_id"
-                        id="data-panel"
-                        isSelected={true}
-                        key="data-panel"
-                        onClick={[Function]}
-                      >
-                        <button
-                          aria-controls="random_html_id"
-                          aria-selected={true}
-                          className="euiTab euiTab-isSelected"
-                          disabled={false}
-                          id="data-panel"
-                          onClick={[Function]}
-                          role="tab"
-                          type="button"
-                        >
-                          <span
-                            className="euiTab__content"
-                          >
-                            Data
-                          </span>
-                        </button>
-                      </EuiTab>
-                      <EuiTab
-                        aria-controls="random_html_id"
-                        id="style-panel"
-                        isSelected={false}
-                        key="style-panel"
-                        onClick={[Function]}
-                      >
-                        <button
-                          aria-controls="random_html_id"
-                          aria-selected={false}
-                          className="euiTab"
-                          disabled={false}
-                          id="style-panel"
-                          onClick={[Function]}
-                          role="tab"
-                          type="button"
+                          value=""
                         >
-                          <span
-                            className="euiTab__content"
+                          <div
+                            className="euiComboBox__input"
+                            style={
+                              Object {
+                                "display": "inline-block",
+                                "fontSize": 14,
+                              }
+                            }
                           >
-                            Layout
-                          </span>
-                        </button>
-                      </EuiTab>
-                      <EuiTab
-                        aria-controls="random_html_id"
-                        id="availability-panel"
-                        isSelected={false}
-                        key="availability-panel"
-                        onClick={[Function]}
+                            <input
+                              aria-controls=""
+                              data-test-subj="comboBoxSearchInput"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              role="textbox"
+                              style={
+                                Object {
+                                  "boxSizing": "content-box",
+                                  "width": "2px",
+                                }
+                              }
+                              value=""
+                            />
+                            <div
+                              style={
+                                Object {
+                                  "height": 0,
+                                  "left": 0,
+                                  "overflow": "scroll",
+                                  "position": "absolute",
+                                  "top": 0,
+                                  "visibility": "hidden",
+                                  "whiteSpace": "pre",
+                                }
+                              }
+                            />
+                          </div>
+                        </AutosizeInput>
+                      </div>
+                      <EuiFormControlLayoutIcons
+                        compressed={false}
+                        icon={
+                          Object {
+                            "aria-label": "Open list of options",
+                            "data-test-subj": "comboBoxToggleListButton",
+                            "disabled": undefined,
+                            "onClick": [Function],
+                            "ref": [Function],
+                            "side": "right",
+                            "type": "arrowDown",
+                          }
+                        }
                       >
-                        <button
-                          aria-controls="random_html_id"
-                          aria-selected={false}
-                          className="euiTab"
-                          disabled={false}
-                          id="availability-panel"
-                          onClick={[Function]}
-                          role="tab"
-                          type="button"
+                        <div
+                          className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                         >
-                          <span
-                            className="euiTab__content"
+                          <EuiFormControlLayoutCustomIcon
+                            aria-label="Open list of options"
+                            data-test-subj="comboBoxToggleListButton"
+                            iconRef={[Function]}
+                            onClick={[Function]}
+                            size="m"
+                            type="arrowDown"
                           >
-                            Availability
-                          </span>
-                        </button>
-                      </EuiTab>
+                            <button
+                              aria-label="Open list of options"
+                              className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                              data-test-subj="comboBoxToggleListButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiFormControlLayoutCustomIcon__icon"
+                                size="m"
+                                type="arrowDown"
+                              >
+                                <EuiIconEmpty
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                  focusable="false"
+                                  role="img"
+                                  style={null}
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </EuiIconEmpty>
+                              </EuiIcon>
+                            </button>
+                          </EuiFormControlLayoutCustomIcon>
+                        </div>
+                      </EuiFormControlLayoutIcons>
                     </div>
-                  </EuiTabs>
-                  <div
-                    aria-labelledby="data-panel"
-                    id="random_html_id"
-                    role="tabpanel"
-                  >
-                    <VizDataPanel
+                  </div>
+                </EuiFormControlLayout>
+              </EuiComboBoxInput>
+            </div>
+          </EuiComboBox>
+          <EuiSpacer
+            size="xs"
+          >
+            <div
+              className="euiSpacer euiSpacer--xs"
+            />
+          </EuiSpacer>
+        </div>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <div
+          className="euiFlexItem"
+        >
+          <EuiPanel
+            className="configPane_options"
+            paddingSize="s"
+          >
+            <div
+              className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow configPane_options"
+            >
+              <EuiTabbedContent
+                autoFocus="initial"
+                className="vis-config-tabs"
+                onTabClick={[Function]}
+                selectedTab={
+                  Object {
+                    "content": <VizDataPanel
                       curVisId="bar"
                       onConfigChange={[Function]}
                       tabProps={
@@ -6110,26 +4375,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           "mapTo": "dataConfig",
                           "name": "Data",
                           "sections": Array [
-                            Object {
-                              "editor": [Function],
-                              "id": "value_options",
-                              "mapTo": "valueOptions",
-                              "name": "Value options",
-                              "schemas": Array [
-                                Object {
-                                  "component": null,
-                                  "isSingleSelection": false,
-                                  "mapTo": "xaxis",
-                                  "name": "X-axis",
-                                },
-                                Object {
-                                  "component": null,
-                                  "isSingleSelection": false,
-                                  "mapTo": "yaxis",
-                                  "name": "Y-axis",
-                                },
-                              ],
-                            },
                             Object {
                               "editor": [Function],
                               "id": "legend",
@@ -6238,6 +4483,12 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                     ],
                                   },
                                 },
+                                Object {
+                                  "component": [Function],
+                                  "eleType": "input",
+                                  "mapTo": "labelSize",
+                                  "name": "Label Size",
+                                },
                                 Object {
                                   "component": [Function],
                                   "defaultState": 0,
@@ -6262,1320 +4513,2498 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                         "value": 0,
                                       },
                                       Object {
-                                        "label": "45°",
-                                        "value": 45,
-                                      },
-                                      Object {
-                                        "label": "90°",
-                                        "value": 90,
-                                      },
-                                    ],
-                                  },
-                                },
-                                Object {
-                                  "component": [Function],
-                                  "defaultState": 0.7,
-                                  "eleType": "slider",
-                                  "mapTo": "groupWidth",
-                                  "name": "Group width",
-                                  "props": Object {
-                                    "max": 1,
-                                    "step": 0.01,
-                                  },
-                                },
-                                Object {
-                                  "component": [Function],
-                                  "defaultState": 0.97,
-                                  "eleType": "slider",
-                                  "mapTo": "barWidth",
-                                  "name": "Bar width",
-                                  "props": Object {
-                                    "max": 1,
-                                    "step": 0.01,
-                                  },
-                                },
-                                Object {
-                                  "component": [Function],
-                                  "defaultState": 1,
-                                  "eleType": "slider",
-                                  "mapTo": "lineWidth",
-                                  "name": "Line width",
-                                  "props": Object {
-                                    "max": 10,
-                                  },
-                                },
-                                Object {
-                                  "component": [Function],
-                                  "defaultState": 80,
-                                  "eleType": "slider",
-                                  "mapTo": "fillOpacity",
-                                  "name": "Fill Opacity",
-                                  "props": Object {
-                                    "max": 100,
-                                  },
-                                },
-                              ],
-                            },
-                            Object {
-                              "editor": [Function],
-                              "id": "color-theme",
-                              "mapTo": "colorTheme",
-                              "name": "Color Theme",
-                              "schemas": Array [],
-                            },
-                          ],
-                        }
-                      }
-                      visualizations={
-                        Object {
-                          "data": Object {
-                            "appData": Object {
-                              "fromApp": false,
-                            },
-                            "defaultAxes": Object {},
-                            "indexFields": Object {
-                              "availableFields": Array [
-                                Object {
-                                  "name": "agent",
-                                  "type": "string",
-                                },
-                                Object {
-                                  "name": "bytes",
-                                  "type": "long",
-                                },
-                                Object {
-                                  "name": "clientip",
-                                  "type": "ip",
-                                },
-                                Object {
-                                  "name": "event",
-                                  "type": "struct",
-                                },
-                                Object {
-                                  "name": "extension",
-                                  "type": "string",
-                                },
-                                Object {
-                                  "name": "geo",
-                                  "type": "struct",
-                                },
-                                Object {
-                                  "name": "host",
-                                  "type": "string",
-                                },
-                                Object {
-                                  "name": "index",
-                                  "type": "string",
-                                },
-                                Object {
-                                  "name": "ip",
-                                  "type": "ip",
-                                },
-                                Object {
-                                  "name": "machine",
-                                  "type": "struct",
-                                },
-                                Object {
-                                  "name": "memory",
-                                  "type": "double",
-                                },
-                                Object {
-                                  "name": "message",
-                                  "type": "string",
-                                },
-                                Object {
-                                  "name": "phpmemory",
-                                  "type": "long",
-                                },
-                                Object {
-                                  "name": "referer",
-                                  "type": "string",
-                                },
-                                Object {
-                                  "name": "request",
-                                  "type": "string",
-                                },
-                                Object {
-                                  "name": "response",
-                                  "type": "string",
-                                },
-                                Object {
-                                  "name": "tags",
-                                  "type": "string",
-                                },
-                                Object {
-                                  "name": "timestamp",
-                                  "type": "timestamp",
-                                },
-                                Object {
-                                  "name": "url",
-                                  "type": "string",
-                                },
-                                Object {
-                                  "name": "utc_time",
-                                  "type": "timestamp",
-                                },
-                              ],
-                              "queriedFields": Array [
-                                Object {
-                                  "name": "double_per_ip_bytes",
-                                  "type": "long",
-                                },
-                                Object {
-                                  "name": "host",
-                                  "type": "text",
-                                },
-                                Object {
-                                  "name": "ip_count",
-                                  "type": "integer",
-                                },
-                                Object {
-                                  "name": "per_ip_bytes",
-                                  "type": "long",
-                                },
-                                Object {
-                                  "name": "resp_code",
-                                  "type": "text",
-                                },
-                                Object {
-                                  "name": "sum_bytes",
-                                  "type": "long",
-                                },
-                              ],
-                              "selectedFields": Array [],
-                              "unselectedFields": Array [],
-                            },
-                            "query": Object {},
-                            "rawVizData": Object {
-                              "data": Object {
-                                "count()": Array [
-                                  154,
-                                  1753,
-                                  116,
-                                  468,
-                                  1964,
-                                  219,
-                                ],
-                                "tags": Array [
-                                  "error",
-                                  "info",
-                                  "login",
-                                  "security",
-                                  "success",
-                                  "warning",
-                                ],
-                              },
-                              "jsonData": Array [
-                                Object {
-                                  "count()": 154,
-                                  "tags": "error",
-                                },
-                                Object {
-                                  "count()": 1753,
-                                  "tags": "info",
-                                },
-                                Object {
-                                  "count()": 116,
-                                  "tags": "login",
-                                },
-                                Object {
-                                  "count()": 468,
-                                  "tags": "security",
-                                },
-                                Object {
-                                  "count()": 1964,
-                                  "tags": "success",
-                                },
-                                Object {
-                                  "count()": 219,
-                                  "tags": "warning",
-                                },
-                              ],
-                              "metadata": Object {
-                                "fields": Array [
-                                  Object {
-                                    "name": "count()",
-                                    "type": "integer",
-                                  },
-                                  Object {
-                                    "name": "tags",
-                                    "type": "text",
-                                  },
-                                ],
-                                "size": 6,
-                                "status": 200,
-                              },
-                            },
-                            "userConfigs": Object {},
-                          },
-                          "vis": Object {
-                            "barWidth": 0.97,
-                            "category": "Visualizations",
-                            "categoryAxis": "xaxis",
-                            "component": [Function],
-                            "editorConfig": Object {
-                              "panelTabs": Array [
+                                        "label": "45°",
+                                        "value": 45,
+                                      },
+                                      Object {
+                                        "label": "90°",
+                                        "value": 90,
+                                      },
+                                    ],
+                                  },
+                                },
                                 Object {
-                                  "editor": [Function],
-                                  "id": "data-panel",
-                                  "mapTo": "dataConfig",
-                                  "name": "Data",
-                                  "sections": Array [
-                                    Object {
-                                      "editor": [Function],
-                                      "id": "value_options",
-                                      "mapTo": "valueOptions",
-                                      "name": "Value options",
-                                      "schemas": Array [
-                                        Object {
-                                          "component": null,
-                                          "isSingleSelection": false,
-                                          "mapTo": "xaxis",
-                                          "name": "X-axis",
-                                        },
-                                        Object {
-                                          "component": null,
-                                          "isSingleSelection": false,
-                                          "mapTo": "yaxis",
-                                          "name": "Y-axis",
-                                        },
-                                      ],
-                                    },
-                                    Object {
-                                      "editor": [Function],
-                                      "id": "legend",
-                                      "mapTo": "legend",
-                                      "name": "Legend",
-                                      "schemas": Array [
-                                        Object {
-                                          "component": null,
-                                          "mapTo": "showLegend",
-                                          "name": "Show Legend",
-                                          "props": Object {
-                                            "defaultSelections": Array [
-                                              Object {
-                                                "id": "show",
-                                                "name": "Show",
-                                              },
-                                            ],
-                                            "options": Array [
-                                              Object {
-                                                "id": "show",
-                                                "name": "Show",
-                                              },
-                                              Object {
-                                                "id": "hidden",
-                                                "name": "Hidden",
-                                              },
-                                            ],
-                                          },
-                                        },
-                                        Object {
-                                          "component": null,
-                                          "mapTo": "position",
-                                          "name": "Position",
-                                          "props": Object {
-                                            "defaultSelections": Array [
-                                              Object {
-                                                "id": "v",
-                                                "name": "Right",
-                                              },
-                                            ],
-                                            "options": Array [
-                                              Object {
-                                                "id": "v",
-                                                "name": "Right",
-                                              },
-                                              Object {
-                                                "id": "h",
-                                                "name": "Bottom",
-                                              },
-                                            ],
-                                          },
-                                        },
-                                      ],
-                                    },
-                                    Object {
-                                      "editor": [Function],
-                                      "id": "chart_styles",
-                                      "mapTo": "chartStyles",
-                                      "name": "Chart styles",
-                                      "schemas": Array [
-                                        Object {
-                                          "component": [Function],
-                                          "eleType": "buttons",
-                                          "mapTo": "orientation",
-                                          "name": "Orientation",
-                                          "props": Object {
-                                            "defaultSelections": Array [
-                                              Object {
-                                                "id": "v",
-                                                "name": "Vertical",
-                                              },
-                                            ],
-                                            "options": Array [
-                                              Object {
-                                                "id": "v",
-                                                "name": "Vertical",
-                                              },
-                                              Object {
-                                                "id": "h",
-                                                "name": "Horizontal",
-                                              },
-                                            ],
-                                          },
-                                        },
-                                        Object {
-                                          "component": [Function],
-                                          "eleType": "buttons",
-                                          "mapTo": "mode",
-                                          "name": "Mode",
-                                          "props": Object {
-                                            "defaultSelections": Array [
-                                              Object {
-                                                "id": "group",
-                                                "name": "Group",
-                                              },
-                                            ],
-                                            "options": Array [
-                                              Object {
-                                                "id": "group",
-                                                "name": "Group",
-                                              },
-                                              Object {
-                                                "id": "stack",
-                                                "name": "Stack",
-                                              },
-                                            ],
-                                          },
-                                        },
-                                        Object {
-                                          "component": [Function],
-                                          "defaultState": 0,
-                                          "eleType": "slider",
-                                          "mapTo": "rotateBarLabels",
-                                          "name": "Rotate bar labels",
-                                          "props": Object {
-                                            "max": 90,
-                                            "min": -90,
-                                            "showTicks": true,
-                                            "ticks": Array [
-                                              Object {
-                                                "label": "-90°",
-                                                "value": -90,
-                                              },
-                                              Object {
-                                                "label": "-45°",
-                                                "value": -45,
-                                              },
-                                              Object {
-                                                "label": "0°",
-                                                "value": 0,
-                                              },
-                                              Object {
-                                                "label": "45°",
-                                                "value": 45,
-                                              },
-                                              Object {
-                                                "label": "90°",
-                                                "value": 90,
-                                              },
-                                            ],
-                                          },
-                                        },
-                                        Object {
-                                          "component": [Function],
-                                          "defaultState": 0.7,
-                                          "eleType": "slider",
-                                          "mapTo": "groupWidth",
-                                          "name": "Group width",
-                                          "props": Object {
-                                            "max": 1,
-                                            "step": 0.01,
-                                          },
-                                        },
-                                        Object {
-                                          "component": [Function],
-                                          "defaultState": 0.97,
-                                          "eleType": "slider",
-                                          "mapTo": "barWidth",
-                                          "name": "Bar width",
-                                          "props": Object {
-                                            "max": 1,
-                                            "step": 0.01,
-                                          },
-                                        },
-                                        Object {
-                                          "component": [Function],
-                                          "defaultState": 1,
-                                          "eleType": "slider",
-                                          "mapTo": "lineWidth",
-                                          "name": "Line width",
-                                          "props": Object {
-                                            "max": 10,
-                                          },
-                                        },
-                                        Object {
-                                          "component": [Function],
-                                          "defaultState": 80,
-                                          "eleType": "slider",
-                                          "mapTo": "fillOpacity",
-                                          "name": "Fill Opacity",
-                                          "props": Object {
-                                            "max": 100,
-                                          },
-                                        },
-                                      ],
-                                    },
-                                    Object {
-                                      "editor": [Function],
-                                      "id": "color-theme",
-                                      "mapTo": "colorTheme",
-                                      "name": "Color Theme",
-                                      "schemas": Array [],
-                                    },
-                                  ],
+                                  "component": [Function],
+                                  "defaultState": 0.7,
+                                  "eleType": "slider",
+                                  "mapTo": "groupWidth",
+                                  "name": "Group width",
+                                  "props": Object {
+                                    "max": 1,
+                                    "step": 0.01,
+                                  },
                                 },
                                 Object {
-                                  "content": Array [],
-                                  "editor": [Function],
-                                  "id": "style-panel",
-                                  "mapTo": "layoutConfig",
-                                  "name": "Layout",
+                                  "component": [Function],
+                                  "defaultState": 0.97,
+                                  "eleType": "slider",
+                                  "mapTo": "barWidth",
+                                  "name": "Bar width",
+                                  "props": Object {
+                                    "max": 1,
+                                    "step": 0.01,
+                                  },
                                 },
                                 Object {
-                                  "editor": [Function],
-                                  "id": "availability-panel",
-                                  "mapTo": "availabilityConfig",
-                                  "name": "Availability",
+                                  "component": [Function],
+                                  "defaultState": 1,
+                                  "eleType": "slider",
+                                  "mapTo": "lineWidth",
+                                  "name": "Line width",
+                                  "props": Object {
+                                    "max": 10,
+                                  },
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "defaultState": 80,
+                                  "eleType": "slider",
+                                  "mapTo": "fillOpacity",
+                                  "name": "Fill Opacity",
+                                  "props": Object {
+                                    "max": 100,
+                                  },
                                 },
                               ],
                             },
-                            "fillOpacity": 80,
-                            "fullLabel": "Bar",
-                            "groupWidth": 0.7,
-                            "icon": [Function],
-                            "iconType": "visBarVerticalStacked",
-                            "id": "bar",
-                            "label": "Bar",
-                            "labelAngle": 0,
-                            "legendPosition": "v",
-                            "lineWidth": 1,
-                            "mode": "group",
-                            "name": "bar",
-                            "orientation": "v",
-                            "selection": Object {
-                              "dataLoss": "nothing",
-                            },
-                            "seriesAxis": "yaxis",
-                            "showLegend": "show",
-                            "type": "bar",
-                            "visConfig": Object {
-                              "config": Object {
-                                "displaylogo": false,
-                                "responsive": true,
-                              },
-                              "isUniColor": false,
-                              "layout": Object {
-                                "height": 500,
-                                "legend": Object {
-                                  "orientation": "v",
-                                  "traceorder": "normal",
-                                },
-                                "margin": Object {
-                                  "b": 30,
-                                  "l": 60,
-                                  "pad": 0,
-                                  "r": 30,
-                                  "t": 50,
-                                },
-                                "showlegend": true,
-                              },
+                            Object {
+                              "editor": [Function],
+                              "id": "color-theme",
+                              "mapTo": "colorTheme",
+                              "name": "Color Theme",
+                              "schemas": Array [],
                             },
-                          },
+                          ],
                         }
                       }
-                      vizState={
+                      visualizations={
                         Object {
-                          "valueOptions": Object {},
-                        }
-                      }
-                    >
-                      <div
-                        className="visEditorSidebar__config"
-                      >
-                        <EuiForm
-                          className="visEditorSidebar__form"
-                        >
-                          <div
-                            className="euiForm visEditorSidebar__form"
-                          >
-                            <EuiFormRow
-                              describedByIds={Array []}
-                              display="row"
-                              fullWidth={false}
-                              hasChildLabel={true}
-                              hasEmptyLabelSpace={false}
-                              labelType="label"
-                            >
-                              <div
-                                className="euiFormRow"
-                                id="random_html_id-row"
-                              >
-                                <div
-                                  className="euiFormRow__fieldWrapper"
-                                >
-                                  <ConfigPanelOptions
-                                    handleConfigChange={[Function]}
-                                    id="random_html_id"
-                                    onBlur={[Function]}
-                                    onFocus={[Function]}
-                                    visualizations={
-                                      Object {
-                                        "data": Object {
-                                          "appData": Object {
-                                            "fromApp": false,
-                                          },
-                                          "defaultAxes": Object {},
-                                          "indexFields": Object {
-                                            "availableFields": Array [
-                                              Object {
-                                                "name": "agent",
-                                                "type": "string",
-                                              },
-                                              Object {
-                                                "name": "bytes",
-                                                "type": "long",
-                                              },
-                                              Object {
-                                                "name": "clientip",
-                                                "type": "ip",
-                                              },
-                                              Object {
-                                                "name": "event",
-                                                "type": "struct",
-                                              },
-                                              Object {
-                                                "name": "extension",
-                                                "type": "string",
-                                              },
-                                              Object {
-                                                "name": "geo",
-                                                "type": "struct",
-                                              },
-                                              Object {
-                                                "name": "host",
-                                                "type": "string",
-                                              },
-                                              Object {
-                                                "name": "index",
-                                                "type": "string",
-                                              },
-                                              Object {
-                                                "name": "ip",
-                                                "type": "ip",
-                                              },
-                                              Object {
-                                                "name": "machine",
-                                                "type": "struct",
-                                              },
-                                              Object {
-                                                "name": "memory",
-                                                "type": "double",
-                                              },
-                                              Object {
-                                                "name": "message",
-                                                "type": "string",
-                                              },
-                                              Object {
-                                                "name": "phpmemory",
-                                                "type": "long",
-                                              },
-                                              Object {
-                                                "name": "referer",
-                                                "type": "string",
-                                              },
-                                              Object {
-                                                "name": "request",
-                                                "type": "string",
-                                              },
-                                              Object {
-                                                "name": "response",
-                                                "type": "string",
-                                              },
-                                              Object {
-                                                "name": "tags",
-                                                "type": "string",
-                                              },
-                                              Object {
-                                                "name": "timestamp",
-                                                "type": "timestamp",
-                                              },
-                                              Object {
-                                                "name": "url",
-                                                "type": "string",
-                                              },
+                          "data": Object {
+                            "appData": Object {
+                              "fromApp": false,
+                            },
+                            "defaultAxes": Object {},
+                            "indexFields": Object {
+                              "availableFields": Array [
+                                Object {
+                                  "name": "agent",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "bytes",
+                                  "type": "long",
+                                },
+                                Object {
+                                  "name": "clientip",
+                                  "type": "ip",
+                                },
+                                Object {
+                                  "name": "event",
+                                  "type": "struct",
+                                },
+                                Object {
+                                  "name": "extension",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "geo",
+                                  "type": "struct",
+                                },
+                                Object {
+                                  "name": "host",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "index",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "ip",
+                                  "type": "ip",
+                                },
+                                Object {
+                                  "name": "machine",
+                                  "type": "struct",
+                                },
+                                Object {
+                                  "name": "memory",
+                                  "type": "double",
+                                },
+                                Object {
+                                  "name": "message",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "phpmemory",
+                                  "type": "long",
+                                },
+                                Object {
+                                  "name": "referer",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "request",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "response",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "tags",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "timestamp",
+                                  "type": "timestamp",
+                                },
+                                Object {
+                                  "name": "url",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "utc_time",
+                                  "type": "timestamp",
+                                },
+                              ],
+                              "queriedFields": Array [
+                                Object {
+                                  "name": "double_per_ip_bytes",
+                                  "type": "long",
+                                },
+                                Object {
+                                  "name": "host",
+                                  "type": "text",
+                                },
+                                Object {
+                                  "name": "ip_count",
+                                  "type": "integer",
+                                },
+                                Object {
+                                  "name": "per_ip_bytes",
+                                  "type": "long",
+                                },
+                                Object {
+                                  "name": "resp_code",
+                                  "type": "text",
+                                },
+                                Object {
+                                  "name": "sum_bytes",
+                                  "type": "long",
+                                },
+                              ],
+                              "selectedFields": Array [],
+                              "unselectedFields": Array [],
+                            },
+                            "query": Object {},
+                            "rawVizData": Object {
+                              "data": Object {
+                                "count()": Array [
+                                  154,
+                                  1753,
+                                  116,
+                                  468,
+                                  1964,
+                                  219,
+                                ],
+                                "tags": Array [
+                                  "error",
+                                  "info",
+                                  "login",
+                                  "security",
+                                  "success",
+                                  "warning",
+                                ],
+                              },
+                              "jsonData": Array [
+                                Object {
+                                  "count()": 154,
+                                  "tags": "error",
+                                },
+                                Object {
+                                  "count()": 1753,
+                                  "tags": "info",
+                                },
+                                Object {
+                                  "count()": 116,
+                                  "tags": "login",
+                                },
+                                Object {
+                                  "count()": 468,
+                                  "tags": "security",
+                                },
+                                Object {
+                                  "count()": 1964,
+                                  "tags": "success",
+                                },
+                                Object {
+                                  "count()": 219,
+                                  "tags": "warning",
+                                },
+                              ],
+                              "metadata": Object {
+                                "fields": Array [
+                                  Object {
+                                    "name": "count()",
+                                    "type": "integer",
+                                  },
+                                  Object {
+                                    "name": "tags",
+                                    "type": "text",
+                                  },
+                                ],
+                                "size": 6,
+                                "status": 200,
+                              },
+                            },
+                            "userConfigs": Object {},
+                          },
+                          "vis": Object {
+                            "barWidth": 0.97,
+                            "category": "Visualizations",
+                            "categoryAxis": "xaxis",
+                            "component": [Function],
+                            "editorConfig": Object {
+                              "panelTabs": Array [
+                                Object {
+                                  "editor": [Function],
+                                  "id": "data-panel",
+                                  "mapTo": "dataConfig",
+                                  "name": "Data",
+                                  "sections": Array [
+                                    Object {
+                                      "editor": [Function],
+                                      "id": "legend",
+                                      "mapTo": "legend",
+                                      "name": "Legend",
+                                      "schemas": Array [
+                                        Object {
+                                          "component": null,
+                                          "mapTo": "showLegend",
+                                          "name": "Show Legend",
+                                          "props": Object {
+                                            "defaultSelections": Array [
                                               Object {
-                                                "name": "utc_time",
-                                                "type": "timestamp",
+                                                "id": "show",
+                                                "name": "Show",
                                               },
                                             ],
-                                            "queriedFields": Array [
-                                              Object {
-                                                "name": "double_per_ip_bytes",
-                                                "type": "long",
-                                              },
-                                              Object {
-                                                "name": "host",
-                                                "type": "text",
-                                              },
-                                              Object {
-                                                "name": "ip_count",
-                                                "type": "integer",
-                                              },
-                                              Object {
-                                                "name": "per_ip_bytes",
-                                                "type": "long",
-                                              },
+                                            "options": Array [
                                               Object {
-                                                "name": "resp_code",
-                                                "type": "text",
+                                                "id": "show",
+                                                "name": "Show",
                                               },
                                               Object {
-                                                "name": "sum_bytes",
-                                                "type": "long",
+                                                "id": "hidden",
+                                                "name": "Hidden",
                                               },
                                             ],
-                                            "selectedFields": Array [],
-                                            "unselectedFields": Array [],
                                           },
-                                          "query": Object {},
-                                          "rawVizData": Object {
-                                            "data": Object {
-                                              "count()": Array [
-                                                154,
-                                                1753,
-                                                116,
-                                                468,
-                                                1964,
-                                                219,
-                                              ],
-                                              "tags": Array [
-                                                "error",
-                                                "info",
-                                                "login",
-                                                "security",
-                                                "success",
-                                                "warning",
-                                              ],
-                                            },
-                                            "jsonData": Array [
+                                        },
+                                        Object {
+                                          "component": null,
+                                          "mapTo": "position",
+                                          "name": "Position",
+                                          "props": Object {
+                                            "defaultSelections": Array [
                                               Object {
-                                                "count()": 154,
-                                                "tags": "error",
+                                                "id": "v",
+                                                "name": "Right",
                                               },
+                                            ],
+                                            "options": Array [
                                               Object {
-                                                "count()": 1753,
-                                                "tags": "info",
+                                                "id": "v",
+                                                "name": "Right",
                                               },
                                               Object {
-                                                "count()": 116,
-                                                "tags": "login",
+                                                "id": "h",
+                                                "name": "Bottom",
                                               },
+                                            ],
+                                          },
+                                        },
+                                      ],
+                                    },
+                                    Object {
+                                      "editor": [Function],
+                                      "id": "chart_styles",
+                                      "mapTo": "chartStyles",
+                                      "name": "Chart styles",
+                                      "schemas": Array [
+                                        Object {
+                                          "component": [Function],
+                                          "eleType": "buttons",
+                                          "mapTo": "orientation",
+                                          "name": "Orientation",
+                                          "props": Object {
+                                            "defaultSelections": Array [
                                               Object {
-                                                "count()": 468,
-                                                "tags": "security",
+                                                "id": "v",
+                                                "name": "Vertical",
                                               },
+                                            ],
+                                            "options": Array [
                                               Object {
-                                                "count()": 1964,
-                                                "tags": "success",
+                                                "id": "v",
+                                                "name": "Vertical",
                                               },
                                               Object {
-                                                "count()": 219,
-                                                "tags": "warning",
+                                                "id": "h",
+                                                "name": "Horizontal",
+                                              },
+                                            ],
+                                          },
+                                        },
+                                        Object {
+                                          "component": [Function],
+                                          "eleType": "buttons",
+                                          "mapTo": "mode",
+                                          "name": "Mode",
+                                          "props": Object {
+                                            "defaultSelections": Array [
+                                              Object {
+                                                "id": "group",
+                                                "name": "Group",
+                                              },
+                                            ],
+                                            "options": Array [
+                                              Object {
+                                                "id": "group",
+                                                "name": "Group",
+                                              },
+                                              Object {
+                                                "id": "stack",
+                                                "name": "Stack",
                                               },
                                             ],
-                                            "metadata": Object {
-                                              "fields": Array [
-                                                Object {
-                                                  "name": "count()",
-                                                  "type": "integer",
-                                                },
-                                                Object {
-                                                  "name": "tags",
-                                                  "type": "text",
-                                                },
-                                              ],
-                                              "size": 6,
-                                              "status": 200,
-                                            },
                                           },
-                                          "userConfigs": Object {},
                                         },
-                                        "vis": Object {
-                                          "barWidth": 0.97,
-                                          "category": "Visualizations",
-                                          "categoryAxis": "xaxis",
+                                        Object {
                                           "component": [Function],
-                                          "editorConfig": Object {
-                                            "panelTabs": Array [
+                                          "eleType": "input",
+                                          "mapTo": "labelSize",
+                                          "name": "Label Size",
+                                        },
+                                        Object {
+                                          "component": [Function],
+                                          "defaultState": 0,
+                                          "eleType": "slider",
+                                          "mapTo": "rotateBarLabels",
+                                          "name": "Rotate bar labels",
+                                          "props": Object {
+                                            "max": 90,
+                                            "min": -90,
+                                            "showTicks": true,
+                                            "ticks": Array [
                                               Object {
-                                                "editor": [Function],
-                                                "id": "data-panel",
-                                                "mapTo": "dataConfig",
-                                                "name": "Data",
-                                                "sections": Array [
-                                                  Object {
-                                                    "editor": [Function],
-                                                    "id": "value_options",
-                                                    "mapTo": "valueOptions",
-                                                    "name": "Value options",
-                                                    "schemas": Array [
-                                                      Object {
-                                                        "component": null,
-                                                        "isSingleSelection": false,
-                                                        "mapTo": "xaxis",
-                                                        "name": "X-axis",
-                                                      },
-                                                      Object {
-                                                        "component": null,
-                                                        "isSingleSelection": false,
-                                                        "mapTo": "yaxis",
-                                                        "name": "Y-axis",
-                                                      },
-                                                    ],
-                                                  },
-                                                  Object {
-                                                    "editor": [Function],
-                                                    "id": "legend",
-                                                    "mapTo": "legend",
-                                                    "name": "Legend",
-                                                    "schemas": Array [
-                                                      Object {
-                                                        "component": null,
-                                                        "mapTo": "showLegend",
-                                                        "name": "Show Legend",
-                                                        "props": Object {
-                                                          "defaultSelections": Array [
-                                                            Object {
-                                                              "id": "show",
-                                                              "name": "Show",
-                                                            },
-                                                          ],
-                                                          "options": Array [
-                                                            Object {
-                                                              "id": "show",
-                                                              "name": "Show",
-                                                            },
-                                                            Object {
-                                                              "id": "hidden",
-                                                              "name": "Hidden",
-                                                            },
-                                                          ],
-                                                        },
-                                                      },
-                                                      Object {
-                                                        "component": null,
-                                                        "mapTo": "position",
-                                                        "name": "Position",
-                                                        "props": Object {
-                                                          "defaultSelections": Array [
-                                                            Object {
-                                                              "id": "v",
-                                                              "name": "Right",
-                                                            },
-                                                          ],
-                                                          "options": Array [
-                                                            Object {
-                                                              "id": "v",
-                                                              "name": "Right",
-                                                            },
-                                                            Object {
-                                                              "id": "h",
-                                                              "name": "Bottom",
-                                                            },
-                                                          ],
-                                                        },
-                                                      },
-                                                    ],
-                                                  },
-                                                  Object {
-                                                    "editor": [Function],
-                                                    "id": "chart_styles",
-                                                    "mapTo": "chartStyles",
-                                                    "name": "Chart styles",
-                                                    "schemas": Array [
-                                                      Object {
-                                                        "component": [Function],
-                                                        "eleType": "buttons",
-                                                        "mapTo": "orientation",
-                                                        "name": "Orientation",
-                                                        "props": Object {
-                                                          "defaultSelections": Array [
-                                                            Object {
-                                                              "id": "v",
-                                                              "name": "Vertical",
-                                                            },
-                                                          ],
-                                                          "options": Array [
-                                                            Object {
-                                                              "id": "v",
-                                                              "name": "Vertical",
-                                                            },
-                                                            Object {
-                                                              "id": "h",
-                                                              "name": "Horizontal",
-                                                            },
-                                                          ],
-                                                        },
-                                                      },
-                                                      Object {
-                                                        "component": [Function],
-                                                        "eleType": "buttons",
-                                                        "mapTo": "mode",
-                                                        "name": "Mode",
-                                                        "props": Object {
-                                                          "defaultSelections": Array [
-                                                            Object {
-                                                              "id": "group",
-                                                              "name": "Group",
-                                                            },
-                                                          ],
-                                                          "options": Array [
-                                                            Object {
-                                                              "id": "group",
-                                                              "name": "Group",
-                                                            },
-                                                            Object {
-                                                              "id": "stack",
-                                                              "name": "Stack",
-                                                            },
-                                                          ],
-                                                        },
-                                                      },
-                                                      Object {
-                                                        "component": [Function],
-                                                        "defaultState": 0,
-                                                        "eleType": "slider",
-                                                        "mapTo": "rotateBarLabels",
-                                                        "name": "Rotate bar labels",
-                                                        "props": Object {
-                                                          "max": 90,
-                                                          "min": -90,
-                                                          "showTicks": true,
-                                                          "ticks": Array [
-                                                            Object {
-                                                              "label": "-90°",
-                                                              "value": -90,
-                                                            },
-                                                            Object {
-                                                              "label": "-45°",
-                                                              "value": -45,
-                                                            },
-                                                            Object {
-                                                              "label": "0°",
-                                                              "value": 0,
-                                                            },
-                                                            Object {
-                                                              "label": "45°",
-                                                              "value": 45,
-                                                            },
-                                                            Object {
-                                                              "label": "90°",
-                                                              "value": 90,
-                                                            },
-                                                          ],
-                                                        },
-                                                      },
-                                                      Object {
-                                                        "component": [Function],
-                                                        "defaultState": 0.7,
-                                                        "eleType": "slider",
-                                                        "mapTo": "groupWidth",
-                                                        "name": "Group width",
-                                                        "props": Object {
-                                                          "max": 1,
-                                                          "step": 0.01,
-                                                        },
-                                                      },
-                                                      Object {
-                                                        "component": [Function],
-                                                        "defaultState": 0.97,
-                                                        "eleType": "slider",
-                                                        "mapTo": "barWidth",
-                                                        "name": "Bar width",
-                                                        "props": Object {
-                                                          "max": 1,
-                                                          "step": 0.01,
-                                                        },
-                                                      },
-                                                      Object {
-                                                        "component": [Function],
-                                                        "defaultState": 1,
-                                                        "eleType": "slider",
-                                                        "mapTo": "lineWidth",
-                                                        "name": "Line width",
-                                                        "props": Object {
-                                                          "max": 10,
-                                                        },
-                                                      },
-                                                      Object {
-                                                        "component": [Function],
-                                                        "defaultState": 80,
-                                                        "eleType": "slider",
-                                                        "mapTo": "fillOpacity",
-                                                        "name": "Fill Opacity",
-                                                        "props": Object {
-                                                          "max": 100,
-                                                        },
-                                                      },
-                                                    ],
-                                                  },
-                                                  Object {
-                                                    "editor": [Function],
-                                                    "id": "color-theme",
-                                                    "mapTo": "colorTheme",
-                                                    "name": "Color Theme",
-                                                    "schemas": Array [],
-                                                  },
-                                                ],
+                                                "label": "-90°",
+                                                "value": -90,
                                               },
                                               Object {
-                                                "content": Array [],
-                                                "editor": [Function],
-                                                "id": "style-panel",
-                                                "mapTo": "layoutConfig",
-                                                "name": "Layout",
+                                                "label": "-45°",
+                                                "value": -45,
+                                              },
+                                              Object {
+                                                "label": "0°",
+                                                "value": 0,
                                               },
                                               Object {
-                                                "editor": [Function],
-                                                "id": "availability-panel",
-                                                "mapTo": "availabilityConfig",
-                                                "name": "Availability",
+                                                "label": "45°",
+                                                "value": 45,
+                                              },
+                                              Object {
+                                                "label": "90°",
+                                                "value": 90,
                                               },
                                             ],
                                           },
-                                          "fillOpacity": 80,
-                                          "fullLabel": "Bar",
-                                          "groupWidth": 0.7,
-                                          "icon": [Function],
-                                          "iconType": "visBarVerticalStacked",
-                                          "id": "bar",
-                                          "label": "Bar",
-                                          "labelAngle": 0,
-                                          "legendPosition": "v",
-                                          "lineWidth": 1,
-                                          "mode": "group",
-                                          "name": "bar",
-                                          "orientation": "v",
-                                          "selection": Object {
-                                            "dataLoss": "nothing",
+                                        },
+                                        Object {
+                                          "component": [Function],
+                                          "defaultState": 0.7,
+                                          "eleType": "slider",
+                                          "mapTo": "groupWidth",
+                                          "name": "Group width",
+                                          "props": Object {
+                                            "max": 1,
+                                            "step": 0.01,
                                           },
-                                          "seriesAxis": "yaxis",
-                                          "showLegend": "show",
-                                          "type": "bar",
-                                          "visConfig": Object {
-                                            "config": Object {
-                                              "displaylogo": false,
-                                              "responsive": true,
-                                            },
-                                            "isUniColor": false,
-                                            "layout": Object {
-                                              "height": 500,
-                                              "legend": Object {
-                                                "orientation": "v",
-                                                "traceorder": "normal",
-                                              },
-                                              "margin": Object {
-                                                "b": 30,
-                                                "l": 60,
-                                                "pad": 0,
-                                                "r": 30,
-                                                "t": 50,
-                                              },
-                                              "showlegend": true,
-                                            },
+                                        },
+                                        Object {
+                                          "component": [Function],
+                                          "defaultState": 0.97,
+                                          "eleType": "slider",
+                                          "mapTo": "barWidth",
+                                          "name": "Bar width",
+                                          "props": Object {
+                                            "max": 1,
+                                            "step": 0.01,
+                                          },
+                                        },
+                                        Object {
+                                          "component": [Function],
+                                          "defaultState": 1,
+                                          "eleType": "slider",
+                                          "mapTo": "lineWidth",
+                                          "name": "Line width",
+                                          "props": Object {
+                                            "max": 10,
+                                          },
+                                        },
+                                        Object {
+                                          "component": [Function],
+                                          "defaultState": 80,
+                                          "eleType": "slider",
+                                          "mapTo": "fillOpacity",
+                                          "name": "Fill Opacity",
+                                          "props": Object {
+                                            "max": 100,
                                           },
                                         },
-                                      }
-                                    }
-                                  >
-                                    <EuiAccordion
-                                      arrowDisplay="left"
-                                      buttonContent="Panel options"
-                                      id="configPanel__panelOptions"
-                                      initialIsOpen={true}
-                                      isLoading={false}
-                                      isLoadingMessage={false}
-                                      paddingSize="s"
-                                    >
-                                      <div
-                                        className="euiAccordion euiAccordion-isOpen"
-                                      >
-                                        <div
-                                          className="euiAccordion__triggerWrapper"
-                                        >
-                                          <button
-                                            aria-controls="configPanel__panelOptions"
-                                            aria-expanded={true}
-                                            className="euiAccordion__button"
-                                            id="random_html_id"
-                                            onClick={[Function]}
-                                            type="button"
-                                          >
-                                            <span
-                                              className="euiAccordion__iconWrapper"
-                                            >
-                                              <EuiIcon
-                                                className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                                size="m"
-                                                type="arrowRight"
-                                              >
-                                                <EuiIconEmpty
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
-                                                    focusable="false"
-                                                    height={16}
-                                                    role="img"
-                                                    style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  />
-                                                </EuiIconEmpty>
-                                              </EuiIcon>
-                                            </span>
-                                            <span
-                                              className="euiIEFlexWrapFix"
-                                            >
-                                              Panel options
-                                            </span>
-                                          </button>
-                                        </div>
-                                        <div
-                                          aria-labelledby="random_html_id"
-                                          className="euiAccordion__childWrapper"
-                                          id="configPanel__panelOptions"
-                                          role="region"
-                                          tabIndex={-1}
-                                        >
-                                          <EuiResizeObserver
-                                            onResize={[Function]}
-                                          >
-                                            <div>
-                                              <div
-                                                className="euiAccordion__padding--s"
-                                              >
-                                                <EuiForm
-                                                  component="form"
-                                                >
-                                                  <form
-                                                    className="euiForm"
-                                                  >
-                                                    <EuiFormRow
-                                                      describedByIds={Array []}
-                                                      display="row"
-                                                      fullWidth={true}
-                                                      hasChildLabel={true}
-                                                      hasEmptyLabelSpace={false}
-                                                      helpText="Name your visualization."
-                                                      label="Title"
-                                                      labelType="label"
-                                                    >
-                                                      <div
-                                                        className="euiFormRow euiFormRow--fullWidth"
-                                                        id="random_html_id-row"
-                                                      >
-                                                        <div
-                                                          className="euiFormRow__labelWrapper"
-                                                        >
-                                                          <EuiFormLabel
-                                                            className="euiFormRow__label"
-                                                            htmlFor="random_html_id"
-                                                            isFocused={false}
-                                                            type="label"
-                                                          >
-                                                            <label
-                                                              className="euiFormLabel euiFormRow__label"
-                                                              htmlFor="random_html_id"
-                                                            >
-                                                              Title
-                                                            </label>
-                                                          </EuiFormLabel>
-                                                        </div>
-                                                        <div
-                                                          className="euiFormRow__fieldWrapper"
-                                                        >
-                                                          <EuiFieldText
-                                                            aria-describedby="random_html_id-help-0"
-                                                            id="random_html_id"
-                                                            name="first"
-                                                            onBlur={[Function]}
-                                                            onChange={[Function]}
-                                                            onFocus={[Function]}
-                                                            placeholder="Title"
-                                                            value=""
-                                                          >
-                                                            <EuiFormControlLayout
-                                                              fullWidth={false}
-                                                              inputId="random_html_id"
-                                                            >
-                                                              <div
-                                                                className="euiFormControlLayout"
-                                                              >
-                                                                <div
-                                                                  className="euiFormControlLayout__childrenWrapper"
-                                                                >
-                                                                  <EuiValidatableControl>
-                                                                    <input
-                                                                      aria-describedby="random_html_id-help-0"
-                                                                      className="euiFieldText"
-                                                                      id="random_html_id"
-                                                                      name="first"
-                                                                      onBlur={[Function]}
-                                                                      onChange={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      placeholder="Title"
-                                                                      type="text"
-                                                                      value=""
-                                                                    />
-                                                                  </EuiValidatableControl>
-                                                                  <EuiFormControlLayoutIcons />
-                                                                </div>
-                                                              </div>
-                                                            </EuiFormControlLayout>
-                                                          </EuiFieldText>
-                                                          <EuiFormHelpText
-                                                            className="euiFormRow__text"
-                                                            id="random_html_id-help-0"
-                                                            key="Name your visualization."
-                                                          >
-                                                            <div
-                                                              className="euiFormHelpText euiFormRow__text"
-                                                              id="random_html_id-help-0"
-                                                            >
-                                                              Name your visualization.
-                                                            </div>
-                                                          </EuiFormHelpText>
-                                                        </div>
-                                                      </div>
-                                                    </EuiFormRow>
-                                                    <EuiFormRow
-                                                      describedByIds={Array []}
-                                                      display="row"
-                                                      fullWidth={false}
-                                                      hasChildLabel={true}
-                                                      hasEmptyLabelSpace={false}
-                                                      label="Description"
-                                                      labelType="label"
-                                                    >
-                                                      <div
-                                                        className="euiFormRow"
-                                                        id="random_html_id-row"
-                                                      >
-                                                        <div
-                                                          className="euiFormRow__labelWrapper"
-                                                        >
-                                                          <EuiFormLabel
-                                                            className="euiFormRow__label"
-                                                            htmlFor="random_html_id"
-                                                            isFocused={false}
-                                                            type="label"
-                                                          >
-                                                            <label
-                                                              className="euiFormLabel euiFormRow__label"
-                                                              htmlFor="random_html_id"
-                                                            >
-                                                              Description
-                                                            </label>
-                                                          </EuiFormLabel>
-                                                        </div>
-                                                        <div
-                                                          className="euiFormRow__fieldWrapper"
-                                                        >
-                                                          <EuiTextArea
-                                                            aria-label="Use aria labels when no actual label is in use"
-                                                            id="random_html_id"
-                                                            onBlur={[Function]}
-                                                            onChange={[Function]}
-                                                            onFocus={[Function]}
-                                                            placeholder="Description"
-                                                            value=""
-                                                          >
-                                                            <EuiValidatableControl>
-                                                              <textarea
-                                                                aria-label="Use aria labels when no actual label is in use"
-                                                                className="euiTextArea euiTextArea--resizeVertical"
-                                                                id="random_html_id"
-                                                                onBlur={[Function]}
-                                                                onChange={[Function]}
-                                                                onFocus={[Function]}
-                                                                placeholder="Description"
-                                                                rows={6}
-                                                                value=""
-                                                              />
-                                                            </EuiValidatableControl>
-                                                          </EuiTextArea>
-                                                        </div>
-                                                      </div>
-                                                    </EuiFormRow>
-                                                  </form>
-                                                </EuiForm>
-                                              </div>
-                                            </div>
-                                          </EuiResizeObserver>
-                                        </div>
-                                      </div>
-                                    </EuiAccordion>
-                                  </ConfigPanelOptions>
-                                </div>
-                              </div>
-                            </EuiFormRow>
+                                      ],
+                                    },
+                                    Object {
+                                      "editor": [Function],
+                                      "id": "color-theme",
+                                      "mapTo": "colorTheme",
+                                      "name": "Color Theme",
+                                      "schemas": Array [],
+                                    },
+                                  ],
+                                },
+                                Object {
+                                  "content": Array [],
+                                  "editor": [Function],
+                                  "id": "style-panel",
+                                  "mapTo": "layoutConfig",
+                                  "name": "Layout",
+                                },
+                                Object {
+                                  "editor": [Function],
+                                  "id": "availability-panel",
+                                  "mapTo": "availabilityConfig",
+                                  "name": "Availability",
+                                },
+                              ],
+                            },
+                            "fillOpacity": 80,
+                            "fullLabel": "Bar",
+                            "groupWidth": 0.7,
+                            "icon": [Function],
+                            "iconType": "visBarVerticalStacked",
+                            "id": "bar",
+                            "label": "Bar",
+                            "labelAngle": 0,
+                            "legendPosition": "v",
+                            "lineWidth": 1,
+                            "mode": "group",
+                            "name": "bar",
+                            "orientation": "v",
+                            "selection": Object {
+                              "dataLoss": "nothing",
+                            },
+                            "seriesAxis": "yaxis",
+                            "showLegend": "show",
+                            "type": "bar",
+                            "visConfig": Object {
+                              "config": Object {
+                                "displaylogo": false,
+                                "responsive": true,
+                              },
+                              "isUniColor": false,
+                              "layout": Object {
+                                "height": 1180,
+                                "legend": Object {
+                                  "orientation": "v",
+                                  "traceorder": "normal",
+                                },
+                                "margin": Object {
+                                  "b": 30,
+                                  "l": 60,
+                                  "pad": 0,
+                                  "r": 30,
+                                  "t": 50,
+                                },
+                                "showlegend": true,
+                              },
+                            },
+                          },
+                        }
+                      }
+                      vizState={
+                        Object {
+                          "valueOptions": Object {},
+                        }
+                      }
+                    />,
+                    "id": "data-panel",
+                    "name": "Data",
+                  }
+                }
+                tabs={
+                  Array [
+                    Object {
+                      "content": <VizDataPanel
+                        curVisId="bar"
+                        onConfigChange={[Function]}
+                        tabProps={
+                          Object {
+                            "editor": [Function],
+                            "id": "data-panel",
+                            "mapTo": "dataConfig",
+                            "name": "Data",
+                            "sections": Array [
+                              Object {
+                                "editor": [Function],
+                                "id": "legend",
+                                "mapTo": "legend",
+                                "name": "Legend",
+                                "schemas": Array [
+                                  Object {
+                                    "component": null,
+                                    "mapTo": "showLegend",
+                                    "name": "Show Legend",
+                                    "props": Object {
+                                      "defaultSelections": Array [
+                                        Object {
+                                          "id": "show",
+                                          "name": "Show",
+                                        },
+                                      ],
+                                      "options": Array [
+                                        Object {
+                                          "id": "show",
+                                          "name": "Show",
+                                        },
+                                        Object {
+                                          "id": "hidden",
+                                          "name": "Hidden",
+                                        },
+                                      ],
+                                    },
+                                  },
+                                  Object {
+                                    "component": null,
+                                    "mapTo": "position",
+                                    "name": "Position",
+                                    "props": Object {
+                                      "defaultSelections": Array [
+                                        Object {
+                                          "id": "v",
+                                          "name": "Right",
+                                        },
+                                      ],
+                                      "options": Array [
+                                        Object {
+                                          "id": "v",
+                                          "name": "Right",
+                                        },
+                                        Object {
+                                          "id": "h",
+                                          "name": "Bottom",
+                                        },
+                                      ],
+                                    },
+                                  },
+                                ],
+                              },
+                              Object {
+                                "editor": [Function],
+                                "id": "chart_styles",
+                                "mapTo": "chartStyles",
+                                "name": "Chart styles",
+                                "schemas": Array [
+                                  Object {
+                                    "component": [Function],
+                                    "eleType": "buttons",
+                                    "mapTo": "orientation",
+                                    "name": "Orientation",
+                                    "props": Object {
+                                      "defaultSelections": Array [
+                                        Object {
+                                          "id": "v",
+                                          "name": "Vertical",
+                                        },
+                                      ],
+                                      "options": Array [
+                                        Object {
+                                          "id": "v",
+                                          "name": "Vertical",
+                                        },
+                                        Object {
+                                          "id": "h",
+                                          "name": "Horizontal",
+                                        },
+                                      ],
+                                    },
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "eleType": "buttons",
+                                    "mapTo": "mode",
+                                    "name": "Mode",
+                                    "props": Object {
+                                      "defaultSelections": Array [
+                                        Object {
+                                          "id": "group",
+                                          "name": "Group",
+                                        },
+                                      ],
+                                      "options": Array [
+                                        Object {
+                                          "id": "group",
+                                          "name": "Group",
+                                        },
+                                        Object {
+                                          "id": "stack",
+                                          "name": "Stack",
+                                        },
+                                      ],
+                                    },
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "eleType": "input",
+                                    "mapTo": "labelSize",
+                                    "name": "Label Size",
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "defaultState": 0,
+                                    "eleType": "slider",
+                                    "mapTo": "rotateBarLabels",
+                                    "name": "Rotate bar labels",
+                                    "props": Object {
+                                      "max": 90,
+                                      "min": -90,
+                                      "showTicks": true,
+                                      "ticks": Array [
+                                        Object {
+                                          "label": "-90°",
+                                          "value": -90,
+                                        },
+                                        Object {
+                                          "label": "-45°",
+                                          "value": -45,
+                                        },
+                                        Object {
+                                          "label": "0°",
+                                          "value": 0,
+                                        },
+                                        Object {
+                                          "label": "45°",
+                                          "value": 45,
+                                        },
+                                        Object {
+                                          "label": "90°",
+                                          "value": 90,
+                                        },
+                                      ],
+                                    },
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "defaultState": 0.7,
+                                    "eleType": "slider",
+                                    "mapTo": "groupWidth",
+                                    "name": "Group width",
+                                    "props": Object {
+                                      "max": 1,
+                                      "step": 0.01,
+                                    },
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "defaultState": 0.97,
+                                    "eleType": "slider",
+                                    "mapTo": "barWidth",
+                                    "name": "Bar width",
+                                    "props": Object {
+                                      "max": 1,
+                                      "step": 0.01,
+                                    },
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "defaultState": 1,
+                                    "eleType": "slider",
+                                    "mapTo": "lineWidth",
+                                    "name": "Line width",
+                                    "props": Object {
+                                      "max": 10,
+                                    },
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "defaultState": 80,
+                                    "eleType": "slider",
+                                    "mapTo": "fillOpacity",
+                                    "name": "Fill Opacity",
+                                    "props": Object {
+                                      "max": 100,
+                                    },
+                                  },
+                                ],
+                              },
+                              Object {
+                                "editor": [Function],
+                                "id": "color-theme",
+                                "mapTo": "colorTheme",
+                                "name": "Color Theme",
+                                "schemas": Array [],
+                              },
+                            ],
+                          }
+                        }
+                        visualizations={
+                          Object {
+                            "data": Object {
+                              "appData": Object {
+                                "fromApp": false,
+                              },
+                              "defaultAxes": Object {},
+                              "indexFields": Object {
+                                "availableFields": Array [
+                                  Object {
+                                    "name": "agent",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "bytes",
+                                    "type": "long",
+                                  },
+                                  Object {
+                                    "name": "clientip",
+                                    "type": "ip",
+                                  },
+                                  Object {
+                                    "name": "event",
+                                    "type": "struct",
+                                  },
+                                  Object {
+                                    "name": "extension",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "geo",
+                                    "type": "struct",
+                                  },
+                                  Object {
+                                    "name": "host",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "index",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "ip",
+                                    "type": "ip",
+                                  },
+                                  Object {
+                                    "name": "machine",
+                                    "type": "struct",
+                                  },
+                                  Object {
+                                    "name": "memory",
+                                    "type": "double",
+                                  },
+                                  Object {
+                                    "name": "message",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "phpmemory",
+                                    "type": "long",
+                                  },
+                                  Object {
+                                    "name": "referer",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "request",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "response",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "tags",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "timestamp",
+                                    "type": "timestamp",
+                                  },
+                                  Object {
+                                    "name": "url",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "utc_time",
+                                    "type": "timestamp",
+                                  },
+                                ],
+                                "queriedFields": Array [
+                                  Object {
+                                    "name": "double_per_ip_bytes",
+                                    "type": "long",
+                                  },
+                                  Object {
+                                    "name": "host",
+                                    "type": "text",
+                                  },
+                                  Object {
+                                    "name": "ip_count",
+                                    "type": "integer",
+                                  },
+                                  Object {
+                                    "name": "per_ip_bytes",
+                                    "type": "long",
+                                  },
+                                  Object {
+                                    "name": "resp_code",
+                                    "type": "text",
+                                  },
+                                  Object {
+                                    "name": "sum_bytes",
+                                    "type": "long",
+                                  },
+                                ],
+                                "selectedFields": Array [],
+                                "unselectedFields": Array [],
+                              },
+                              "query": Object {},
+                              "rawVizData": Object {
+                                "data": Object {
+                                  "count()": Array [
+                                    154,
+                                    1753,
+                                    116,
+                                    468,
+                                    1964,
+                                    219,
+                                  ],
+                                  "tags": Array [
+                                    "error",
+                                    "info",
+                                    "login",
+                                    "security",
+                                    "success",
+                                    "warning",
+                                  ],
+                                },
+                                "jsonData": Array [
+                                  Object {
+                                    "count()": 154,
+                                    "tags": "error",
+                                  },
+                                  Object {
+                                    "count()": 1753,
+                                    "tags": "info",
+                                  },
+                                  Object {
+                                    "count()": 116,
+                                    "tags": "login",
+                                  },
+                                  Object {
+                                    "count()": 468,
+                                    "tags": "security",
+                                  },
+                                  Object {
+                                    "count()": 1964,
+                                    "tags": "success",
+                                  },
+                                  Object {
+                                    "count()": 219,
+                                    "tags": "warning",
+                                  },
+                                ],
+                                "metadata": Object {
+                                  "fields": Array [
+                                    Object {
+                                      "name": "count()",
+                                      "type": "integer",
+                                    },
+                                    Object {
+                                      "name": "tags",
+                                      "type": "text",
+                                    },
+                                  ],
+                                  "size": 6,
+                                  "status": 200,
+                                },
+                              },
+                              "userConfigs": Object {},
+                            },
+                            "vis": Object {
+                              "barWidth": 0.97,
+                              "category": "Visualizations",
+                              "categoryAxis": "xaxis",
+                              "component": [Function],
+                              "editorConfig": Object {
+                                "panelTabs": Array [
+                                  Object {
+                                    "editor": [Function],
+                                    "id": "data-panel",
+                                    "mapTo": "dataConfig",
+                                    "name": "Data",
+                                    "sections": Array [
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "legend",
+                                        "mapTo": "legend",
+                                        "name": "Legend",
+                                        "schemas": Array [
+                                          Object {
+                                            "component": null,
+                                            "mapTo": "showLegend",
+                                            "name": "Show Legend",
+                                            "props": Object {
+                                              "defaultSelections": Array [
+                                                Object {
+                                                  "id": "show",
+                                                  "name": "Show",
+                                                },
+                                              ],
+                                              "options": Array [
+                                                Object {
+                                                  "id": "show",
+                                                  "name": "Show",
+                                                },
+                                                Object {
+                                                  "id": "hidden",
+                                                  "name": "Hidden",
+                                                },
+                                              ],
+                                            },
+                                          },
+                                          Object {
+                                            "component": null,
+                                            "mapTo": "position",
+                                            "name": "Position",
+                                            "props": Object {
+                                              "defaultSelections": Array [
+                                                Object {
+                                                  "id": "v",
+                                                  "name": "Right",
+                                                },
+                                              ],
+                                              "options": Array [
+                                                Object {
+                                                  "id": "v",
+                                                  "name": "Right",
+                                                },
+                                                Object {
+                                                  "id": "h",
+                                                  "name": "Bottom",
+                                                },
+                                              ],
+                                            },
+                                          },
+                                        ],
+                                      },
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "chart_styles",
+                                        "mapTo": "chartStyles",
+                                        "name": "Chart styles",
+                                        "schemas": Array [
+                                          Object {
+                                            "component": [Function],
+                                            "eleType": "buttons",
+                                            "mapTo": "orientation",
+                                            "name": "Orientation",
+                                            "props": Object {
+                                              "defaultSelections": Array [
+                                                Object {
+                                                  "id": "v",
+                                                  "name": "Vertical",
+                                                },
+                                              ],
+                                              "options": Array [
+                                                Object {
+                                                  "id": "v",
+                                                  "name": "Vertical",
+                                                },
+                                                Object {
+                                                  "id": "h",
+                                                  "name": "Horizontal",
+                                                },
+                                              ],
+                                            },
+                                          },
+                                          Object {
+                                            "component": [Function],
+                                            "eleType": "buttons",
+                                            "mapTo": "mode",
+                                            "name": "Mode",
+                                            "props": Object {
+                                              "defaultSelections": Array [
+                                                Object {
+                                                  "id": "group",
+                                                  "name": "Group",
+                                                },
+                                              ],
+                                              "options": Array [
+                                                Object {
+                                                  "id": "group",
+                                                  "name": "Group",
+                                                },
+                                                Object {
+                                                  "id": "stack",
+                                                  "name": "Stack",
+                                                },
+                                              ],
+                                            },
+                                          },
+                                          Object {
+                                            "component": [Function],
+                                            "eleType": "input",
+                                            "mapTo": "labelSize",
+                                            "name": "Label Size",
+                                          },
+                                          Object {
+                                            "component": [Function],
+                                            "defaultState": 0,
+                                            "eleType": "slider",
+                                            "mapTo": "rotateBarLabels",
+                                            "name": "Rotate bar labels",
+                                            "props": Object {
+                                              "max": 90,
+                                              "min": -90,
+                                              "showTicks": true,
+                                              "ticks": Array [
+                                                Object {
+                                                  "label": "-90°",
+                                                  "value": -90,
+                                                },
+                                                Object {
+                                                  "label": "-45°",
+                                                  "value": -45,
+                                                },
+                                                Object {
+                                                  "label": "0°",
+                                                  "value": 0,
+                                                },
+                                                Object {
+                                                  "label": "45°",
+                                                  "value": 45,
+                                                },
+                                                Object {
+                                                  "label": "90°",
+                                                  "value": 90,
+                                                },
+                                              ],
+                                            },
+                                          },
+                                          Object {
+                                            "component": [Function],
+                                            "defaultState": 0.7,
+                                            "eleType": "slider",
+                                            "mapTo": "groupWidth",
+                                            "name": "Group width",
+                                            "props": Object {
+                                              "max": 1,
+                                              "step": 0.01,
+                                            },
+                                          },
+                                          Object {
+                                            "component": [Function],
+                                            "defaultState": 0.97,
+                                            "eleType": "slider",
+                                            "mapTo": "barWidth",
+                                            "name": "Bar width",
+                                            "props": Object {
+                                              "max": 1,
+                                              "step": 0.01,
+                                            },
+                                          },
+                                          Object {
+                                            "component": [Function],
+                                            "defaultState": 1,
+                                            "eleType": "slider",
+                                            "mapTo": "lineWidth",
+                                            "name": "Line width",
+                                            "props": Object {
+                                              "max": 10,
+                                            },
+                                          },
+                                          Object {
+                                            "component": [Function],
+                                            "defaultState": 80,
+                                            "eleType": "slider",
+                                            "mapTo": "fillOpacity",
+                                            "name": "Fill Opacity",
+                                            "props": Object {
+                                              "max": 100,
+                                            },
+                                          },
+                                        ],
+                                      },
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "color-theme",
+                                        "mapTo": "colorTheme",
+                                        "name": "Color Theme",
+                                        "schemas": Array [],
+                                      },
+                                    ],
+                                  },
+                                  Object {
+                                    "content": Array [],
+                                    "editor": [Function],
+                                    "id": "style-panel",
+                                    "mapTo": "layoutConfig",
+                                    "name": "Layout",
+                                  },
+                                  Object {
+                                    "editor": [Function],
+                                    "id": "availability-panel",
+                                    "mapTo": "availabilityConfig",
+                                    "name": "Availability",
+                                  },
+                                ],
+                              },
+                              "fillOpacity": 80,
+                              "fullLabel": "Bar",
+                              "groupWidth": 0.7,
+                              "icon": [Function],
+                              "iconType": "visBarVerticalStacked",
+                              "id": "bar",
+                              "label": "Bar",
+                              "labelAngle": 0,
+                              "legendPosition": "v",
+                              "lineWidth": 1,
+                              "mode": "group",
+                              "name": "bar",
+                              "orientation": "v",
+                              "selection": Object {
+                                "dataLoss": "nothing",
+                              },
+                              "seriesAxis": "yaxis",
+                              "showLegend": "show",
+                              "type": "bar",
+                              "visConfig": Object {
+                                "config": Object {
+                                  "displaylogo": false,
+                                  "responsive": true,
+                                },
+                                "isUniColor": false,
+                                "layout": Object {
+                                  "height": 1180,
+                                  "legend": Object {
+                                    "orientation": "v",
+                                    "traceorder": "normal",
+                                  },
+                                  "margin": Object {
+                                    "b": 30,
+                                    "l": 60,
+                                    "pad": 0,
+                                    "r": 30,
+                                    "t": 50,
+                                  },
+                                  "showlegend": true,
+                                },
+                              },
+                            },
+                          }
+                        }
+                        vizState={
+                          Object {
+                            "valueOptions": Object {},
+                          }
+                        }
+                      />,
+                      "id": "data-panel",
+                      "name": "Data",
+                    },
+                    Object {
+                      "content": <ConfigEditor
+                        onConfigEditorChange={[Function]}
+                        setToast={[MockFunction]}
+                        spec="MOCK HJSON STRING"
+                        tabProps={
+                          Object {
+                            "content": Array [],
+                            "editor": [Function],
+                            "id": "style-panel",
+                            "mapTo": "layoutConfig",
+                            "name": "Layout",
+                          }
+                        }
+                      />,
+                      "id": "style-panel",
+                      "name": "Layout",
+                    },
+                    Object {
+                      "content": <ConfigAvailability
+                        curVisId="bar"
+                        onConfigChange={[Function]}
+                        tabProps={
+                          Object {
+                            "editor": [Function],
+                            "id": "availability-panel",
+                            "mapTo": "availabilityConfig",
+                            "name": "Availability",
+                          }
+                        }
+                        visualizations={
+                          Object {
+                            "data": Object {
+                              "appData": Object {
+                                "fromApp": false,
+                              },
+                              "defaultAxes": Object {},
+                              "indexFields": Object {
+                                "availableFields": Array [
+                                  Object {
+                                    "name": "agent",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "bytes",
+                                    "type": "long",
+                                  },
+                                  Object {
+                                    "name": "clientip",
+                                    "type": "ip",
+                                  },
+                                  Object {
+                                    "name": "event",
+                                    "type": "struct",
+                                  },
+                                  Object {
+                                    "name": "extension",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "geo",
+                                    "type": "struct",
+                                  },
+                                  Object {
+                                    "name": "host",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "index",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "ip",
+                                    "type": "ip",
+                                  },
+                                  Object {
+                                    "name": "machine",
+                                    "type": "struct",
+                                  },
+                                  Object {
+                                    "name": "memory",
+                                    "type": "double",
+                                  },
+                                  Object {
+                                    "name": "message",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "phpmemory",
+                                    "type": "long",
+                                  },
+                                  Object {
+                                    "name": "referer",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "request",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "response",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "tags",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "timestamp",
+                                    "type": "timestamp",
+                                  },
+                                  Object {
+                                    "name": "url",
+                                    "type": "string",
+                                  },
+                                  Object {
+                                    "name": "utc_time",
+                                    "type": "timestamp",
+                                  },
+                                ],
+                                "queriedFields": Array [
+                                  Object {
+                                    "name": "double_per_ip_bytes",
+                                    "type": "long",
+                                  },
+                                  Object {
+                                    "name": "host",
+                                    "type": "text",
+                                  },
+                                  Object {
+                                    "name": "ip_count",
+                                    "type": "integer",
+                                  },
+                                  Object {
+                                    "name": "per_ip_bytes",
+                                    "type": "long",
+                                  },
+                                  Object {
+                                    "name": "resp_code",
+                                    "type": "text",
+                                  },
+                                  Object {
+                                    "name": "sum_bytes",
+                                    "type": "long",
+                                  },
+                                ],
+                                "selectedFields": Array [],
+                                "unselectedFields": Array [],
+                              },
+                              "query": Object {},
+                              "rawVizData": Object {
+                                "data": Object {
+                                  "count()": Array [
+                                    154,
+                                    1753,
+                                    116,
+                                    468,
+                                    1964,
+                                    219,
+                                  ],
+                                  "tags": Array [
+                                    "error",
+                                    "info",
+                                    "login",
+                                    "security",
+                                    "success",
+                                    "warning",
+                                  ],
+                                },
+                                "jsonData": Array [
+                                  Object {
+                                    "count()": 154,
+                                    "tags": "error",
+                                  },
+                                  Object {
+                                    "count()": 1753,
+                                    "tags": "info",
+                                  },
+                                  Object {
+                                    "count()": 116,
+                                    "tags": "login",
+                                  },
+                                  Object {
+                                    "count()": 468,
+                                    "tags": "security",
+                                  },
+                                  Object {
+                                    "count()": 1964,
+                                    "tags": "success",
+                                  },
+                                  Object {
+                                    "count()": 219,
+                                    "tags": "warning",
+                                  },
+                                ],
+                                "metadata": Object {
+                                  "fields": Array [
+                                    Object {
+                                      "name": "count()",
+                                      "type": "integer",
+                                    },
+                                    Object {
+                                      "name": "tags",
+                                      "type": "text",
+                                    },
+                                  ],
+                                  "size": 6,
+                                  "status": 200,
+                                },
+                              },
+                              "userConfigs": Object {},
+                            },
+                            "vis": Object {
+                              "barWidth": 0.97,
+                              "category": "Visualizations",
+                              "categoryAxis": "xaxis",
+                              "component": [Function],
+                              "editorConfig": Object {
+                                "panelTabs": Array [
+                                  Object {
+                                    "editor": [Function],
+                                    "id": "data-panel",
+                                    "mapTo": "dataConfig",
+                                    "name": "Data",
+                                    "sections": Array [
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "legend",
+                                        "mapTo": "legend",
+                                        "name": "Legend",
+                                        "schemas": Array [
+                                          Object {
+                                            "component": null,
+                                            "mapTo": "showLegend",
+                                            "name": "Show Legend",
+                                            "props": Object {
+                                              "defaultSelections": Array [
+                                                Object {
+                                                  "id": "show",
+                                                  "name": "Show",
+                                                },
+                                              ],
+                                              "options": Array [
+                                                Object {
+                                                  "id": "show",
+                                                  "name": "Show",
+                                                },
+                                                Object {
+                                                  "id": "hidden",
+                                                  "name": "Hidden",
+                                                },
+                                              ],
+                                            },
+                                          },
+                                          Object {
+                                            "component": null,
+                                            "mapTo": "position",
+                                            "name": "Position",
+                                            "props": Object {
+                                              "defaultSelections": Array [
+                                                Object {
+                                                  "id": "v",
+                                                  "name": "Right",
+                                                },
+                                              ],
+                                              "options": Array [
+                                                Object {
+                                                  "id": "v",
+                                                  "name": "Right",
+                                                },
+                                                Object {
+                                                  "id": "h",
+                                                  "name": "Bottom",
+                                                },
+                                              ],
+                                            },
+                                          },
+                                        ],
+                                      },
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "chart_styles",
+                                        "mapTo": "chartStyles",
+                                        "name": "Chart styles",
+                                        "schemas": Array [
+                                          Object {
+                                            "component": [Function],
+                                            "eleType": "buttons",
+                                            "mapTo": "orientation",
+                                            "name": "Orientation",
+                                            "props": Object {
+                                              "defaultSelections": Array [
+                                                Object {
+                                                  "id": "v",
+                                                  "name": "Vertical",
+                                                },
+                                              ],
+                                              "options": Array [
+                                                Object {
+                                                  "id": "v",
+                                                  "name": "Vertical",
+                                                },
+                                                Object {
+                                                  "id": "h",
+                                                  "name": "Horizontal",
+                                                },
+                                              ],
+                                            },
+                                          },
+                                          Object {
+                                            "component": [Function],
+                                            "eleType": "buttons",
+                                            "mapTo": "mode",
+                                            "name": "Mode",
+                                            "props": Object {
+                                              "defaultSelections": Array [
+                                                Object {
+                                                  "id": "group",
+                                                  "name": "Group",
+                                                },
+                                              ],
+                                              "options": Array [
+                                                Object {
+                                                  "id": "group",
+                                                  "name": "Group",
+                                                },
+                                                Object {
+                                                  "id": "stack",
+                                                  "name": "Stack",
+                                                },
+                                              ],
+                                            },
+                                          },
+                                          Object {
+                                            "component": [Function],
+                                            "eleType": "input",
+                                            "mapTo": "labelSize",
+                                            "name": "Label Size",
+                                          },
+                                          Object {
+                                            "component": [Function],
+                                            "defaultState": 0,
+                                            "eleType": "slider",
+                                            "mapTo": "rotateBarLabels",
+                                            "name": "Rotate bar labels",
+                                            "props": Object {
+                                              "max": 90,
+                                              "min": -90,
+                                              "showTicks": true,
+                                              "ticks": Array [
+                                                Object {
+                                                  "label": "-90°",
+                                                  "value": -90,
+                                                },
+                                                Object {
+                                                  "label": "-45°",
+                                                  "value": -45,
+                                                },
+                                                Object {
+                                                  "label": "0°",
+                                                  "value": 0,
+                                                },
+                                                Object {
+                                                  "label": "45°",
+                                                  "value": 45,
+                                                },
+                                                Object {
+                                                  "label": "90°",
+                                                  "value": 90,
+                                                },
+                                              ],
+                                            },
+                                          },
+                                          Object {
+                                            "component": [Function],
+                                            "defaultState": 0.7,
+                                            "eleType": "slider",
+                                            "mapTo": "groupWidth",
+                                            "name": "Group width",
+                                            "props": Object {
+                                              "max": 1,
+                                              "step": 0.01,
+                                            },
+                                          },
+                                          Object {
+                                            "component": [Function],
+                                            "defaultState": 0.97,
+                                            "eleType": "slider",
+                                            "mapTo": "barWidth",
+                                            "name": "Bar width",
+                                            "props": Object {
+                                              "max": 1,
+                                              "step": 0.01,
+                                            },
+                                          },
+                                          Object {
+                                            "component": [Function],
+                                            "defaultState": 1,
+                                            "eleType": "slider",
+                                            "mapTo": "lineWidth",
+                                            "name": "Line width",
+                                            "props": Object {
+                                              "max": 10,
+                                            },
+                                          },
+                                          Object {
+                                            "component": [Function],
+                                            "defaultState": 80,
+                                            "eleType": "slider",
+                                            "mapTo": "fillOpacity",
+                                            "name": "Fill Opacity",
+                                            "props": Object {
+                                              "max": 100,
+                                            },
+                                          },
+                                        ],
+                                      },
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "color-theme",
+                                        "mapTo": "colorTheme",
+                                        "name": "Color Theme",
+                                        "schemas": Array [],
+                                      },
+                                    ],
+                                  },
+                                  Object {
+                                    "content": Array [],
+                                    "editor": [Function],
+                                    "id": "style-panel",
+                                    "mapTo": "layoutConfig",
+                                    "name": "Layout",
+                                  },
+                                  Object {
+                                    "editor": [Function],
+                                    "id": "availability-panel",
+                                    "mapTo": "availabilityConfig",
+                                    "name": "Availability",
+                                  },
+                                ],
+                              },
+                              "fillOpacity": 80,
+                              "fullLabel": "Bar",
+                              "groupWidth": 0.7,
+                              "icon": [Function],
+                              "iconType": "visBarVerticalStacked",
+                              "id": "bar",
+                              "label": "Bar",
+                              "labelAngle": 0,
+                              "legendPosition": "v",
+                              "lineWidth": 1,
+                              "mode": "group",
+                              "name": "bar",
+                              "orientation": "v",
+                              "selection": Object {
+                                "dataLoss": "nothing",
+                              },
+                              "seriesAxis": "yaxis",
+                              "showLegend": "show",
+                              "type": "bar",
+                              "visConfig": Object {
+                                "config": Object {
+                                  "displaylogo": false,
+                                  "responsive": true,
+                                },
+                                "isUniColor": false,
+                                "layout": Object {
+                                  "height": 1180,
+                                  "legend": Object {
+                                    "orientation": "v",
+                                    "traceorder": "normal",
+                                  },
+                                  "margin": Object {
+                                    "b": 30,
+                                    "l": 60,
+                                    "pad": 0,
+                                    "r": 30,
+                                    "t": 50,
+                                  },
+                                  "showlegend": true,
+                                },
+                              },
+                            },
+                          }
+                        }
+                      />,
+                      "id": "availability-panel",
+                      "name": "Availability",
+                    },
+                  ]
+                }
+              >
+                <div
+                  className="vis-config-tabs"
+                >
+                  <EuiTabs
+                    onFocus={[Function]}
+                  >
+                    <div
+                      className="euiTabs"
+                      onFocus={[Function]}
+                      role="tablist"
+                    >
+                      <EuiTab
+                        aria-controls="random_html_id"
+                        id="data-panel"
+                        isSelected={true}
+                        key="data-panel"
+                        onClick={[Function]}
+                      >
+                        <button
+                          aria-controls="random_html_id"
+                          aria-selected={true}
+                          className="euiTab euiTab-isSelected"
+                          disabled={false}
+                          id="data-panel"
+                          onClick={[Function]}
+                          role="tab"
+                          type="button"
+                        >
+                          <span
+                            className="euiTab__content"
+                          >
+                            Data
+                          </span>
+                        </button>
+                      </EuiTab>
+                      <EuiTab
+                        aria-controls="random_html_id"
+                        id="style-panel"
+                        isSelected={false}
+                        key="style-panel"
+                        onClick={[Function]}
+                      >
+                        <button
+                          aria-controls="random_html_id"
+                          aria-selected={false}
+                          className="euiTab"
+                          disabled={false}
+                          id="style-panel"
+                          onClick={[Function]}
+                          role="tab"
+                          type="button"
+                        >
+                          <span
+                            className="euiTab__content"
+                          >
+                            Layout
+                          </span>
+                        </button>
+                      </EuiTab>
+                      <EuiTab
+                        aria-controls="random_html_id"
+                        id="availability-panel"
+                        isSelected={false}
+                        key="availability-panel"
+                        onClick={[Function]}
+                      >
+                        <button
+                          aria-controls="random_html_id"
+                          aria-selected={false}
+                          className="euiTab"
+                          disabled={false}
+                          id="availability-panel"
+                          onClick={[Function]}
+                          role="tab"
+                          type="button"
+                        >
+                          <span
+                            className="euiTab__content"
+                          >
+                            Availability
+                          </span>
+                        </button>
+                      </EuiTab>
+                    </div>
+                  </EuiTabs>
+                  <div
+                    aria-labelledby="data-panel"
+                    id="random_html_id"
+                    role="tabpanel"
+                  >
+                    <VizDataPanel
+                      curVisId="bar"
+                      onConfigChange={[Function]}
+                      tabProps={
+                        Object {
+                          "editor": [Function],
+                          "id": "data-panel",
+                          "mapTo": "dataConfig",
+                          "name": "Data",
+                          "sections": Array [
+                            Object {
+                              "editor": [Function],
+                              "id": "legend",
+                              "mapTo": "legend",
+                              "name": "Legend",
+                              "schemas": Array [
+                                Object {
+                                  "component": null,
+                                  "mapTo": "showLegend",
+                                  "name": "Show Legend",
+                                  "props": Object {
+                                    "defaultSelections": Array [
+                                      Object {
+                                        "id": "show",
+                                        "name": "Show",
+                                      },
+                                    ],
+                                    "options": Array [
+                                      Object {
+                                        "id": "show",
+                                        "name": "Show",
+                                      },
+                                      Object {
+                                        "id": "hidden",
+                                        "name": "Hidden",
+                                      },
+                                    ],
+                                  },
+                                },
+                                Object {
+                                  "component": null,
+                                  "mapTo": "position",
+                                  "name": "Position",
+                                  "props": Object {
+                                    "defaultSelections": Array [
+                                      Object {
+                                        "id": "v",
+                                        "name": "Right",
+                                      },
+                                    ],
+                                    "options": Array [
+                                      Object {
+                                        "id": "v",
+                                        "name": "Right",
+                                      },
+                                      Object {
+                                        "id": "h",
+                                        "name": "Bottom",
+                                      },
+                                    ],
+                                  },
+                                },
+                              ],
+                            },
+                            Object {
+                              "editor": [Function],
+                              "id": "chart_styles",
+                              "mapTo": "chartStyles",
+                              "name": "Chart styles",
+                              "schemas": Array [
+                                Object {
+                                  "component": [Function],
+                                  "eleType": "buttons",
+                                  "mapTo": "orientation",
+                                  "name": "Orientation",
+                                  "props": Object {
+                                    "defaultSelections": Array [
+                                      Object {
+                                        "id": "v",
+                                        "name": "Vertical",
+                                      },
+                                    ],
+                                    "options": Array [
+                                      Object {
+                                        "id": "v",
+                                        "name": "Vertical",
+                                      },
+                                      Object {
+                                        "id": "h",
+                                        "name": "Horizontal",
+                                      },
+                                    ],
+                                  },
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "eleType": "buttons",
+                                  "mapTo": "mode",
+                                  "name": "Mode",
+                                  "props": Object {
+                                    "defaultSelections": Array [
+                                      Object {
+                                        "id": "group",
+                                        "name": "Group",
+                                      },
+                                    ],
+                                    "options": Array [
+                                      Object {
+                                        "id": "group",
+                                        "name": "Group",
+                                      },
+                                      Object {
+                                        "id": "stack",
+                                        "name": "Stack",
+                                      },
+                                    ],
+                                  },
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "eleType": "input",
+                                  "mapTo": "labelSize",
+                                  "name": "Label Size",
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "defaultState": 0,
+                                  "eleType": "slider",
+                                  "mapTo": "rotateBarLabels",
+                                  "name": "Rotate bar labels",
+                                  "props": Object {
+                                    "max": 90,
+                                    "min": -90,
+                                    "showTicks": true,
+                                    "ticks": Array [
+                                      Object {
+                                        "label": "-90°",
+                                        "value": -90,
+                                      },
+                                      Object {
+                                        "label": "-45°",
+                                        "value": -45,
+                                      },
+                                      Object {
+                                        "label": "0°",
+                                        "value": 0,
+                                      },
+                                      Object {
+                                        "label": "45°",
+                                        "value": 45,
+                                      },
+                                      Object {
+                                        "label": "90°",
+                                        "value": 90,
+                                      },
+                                    ],
+                                  },
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "defaultState": 0.7,
+                                  "eleType": "slider",
+                                  "mapTo": "groupWidth",
+                                  "name": "Group width",
+                                  "props": Object {
+                                    "max": 1,
+                                    "step": 0.01,
+                                  },
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "defaultState": 0.97,
+                                  "eleType": "slider",
+                                  "mapTo": "barWidth",
+                                  "name": "Bar width",
+                                  "props": Object {
+                                    "max": 1,
+                                    "step": 0.01,
+                                  },
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "defaultState": 1,
+                                  "eleType": "slider",
+                                  "mapTo": "lineWidth",
+                                  "name": "Line width",
+                                  "props": Object {
+                                    "max": 10,
+                                  },
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "defaultState": 80,
+                                  "eleType": "slider",
+                                  "mapTo": "fillOpacity",
+                                  "name": "Fill Opacity",
+                                  "props": Object {
+                                    "max": 100,
+                                  },
+                                },
+                              ],
+                            },
+                            Object {
+                              "editor": [Function],
+                              "id": "color-theme",
+                              "mapTo": "colorTheme",
+                              "name": "Color Theme",
+                              "schemas": Array [],
+                            },
+                          ],
+                        }
+                      }
+                      visualizations={
+                        Object {
+                          "data": Object {
+                            "appData": Object {
+                              "fromApp": false,
+                            },
+                            "defaultAxes": Object {},
+                            "indexFields": Object {
+                              "availableFields": Array [
+                                Object {
+                                  "name": "agent",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "bytes",
+                                  "type": "long",
+                                },
+                                Object {
+                                  "name": "clientip",
+                                  "type": "ip",
+                                },
+                                Object {
+                                  "name": "event",
+                                  "type": "struct",
+                                },
+                                Object {
+                                  "name": "extension",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "geo",
+                                  "type": "struct",
+                                },
+                                Object {
+                                  "name": "host",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "index",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "ip",
+                                  "type": "ip",
+                                },
+                                Object {
+                                  "name": "machine",
+                                  "type": "struct",
+                                },
+                                Object {
+                                  "name": "memory",
+                                  "type": "double",
+                                },
+                                Object {
+                                  "name": "message",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "phpmemory",
+                                  "type": "long",
+                                },
+                                Object {
+                                  "name": "referer",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "request",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "response",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "tags",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "timestamp",
+                                  "type": "timestamp",
+                                },
+                                Object {
+                                  "name": "url",
+                                  "type": "string",
+                                },
+                                Object {
+                                  "name": "utc_time",
+                                  "type": "timestamp",
+                                },
+                              ],
+                              "queriedFields": Array [
+                                Object {
+                                  "name": "double_per_ip_bytes",
+                                  "type": "long",
+                                },
+                                Object {
+                                  "name": "host",
+                                  "type": "text",
+                                },
+                                Object {
+                                  "name": "ip_count",
+                                  "type": "integer",
+                                },
+                                Object {
+                                  "name": "per_ip_bytes",
+                                  "type": "long",
+                                },
+                                Object {
+                                  "name": "resp_code",
+                                  "type": "text",
+                                },
+                                Object {
+                                  "name": "sum_bytes",
+                                  "type": "long",
+                                },
+                              ],
+                              "selectedFields": Array [],
+                              "unselectedFields": Array [],
+                            },
+                            "query": Object {},
+                            "rawVizData": Object {
+                              "data": Object {
+                                "count()": Array [
+                                  154,
+                                  1753,
+                                  116,
+                                  468,
+                                  1964,
+                                  219,
+                                ],
+                                "tags": Array [
+                                  "error",
+                                  "info",
+                                  "login",
+                                  "security",
+                                  "success",
+                                  "warning",
+                                ],
+                              },
+                              "jsonData": Array [
+                                Object {
+                                  "count()": 154,
+                                  "tags": "error",
+                                },
+                                Object {
+                                  "count()": 1753,
+                                  "tags": "info",
+                                },
+                                Object {
+                                  "count()": 116,
+                                  "tags": "login",
+                                },
+                                Object {
+                                  "count()": 468,
+                                  "tags": "security",
+                                },
+                                Object {
+                                  "count()": 1964,
+                                  "tags": "success",
+                                },
+                                Object {
+                                  "count()": 219,
+                                  "tags": "warning",
+                                },
+                              ],
+                              "metadata": Object {
+                                "fields": Array [
+                                  Object {
+                                    "name": "count()",
+                                    "type": "integer",
+                                  },
+                                  Object {
+                                    "name": "tags",
+                                    "type": "text",
+                                  },
+                                ],
+                                "size": 6,
+                                "status": 200,
+                              },
+                            },
+                            "userConfigs": Object {},
+                          },
+                          "vis": Object {
+                            "barWidth": 0.97,
+                            "category": "Visualizations",
+                            "categoryAxis": "xaxis",
+                            "component": [Function],
+                            "editorConfig": Object {
+                              "panelTabs": Array [
+                                Object {
+                                  "editor": [Function],
+                                  "id": "data-panel",
+                                  "mapTo": "dataConfig",
+                                  "name": "Data",
+                                  "sections": Array [
+                                    Object {
+                                      "editor": [Function],
+                                      "id": "legend",
+                                      "mapTo": "legend",
+                                      "name": "Legend",
+                                      "schemas": Array [
+                                        Object {
+                                          "component": null,
+                                          "mapTo": "showLegend",
+                                          "name": "Show Legend",
+                                          "props": Object {
+                                            "defaultSelections": Array [
+                                              Object {
+                                                "id": "show",
+                                                "name": "Show",
+                                              },
+                                            ],
+                                            "options": Array [
+                                              Object {
+                                                "id": "show",
+                                                "name": "Show",
+                                              },
+                                              Object {
+                                                "id": "hidden",
+                                                "name": "Hidden",
+                                              },
+                                            ],
+                                          },
+                                        },
+                                        Object {
+                                          "component": null,
+                                          "mapTo": "position",
+                                          "name": "Position",
+                                          "props": Object {
+                                            "defaultSelections": Array [
+                                              Object {
+                                                "id": "v",
+                                                "name": "Right",
+                                              },
+                                            ],
+                                            "options": Array [
+                                              Object {
+                                                "id": "v",
+                                                "name": "Right",
+                                              },
+                                              Object {
+                                                "id": "h",
+                                                "name": "Bottom",
+                                              },
+                                            ],
+                                          },
+                                        },
+                                      ],
+                                    },
+                                    Object {
+                                      "editor": [Function],
+                                      "id": "chart_styles",
+                                      "mapTo": "chartStyles",
+                                      "name": "Chart styles",
+                                      "schemas": Array [
+                                        Object {
+                                          "component": [Function],
+                                          "eleType": "buttons",
+                                          "mapTo": "orientation",
+                                          "name": "Orientation",
+                                          "props": Object {
+                                            "defaultSelections": Array [
+                                              Object {
+                                                "id": "v",
+                                                "name": "Vertical",
+                                              },
+                                            ],
+                                            "options": Array [
+                                              Object {
+                                                "id": "v",
+                                                "name": "Vertical",
+                                              },
+                                              Object {
+                                                "id": "h",
+                                                "name": "Horizontal",
+                                              },
+                                            ],
+                                          },
+                                        },
+                                        Object {
+                                          "component": [Function],
+                                          "eleType": "buttons",
+                                          "mapTo": "mode",
+                                          "name": "Mode",
+                                          "props": Object {
+                                            "defaultSelections": Array [
+                                              Object {
+                                                "id": "group",
+                                                "name": "Group",
+                                              },
+                                            ],
+                                            "options": Array [
+                                              Object {
+                                                "id": "group",
+                                                "name": "Group",
+                                              },
+                                              Object {
+                                                "id": "stack",
+                                                "name": "Stack",
+                                              },
+                                            ],
+                                          },
+                                        },
+                                        Object {
+                                          "component": [Function],
+                                          "eleType": "input",
+                                          "mapTo": "labelSize",
+                                          "name": "Label Size",
+                                        },
+                                        Object {
+                                          "component": [Function],
+                                          "defaultState": 0,
+                                          "eleType": "slider",
+                                          "mapTo": "rotateBarLabels",
+                                          "name": "Rotate bar labels",
+                                          "props": Object {
+                                            "max": 90,
+                                            "min": -90,
+                                            "showTicks": true,
+                                            "ticks": Array [
+                                              Object {
+                                                "label": "-90°",
+                                                "value": -90,
+                                              },
+                                              Object {
+                                                "label": "-45°",
+                                                "value": -45,
+                                              },
+                                              Object {
+                                                "label": "0°",
+                                                "value": 0,
+                                              },
+                                              Object {
+                                                "label": "45°",
+                                                "value": 45,
+                                              },
+                                              Object {
+                                                "label": "90°",
+                                                "value": 90,
+                                              },
+                                            ],
+                                          },
+                                        },
+                                        Object {
+                                          "component": [Function],
+                                          "defaultState": 0.7,
+                                          "eleType": "slider",
+                                          "mapTo": "groupWidth",
+                                          "name": "Group width",
+                                          "props": Object {
+                                            "max": 1,
+                                            "step": 0.01,
+                                          },
+                                        },
+                                        Object {
+                                          "component": [Function],
+                                          "defaultState": 0.97,
+                                          "eleType": "slider",
+                                          "mapTo": "barWidth",
+                                          "name": "Bar width",
+                                          "props": Object {
+                                            "max": 1,
+                                            "step": 0.01,
+                                          },
+                                        },
+                                        Object {
+                                          "component": [Function],
+                                          "defaultState": 1,
+                                          "eleType": "slider",
+                                          "mapTo": "lineWidth",
+                                          "name": "Line width",
+                                          "props": Object {
+                                            "max": 10,
+                                          },
+                                        },
+                                        Object {
+                                          "component": [Function],
+                                          "defaultState": 80,
+                                          "eleType": "slider",
+                                          "mapTo": "fillOpacity",
+                                          "name": "Fill Opacity",
+                                          "props": Object {
+                                            "max": 100,
+                                          },
+                                        },
+                                      ],
+                                    },
+                                    Object {
+                                      "editor": [Function],
+                                      "id": "color-theme",
+                                      "mapTo": "colorTheme",
+                                      "name": "Color Theme",
+                                      "schemas": Array [],
+                                    },
+                                  ],
+                                },
+                                Object {
+                                  "content": Array [],
+                                  "editor": [Function],
+                                  "id": "style-panel",
+                                  "mapTo": "layoutConfig",
+                                  "name": "Layout",
+                                },
+                                Object {
+                                  "editor": [Function],
+                                  "id": "availability-panel",
+                                  "mapTo": "availabilityConfig",
+                                  "name": "Availability",
+                                },
+                              ],
+                            },
+                            "fillOpacity": 80,
+                            "fullLabel": "Bar",
+                            "groupWidth": 0.7,
+                            "icon": [Function],
+                            "iconType": "visBarVerticalStacked",
+                            "id": "bar",
+                            "label": "Bar",
+                            "labelAngle": 0,
+                            "legendPosition": "v",
+                            "lineWidth": 1,
+                            "mode": "group",
+                            "name": "bar",
+                            "orientation": "v",
+                            "selection": Object {
+                              "dataLoss": "nothing",
+                            },
+                            "seriesAxis": "yaxis",
+                            "showLegend": "show",
+                            "type": "bar",
+                            "visConfig": Object {
+                              "config": Object {
+                                "displaylogo": false,
+                                "responsive": true,
+                              },
+                              "isUniColor": false,
+                              "layout": Object {
+                                "height": 1180,
+                                "legend": Object {
+                                  "orientation": "v",
+                                  "traceorder": "normal",
+                                },
+                                "margin": Object {
+                                  "b": 30,
+                                  "l": 60,
+                                  "pad": 0,
+                                  "r": 30,
+                                  "t": 50,
+                                },
+                                "showlegend": true,
+                              },
+                            },
+                          },
+                        }
+                      }
+                      vizState={
+                        Object {
+                          "valueOptions": Object {},
+                        }
+                      }
+                    >
+                      <div
+                        className="visEditorSidebar__config"
+                      >
+                        <EuiForm
+                          className="visEditorSidebar__form"
+                        >
+                          <div
+                            className="euiForm visEditorSidebar__form"
+                          >
                             <EuiFormRow
                               describedByIds={Array []}
                               display="row"
-                              fullWidth={true}
+                              fullWidth={false}
                               hasChildLabel={true}
                               hasEmptyLabelSpace={false}
                               labelType="label"
                             >
                               <div
-                                className="euiFormRow euiFormRow--fullWidth"
+                                className="euiFormRow"
                                 id="random_html_id-row"
                               >
                                 <div
                                   className="euiFormRow__fieldWrapper"
                                 >
-                                  <ConfigValueOptions
+                                  <ConfigPanelOptions
                                     handleConfigChange={[Function]}
                                     id="random_html_id"
                                     onBlur={[Function]}
                                     onFocus={[Function]}
-                                    schemas={
-                                      Array [
-                                        Object {
-                                          "component": null,
-                                          "isSingleSelection": false,
-                                          "mapTo": "xaxis",
-                                          "name": "X-axis",
-                                        },
-                                        Object {
-                                          "component": null,
-                                          "isSingleSelection": false,
-                                          "mapTo": "yaxis",
-                                          "name": "Y-axis",
-                                        },
-                                      ]
-                                    }
-                                    sectionId="value_options"
-                                    sectionName="Value options"
                                     visualizations={
                                       Object {
                                         "data": Object {
@@ -7771,26 +7200,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                 "mapTo": "dataConfig",
                                                 "name": "Data",
                                                 "sections": Array [
-                                                  Object {
-                                                    "editor": [Function],
-                                                    "id": "value_options",
-                                                    "mapTo": "valueOptions",
-                                                    "name": "Value options",
-                                                    "schemas": Array [
-                                                      Object {
-                                                        "component": null,
-                                                        "isSingleSelection": false,
-                                                        "mapTo": "xaxis",
-                                                        "name": "X-axis",
-                                                      },
-                                                      Object {
-                                                        "component": null,
-                                                        "isSingleSelection": false,
-                                                        "mapTo": "yaxis",
-                                                        "name": "Y-axis",
-                                                      },
-                                                    ],
-                                                  },
                                                   Object {
                                                     "editor": [Function],
                                                     "id": "legend",
@@ -7899,6 +7308,12 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                           ],
                                                         },
                                                       },
+                                                      Object {
+                                                        "component": [Function],
+                                                        "eleType": "input",
+                                                        "mapTo": "labelSize",
+                                                        "name": "Label Size",
+                                                      },
                                                       Object {
                                                         "component": [Function],
                                                         "defaultState": 0,
@@ -8027,7 +7442,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                             },
                                             "isUniColor": false,
                                             "layout": Object {
-                                              "height": 500,
+                                              "height": 1180,
                                               "legend": Object {
                                                 "orientation": "v",
                                                 "traceorder": "normal",
@@ -8045,12 +7460,11 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                         },
                                       }
                                     }
-                                    vizState={Object {}}
                                   >
                                     <EuiAccordion
                                       arrowDisplay="left"
-                                      buttonContent="Value options"
-                                      id="configPanel__value_options"
+                                      buttonContent="Panel options"
+                                      id="configPanel__panelOptions"
                                       initialIsOpen={true}
                                       isLoading={false}
                                       isLoadingMessage={false}
@@ -8063,7 +7477,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                           className="euiAccordion__triggerWrapper"
                                         >
                                           <button
-                                            aria-controls="configPanel__value_options"
+                                            aria-controls="configPanel__panelOptions"
                                             aria-expanded={true}
                                             className="euiAccordion__button"
                                             id="random_html_id"
@@ -8102,14 +7516,14 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                             <span
                                               className="euiIEFlexWrapFix"
                                             >
-                                              Value options
+                                              Panel options
                                             </span>
                                           </button>
                                         </div>
                                         <div
                                           aria-labelledby="random_html_id"
                                           className="euiAccordion__childWrapper"
-                                          id="configPanel__value_options"
+                                          id="configPanel__panelOptions"
                                           role="region"
                                           tabIndex={-1}
                                         >
@@ -8120,543 +7534,170 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               <div
                                                 className="euiAccordion__padding--s"
                                               >
-                                                <PanelItem
-                                                  advancedTitle="advancedTitle"
-                                                  dropdownList={
-                                                    Array [
-                                                      Object {
-                                                        "name": "count()",
-                                                        "type": "integer",
-                                                      },
-                                                      Object {
-                                                        "name": "tags",
-                                                        "type": "text",
-                                                      },
-                                                    ]
-                                                  }
-                                                  isSingleSelection={false}
-                                                  key="viz-series-0"
-                                                  onSelectChange={[Function]}
-                                                  paddingTitle="X-axis"
-                                                  vizState={Object {}}
+                                                <EuiForm
+                                                  component="form"
                                                 >
-                                                  <EuiTitle
-                                                    size="xxs"
-                                                  >
-                                                    <h3
-                                                      className="euiTitle euiTitle--xxsmall"
-                                                    >
-                                                      X-axis
-                                                    </h3>
-                                                  </EuiTitle>
-                                                  <EuiSpacer
-                                                    size="s"
-                                                  >
-                                                    <div
-                                                      className="euiSpacer euiSpacer--s"
-                                                    />
-                                                  </EuiSpacer>
-                                                  <EuiComboBox
-                                                    aria-label="Use aria labels when no actual label is in use"
-                                                    async={false}
-                                                    compressed={false}
-                                                    fullWidth={false}
-                                                    id="axis-select-4"
-                                                    isClearable={true}
-                                                    isInvalid={true}
-                                                    onChange={[Function]}
-                                                    options={
-                                                      Array [
-                                                        Object {
-                                                          "label": "count()",
-                                                          "name": "count()",
-                                                          "type": "integer",
-                                                        },
-                                                        Object {
-                                                          "label": "tags",
-                                                          "name": "tags",
-                                                          "type": "text",
-                                                        },
-                                                      ]
-                                                    }
-                                                    placeholder="Select a field"
-                                                    selectedOptions={Array []}
-                                                    singleSelection={false}
-                                                    sortMatchesBy="none"
+                                                  <form
+                                                    className="euiForm"
                                                   >
-                                                    <div
-                                                      aria-expanded={false}
-                                                      aria-haspopup="listbox"
-                                                      aria-label="Use aria labels when no actual label is in use"
-                                                      className="euiComboBox euiComboBox-isInvalid"
-                                                      onKeyDown={[Function]}
-                                                      role="combobox"
+                                                    <EuiFormRow
+                                                      describedByIds={Array []}
+                                                      display="row"
+                                                      fullWidth={true}
+                                                      hasChildLabel={true}
+                                                      hasEmptyLabelSpace={false}
+                                                      helpText="Name your visualization."
+                                                      label="Title"
+                                                      labelType="label"
                                                     >
-                                                      <EuiComboBoxInput
-                                                        autoSizeInputRef={[Function]}
-                                                        compressed={false}
-                                                        fullWidth={false}
-                                                        hasSelectedOptions={false}
-                                                        id="axis-select-4"
-                                                        inputRef={[Function]}
-                                                        isListOpen={false}
-                                                        noIcon={false}
-                                                        onChange={[Function]}
-                                                        onClear={[Function]}
-                                                        onClick={[Function]}
-                                                        onCloseListClick={[Function]}
-                                                        onFocus={[Function]}
-                                                        onOpenListClick={[Function]}
-                                                        onRemoveOption={[Function]}
-                                                        placeholder="Select a field"
-                                                        rootId={[Function]}
-                                                        searchValue=""
-                                                        selectedOptions={Array []}
-                                                        singleSelection={false}
-                                                        toggleButtonRef={[Function]}
-                                                        updatePosition={[Function]}
-                                                        value=""
+                                                      <div
+                                                        className="euiFormRow euiFormRow--fullWidth"
+                                                        id="random_html_id-row"
                                                       >
-                                                        <EuiFormControlLayout
-                                                          compressed={false}
-                                                          fullWidth={false}
-                                                          icon={
-                                                            Object {
-                                                              "aria-label": "Open list of options",
-                                                              "data-test-subj": "comboBoxToggleListButton",
-                                                              "disabled": undefined,
-                                                              "onClick": [Function],
-                                                              "ref": [Function],
-                                                              "side": "right",
-                                                              "type": "arrowDown",
-                                                            }
-                                                          }
+                                                        <div
+                                                          className="euiFormRow__labelWrapper"
                                                         >
-                                                          <div
-                                                            className="euiFormControlLayout"
+                                                          <EuiFormLabel
+                                                            className="euiFormRow__label"
+                                                            htmlFor="random_html_id"
+                                                            isFocused={false}
+                                                            type="label"
                                                           >
-                                                            <div
-                                                              className="euiFormControlLayout__childrenWrapper"
+                                                            <label
+                                                              className="euiFormLabel euiFormRow__label"
+                                                              htmlFor="random_html_id"
                                                             >
-                                                              <div
-                                                                className="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
-                                                                data-test-subj="comboBoxInput"
-                                                                onClick={[Function]}
-                                                                tabIndex={-1}
-                                                              >
-                                                                <p
-                                                                  className="euiComboBoxPlaceholder"
-                                                                >
-                                                                  Select a field
-                                                                </p>
-                                                                <AutosizeInput
-                                                                  aria-controls=""
-                                                                  className="euiComboBox__input"
-                                                                  data-test-subj="comboBoxSearchInput"
-                                                                  id="axis-select-4"
-                                                                  injectStyles={true}
-                                                                  inputRef={[Function]}
-                                                                  minWidth={1}
-                                                                  onBlur={[Function]}
-                                                                  onChange={[Function]}
-                                                                  onFocus={[Function]}
-                                                                  role="textbox"
-                                                                  style={
-                                                                    Object {
-                                                                      "fontSize": 14,
-                                                                    }
-                                                                  }
-                                                                  value=""
-                                                                >
-                                                                  <div
-                                                                    className="euiComboBox__input"
-                                                                    style={
-                                                                      Object {
-                                                                        "display": "inline-block",
-                                                                        "fontSize": 14,
-                                                                      }
-                                                                    }
-                                                                  >
-                                                                    <input
-                                                                      aria-controls=""
-                                                                      data-test-subj="comboBoxSearchInput"
-                                                                      id="axis-select-4"
-                                                                      onBlur={[Function]}
-                                                                      onChange={[Function]}
-                                                                      onFocus={[Function]}
-                                                                      role="textbox"
-                                                                      style={
-                                                                        Object {
-                                                                          "boxSizing": "content-box",
-                                                                          "width": "2px",
-                                                                        }
-                                                                      }
-                                                                      value=""
-                                                                    />
-                                                                    <div
-                                                                      style={
-                                                                        Object {
-                                                                          "height": 0,
-                                                                          "left": 0,
-                                                                          "overflow": "scroll",
-                                                                          "position": "absolute",
-                                                                          "top": 0,
-                                                                          "visibility": "hidden",
-                                                                          "whiteSpace": "pre",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </div>
-                                                                </AutosizeInput>
-                                                              </div>
-                                                              <EuiFormControlLayoutIcons
-                                                                compressed={false}
-                                                                icon={
-                                                                  Object {
-                                                                    "aria-label": "Open list of options",
-                                                                    "data-test-subj": "comboBoxToggleListButton",
-                                                                    "disabled": undefined,
-                                                                    "onClick": [Function],
-                                                                    "ref": [Function],
-                                                                    "side": "right",
-                                                                    "type": "arrowDown",
-                                                                  }
-                                                                }
-                                                              >
-                                                                <div
-                                                                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                                                                >
-                                                                  <EuiFormControlLayoutCustomIcon
-                                                                    aria-label="Open list of options"
-                                                                    data-test-subj="comboBoxToggleListButton"
-                                                                    iconRef={[Function]}
-                                                                    onClick={[Function]}
-                                                                    size="m"
-                                                                    type="arrowDown"
-                                                                  >
-                                                                    <button
-                                                                      aria-label="Open list of options"
-                                                                      className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
-                                                                      data-test-subj="comboBoxToggleListButton"
-                                                                      onClick={[Function]}
-                                                                      type="button"
-                                                                    >
-                                                                      <EuiIcon
-                                                                        aria-hidden="true"
-                                                                        className="euiFormControlLayoutCustomIcon__icon"
-                                                                        size="m"
-                                                                        type="arrowDown"
-                                                                      >
-                                                                        <EuiIconEmpty
-                                                                          aria-hidden={true}
-                                                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                                                          focusable="false"
-                                                                          role="img"
-                                                                          style={null}
-                                                                        >
-                                                                          <svg
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                                                            focusable="false"
-                                                                            height={16}
-                                                                            role="img"
-                                                                            style={null}
-                                                                            viewBox="0 0 16 16"
-                                                                            width={16}
-                                                                            xmlns="http://www.w3.org/2000/svg"
-                                                                          />
-                                                                        </EuiIconEmpty>
-                                                                      </EuiIcon>
-                                                                    </button>
-                                                                  </EuiFormControlLayoutCustomIcon>
-                                                                </div>
-                                                              </EuiFormControlLayoutIcons>
-                                                            </div>
-                                                          </div>
-                                                        </EuiFormControlLayout>
-                                                      </EuiComboBoxInput>
-                                                    </div>
-                                                  </EuiComboBox>
-                                                </PanelItem>
-                                                <EuiSpacer
-                                                  size="s"
-                                                >
-                                                  <div
-                                                    className="euiSpacer euiSpacer--s"
-                                                  />
-                                                </EuiSpacer>
-                                                <PanelItem
-                                                  advancedTitle="advancedTitle"
-                                                  dropdownList={
-                                                    Array [
-                                                      Object {
-                                                        "name": "count()",
-                                                        "type": "integer",
-                                                      },
-                                                      Object {
-                                                        "name": "tags",
-                                                        "type": "text",
-                                                      },
-                                                    ]
-                                                  }
-                                                  isSingleSelection={false}
-                                                  key="viz-series-1"
-                                                  onSelectChange={[Function]}
-                                                  paddingTitle="Y-axis"
-                                                  vizState={Object {}}
-                                                >
-                                                  <EuiTitle
-                                                    size="xxs"
-                                                  >
-                                                    <h3
-                                                      className="euiTitle euiTitle--xxsmall"
-                                                    >
-                                                      Y-axis
-                                                    </h3>
-                                                  </EuiTitle>
-                                                  <EuiSpacer
-                                                    size="s"
-                                                  >
-                                                    <div
-                                                      className="euiSpacer euiSpacer--s"
-                                                    />
-                                                  </EuiSpacer>
-                                                  <EuiComboBox
-                                                    aria-label="Use aria labels when no actual label is in use"
-                                                    async={false}
-                                                    compressed={false}
-                                                    fullWidth={false}
-                                                    id="axis-select-5"
-                                                    isClearable={true}
-                                                    isInvalid={true}
-                                                    onChange={[Function]}
-                                                    options={
-                                                      Array [
-                                                        Object {
-                                                          "label": "count()",
-                                                          "name": "count()",
-                                                          "type": "integer",
-                                                        },
-                                                        Object {
-                                                          "label": "tags",
-                                                          "name": "tags",
-                                                          "type": "text",
-                                                        },
-                                                      ]
-                                                    }
-                                                    placeholder="Select a field"
-                                                    selectedOptions={Array []}
-                                                    singleSelection={false}
-                                                    sortMatchesBy="none"
-                                                  >
-                                                    <div
-                                                      aria-expanded={false}
-                                                      aria-haspopup="listbox"
-                                                      aria-label="Use aria labels when no actual label is in use"
-                                                      className="euiComboBox euiComboBox-isInvalid"
-                                                      onKeyDown={[Function]}
-                                                      role="combobox"
-                                                    >
-                                                      <EuiComboBoxInput
-                                                        autoSizeInputRef={[Function]}
-                                                        compressed={false}
-                                                        fullWidth={false}
-                                                        hasSelectedOptions={false}
-                                                        id="axis-select-5"
-                                                        inputRef={[Function]}
-                                                        isListOpen={false}
-                                                        noIcon={false}
-                                                        onChange={[Function]}
-                                                        onClear={[Function]}
-                                                        onClick={[Function]}
-                                                        onCloseListClick={[Function]}
-                                                        onFocus={[Function]}
-                                                        onOpenListClick={[Function]}
-                                                        onRemoveOption={[Function]}
-                                                        placeholder="Select a field"
-                                                        rootId={[Function]}
-                                                        searchValue=""
-                                                        selectedOptions={Array []}
-                                                        singleSelection={false}
-                                                        toggleButtonRef={[Function]}
-                                                        updatePosition={[Function]}
-                                                        value=""
-                                                      >
-                                                        <EuiFormControlLayout
-                                                          compressed={false}
-                                                          fullWidth={false}
-                                                          icon={
-                                                            Object {
-                                                              "aria-label": "Open list of options",
-                                                              "data-test-subj": "comboBoxToggleListButton",
-                                                              "disabled": undefined,
-                                                              "onClick": [Function],
-                                                              "ref": [Function],
-                                                              "side": "right",
-                                                              "type": "arrowDown",
-                                                            }
-                                                          }
+                                                              Title
+                                                            </label>
+                                                          </EuiFormLabel>
+                                                        </div>
+                                                        <div
+                                                          className="euiFormRow__fieldWrapper"
                                                         >
-                                                          <div
-                                                            className="euiFormControlLayout"
+                                                          <EuiFieldText
+                                                            aria-describedby="random_html_id-help-0"
+                                                            id="random_html_id"
+                                                            name="title"
+                                                            onBlur={[Function]}
+                                                            onChange={[Function]}
+                                                            onFocus={[Function]}
+                                                            placeholder="Title"
+                                                            value=""
                                                           >
-                                                            <div
-                                                              className="euiFormControlLayout__childrenWrapper"
+                                                            <EuiFormControlLayout
+                                                              fullWidth={false}
+                                                              inputId="random_html_id"
                                                             >
                                                               <div
-                                                                className="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
-                                                                data-test-subj="comboBoxInput"
-                                                                onClick={[Function]}
-                                                                tabIndex={-1}
+                                                                className="euiFormControlLayout"
                                                               >
-                                                                <p
-                                                                  className="euiComboBoxPlaceholder"
-                                                                >
-                                                                  Select a field
-                                                                </p>
-                                                                <AutosizeInput
-                                                                  aria-controls=""
-                                                                  className="euiComboBox__input"
-                                                                  data-test-subj="comboBoxSearchInput"
-                                                                  id="axis-select-5"
-                                                                  injectStyles={true}
-                                                                  inputRef={[Function]}
-                                                                  minWidth={1}
-                                                                  onBlur={[Function]}
-                                                                  onChange={[Function]}
-                                                                  onFocus={[Function]}
-                                                                  role="textbox"
-                                                                  style={
-                                                                    Object {
-                                                                      "fontSize": 14,
-                                                                    }
-                                                                  }
-                                                                  value=""
-                                                                >
-                                                                  <div
-                                                                    className="euiComboBox__input"
-                                                                    style={
-                                                                      Object {
-                                                                        "display": "inline-block",
-                                                                        "fontSize": 14,
-                                                                      }
-                                                                    }
-                                                                  >
+                                                                <div
+                                                                  className="euiFormControlLayout__childrenWrapper"
+                                                                >
+                                                                  <EuiValidatableControl>
                                                                     <input
-                                                                      aria-controls=""
-                                                                      data-test-subj="comboBoxSearchInput"
-                                                                      id="axis-select-5"
+                                                                      aria-describedby="random_html_id-help-0"
+                                                                      className="euiFieldText"
+                                                                      id="random_html_id"
+                                                                      name="title"
                                                                       onBlur={[Function]}
                                                                       onChange={[Function]}
                                                                       onFocus={[Function]}
-                                                                      role="textbox"
-                                                                      style={
-                                                                        Object {
-                                                                          "boxSizing": "content-box",
-                                                                          "width": "2px",
-                                                                        }
-                                                                      }
+                                                                      placeholder="Title"
+                                                                      type="text"
                                                                       value=""
                                                                     />
-                                                                    <div
-                                                                      style={
-                                                                        Object {
-                                                                          "height": 0,
-                                                                          "left": 0,
-                                                                          "overflow": "scroll",
-                                                                          "position": "absolute",
-                                                                          "top": 0,
-                                                                          "visibility": "hidden",
-                                                                          "whiteSpace": "pre",
-                                                                        }
-                                                                      }
-                                                                    />
-                                                                  </div>
-                                                                </AutosizeInput>
-                                                              </div>
-                                                              <EuiFormControlLayoutIcons
-                                                                compressed={false}
-                                                                icon={
-                                                                  Object {
-                                                                    "aria-label": "Open list of options",
-                                                                    "data-test-subj": "comboBoxToggleListButton",
-                                                                    "disabled": undefined,
-                                                                    "onClick": [Function],
-                                                                    "ref": [Function],
-                                                                    "side": "right",
-                                                                    "type": "arrowDown",
-                                                                  }
-                                                                }
-                                                              >
-                                                                <div
-                                                                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                                                                >
-                                                                  <EuiFormControlLayoutCustomIcon
-                                                                    aria-label="Open list of options"
-                                                                    data-test-subj="comboBoxToggleListButton"
-                                                                    iconRef={[Function]}
-                                                                    onClick={[Function]}
-                                                                    size="m"
-                                                                    type="arrowDown"
-                                                                  >
-                                                                    <button
-                                                                      aria-label="Open list of options"
-                                                                      className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
-                                                                      data-test-subj="comboBoxToggleListButton"
-                                                                      onClick={[Function]}
-                                                                      type="button"
-                                                                    >
-                                                                      <EuiIcon
-                                                                        aria-hidden="true"
-                                                                        className="euiFormControlLayoutCustomIcon__icon"
-                                                                        size="m"
-                                                                        type="arrowDown"
-                                                                      >
-                                                                        <EuiIconEmpty
-                                                                          aria-hidden={true}
-                                                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                                                          focusable="false"
-                                                                          role="img"
-                                                                          style={null}
-                                                                        >
-                                                                          <svg
-                                                                            aria-hidden={true}
-                                                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                                                            focusable="false"
-                                                                            height={16}
-                                                                            role="img"
-                                                                            style={null}
-                                                                            viewBox="0 0 16 16"
-                                                                            width={16}
-                                                                            xmlns="http://www.w3.org/2000/svg"
-                                                                          />
-                                                                        </EuiIconEmpty>
-                                                                      </EuiIcon>
-                                                                    </button>
-                                                                  </EuiFormControlLayoutCustomIcon>
+                                                                  </EuiValidatableControl>
+                                                                  <EuiFormControlLayoutIcons />
                                                                 </div>
-                                                              </EuiFormControlLayoutIcons>
+                                                              </div>
+                                                            </EuiFormControlLayout>
+                                                          </EuiFieldText>
+                                                          <EuiFormHelpText
+                                                            className="euiFormRow__text"
+                                                            id="random_html_id-help-0"
+                                                            key="Name your visualization."
+                                                          >
+                                                            <div
+                                                              className="euiFormHelpText euiFormRow__text"
+                                                              id="random_html_id-help-0"
+                                                            >
+                                                              Name your visualization.
                                                             </div>
-                                                          </div>
-                                                        </EuiFormControlLayout>
-                                                      </EuiComboBoxInput>
-                                                    </div>
-                                                  </EuiComboBox>
-                                                </PanelItem>
-                                                <EuiSpacer
-                                                  size="s"
-                                                >
-                                                  <div
-                                                    className="euiSpacer euiSpacer--s"
-                                                  />
-                                                </EuiSpacer>
+                                                          </EuiFormHelpText>
+                                                        </div>
+                                                      </div>
+                                                    </EuiFormRow>
+                                                    <EuiFormRow
+                                                      describedByIds={Array []}
+                                                      display="row"
+                                                      fullWidth={false}
+                                                      hasChildLabel={true}
+                                                      hasEmptyLabelSpace={false}
+                                                      label="Description"
+                                                      labelType="label"
+                                                    >
+                                                      <div
+                                                        className="euiFormRow"
+                                                        id="random_html_id-row"
+                                                      >
+                                                        <div
+                                                          className="euiFormRow__labelWrapper"
+                                                        >
+                                                          <EuiFormLabel
+                                                            className="euiFormRow__label"
+                                                            htmlFor="random_html_id"
+                                                            isFocused={false}
+                                                            type="label"
+                                                          >
+                                                            <label
+                                                              className="euiFormLabel euiFormRow__label"
+                                                              htmlFor="random_html_id"
+                                                            >
+                                                              Description
+                                                            </label>
+                                                          </EuiFormLabel>
+                                                        </div>
+                                                        <div
+                                                          className="euiFormRow__fieldWrapper"
+                                                        >
+                                                          <EuiTextArea
+                                                            aria-label="Use aria labels when no actual label is in use"
+                                                            id="random_html_id"
+                                                            name="description"
+                                                            onBlur={[Function]}
+                                                            onChange={[Function]}
+                                                            onFocus={[Function]}
+                                                            placeholder="Description"
+                                                            value=""
+                                                          >
+                                                            <EuiValidatableControl>
+                                                              <textarea
+                                                                aria-label="Use aria labels when no actual label is in use"
+                                                                className="euiTextArea euiTextArea--resizeVertical"
+                                                                id="random_html_id"
+                                                                name="description"
+                                                                onBlur={[Function]}
+                                                                onChange={[Function]}
+                                                                onFocus={[Function]}
+                                                                placeholder="Description"
+                                                                rows={6}
+                                                                value=""
+                                                              />
+                                                            </EuiValidatableControl>
+                                                          </EuiTextArea>
+                                                        </div>
+                                                      </div>
+                                                    </EuiFormRow>
+                                                  </form>
+                                                </EuiForm>
                                               </div>
                                             </div>
                                           </EuiResizeObserver>
                                         </div>
                                       </div>
                                     </EuiAccordion>
-                                  </ConfigValueOptions>
+                                  </ConfigPanelOptions>
                                 </div>
                               </div>
                             </EuiFormRow>
@@ -8680,6 +7721,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                     id="random_html_id"
                                     onBlur={[Function]}
                                     onFocus={[Function]}
+                                    props={Object {}}
                                     schemas={
                                       Array [
                                         Object {
@@ -8927,26 +7969,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                 "mapTo": "dataConfig",
                                                 "name": "Data",
                                                 "sections": Array [
-                                                  Object {
-                                                    "editor": [Function],
-                                                    "id": "value_options",
-                                                    "mapTo": "valueOptions",
-                                                    "name": "Value options",
-                                                    "schemas": Array [
-                                                      Object {
-                                                        "component": null,
-                                                        "isSingleSelection": false,
-                                                        "mapTo": "xaxis",
-                                                        "name": "X-axis",
-                                                      },
-                                                      Object {
-                                                        "component": null,
-                                                        "isSingleSelection": false,
-                                                        "mapTo": "yaxis",
-                                                        "name": "Y-axis",
-                                                      },
-                                                    ],
-                                                  },
                                                   Object {
                                                     "editor": [Function],
                                                     "id": "legend",
@@ -9055,6 +8077,12 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                           ],
                                                         },
                                                       },
+                                                      Object {
+                                                        "component": [Function],
+                                                        "eleType": "input",
+                                                        "mapTo": "labelSize",
+                                                        "name": "Label Size",
+                                                      },
                                                       Object {
                                                         "component": [Function],
                                                         "defaultState": 0,
@@ -9183,7 +8211,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                             },
                                             "isUniColor": false,
                                             "layout": Object {
-                                              "height": 500,
+                                              "height": 1180,
                                               "legend": Object {
                                                 "orientation": "v",
                                                 "traceorder": "normal",
@@ -9856,6 +8884,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                     id="random_html_id"
                                     onBlur={[Function]}
                                     onFocus={[Function]}
+                                    props={Object {}}
                                     schemas={
                                       Array [
                                         Object {
@@ -9906,6 +8935,12 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                             ],
                                           },
                                         },
+                                        Object {
+                                          "component": [Function],
+                                          "eleType": "input",
+                                          "mapTo": "labelSize",
+                                          "name": "Label Size",
+                                        },
                                         Object {
                                           "component": [Function],
                                           "defaultState": 0,
@@ -10181,26 +9216,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                 "mapTo": "dataConfig",
                                                 "name": "Data",
                                                 "sections": Array [
-                                                  Object {
-                                                    "editor": [Function],
-                                                    "id": "value_options",
-                                                    "mapTo": "valueOptions",
-                                                    "name": "Value options",
-                                                    "schemas": Array [
-                                                      Object {
-                                                        "component": null,
-                                                        "isSingleSelection": false,
-                                                        "mapTo": "xaxis",
-                                                        "name": "X-axis",
-                                                      },
-                                                      Object {
-                                                        "component": null,
-                                                        "isSingleSelection": false,
-                                                        "mapTo": "yaxis",
-                                                        "name": "Y-axis",
-                                                      },
-                                                    ],
-                                                  },
                                                   Object {
                                                     "editor": [Function],
                                                     "id": "legend",
@@ -10309,6 +9324,12 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                           ],
                                                         },
                                                       },
+                                                      Object {
+                                                        "component": [Function],
+                                                        "eleType": "input",
+                                                        "mapTo": "labelSize",
+                                                        "name": "Label Size",
+                                                      },
                                                       Object {
                                                         "component": [Function],
                                                         "defaultState": 0,
@@ -10437,7 +9458,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                             },
                                             "isUniColor": false,
                                             "layout": Object {
-                                              "height": 500,
+                                              "height": 1180,
                                               "legend": Object {
                                                 "orientation": "v",
                                                 "traceorder": "normal",
@@ -11080,10 +10101,80 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                     className="euiSpacer euiSpacer--s"
                                                   />
                                                 </EuiSpacer>
+                                                <InputFieldItem
+                                                  currentValue=""
+                                                  handleInputChange={[Function]}
+                                                  key="viz-series-2"
+                                                  title="Label Size"
+                                                  vizState={Object {}}
+                                                >
+                                                  <EuiTitle
+                                                    size="xxs"
+                                                  >
+                                                    <h3
+                                                      className="euiTitle euiTitle--xxsmall"
+                                                    >
+                                                      Label Size
+                                                    </h3>
+                                                  </EuiTitle>
+                                                  <EuiSpacer
+                                                    size="s"
+                                                  >
+                                                    <div
+                                                      className="euiSpacer euiSpacer--s"
+                                                    />
+                                                  </EuiSpacer>
+                                                  <EuiFieldNumber
+                                                    data-test-subj="valueFieldNumber"
+                                                    fullWidth={true}
+                                                    id="random_html_id"
+                                                    onBlur={[Function]}
+                                                    onChange={[Function]}
+                                                    placeholder="auto"
+                                                  >
+                                                    <EuiFormControlLayout
+                                                      compressed={false}
+                                                      fullWidth={true}
+                                                      inputId="random_html_id"
+                                                      isLoading={false}
+                                                    >
+                                                      <div
+                                                        className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                                      >
+                                                        <div
+                                                          className="euiFormControlLayout__childrenWrapper"
+                                                        >
+                                                          <EuiValidatableControl>
+                                                            <input
+                                                              className="euiFieldNumber euiFieldNumber--fullWidth"
+                                                              data-test-subj="valueFieldNumber"
+                                                              id="random_html_id"
+                                                              onBlur={[Function]}
+                                                              onChange={[Function]}
+                                                              placeholder="auto"
+                                                              type="number"
+                                                            />
+                                                          </EuiValidatableControl>
+                                                          <EuiFormControlLayoutIcons
+                                                            compressed={false}
+                                                            isLoading={false}
+                                                          />
+                                                        </div>
+                                                      </div>
+                                                    </EuiFormControlLayout>
+                                                  </EuiFieldNumber>
+                                                </InputFieldItem>
+                                                <EuiSpacer
+                                                  size="s"
+                                                >
+                                                  <div
+                                                    className="euiSpacer euiSpacer--s"
+                                                  />
+                                                </EuiSpacer>
                                                 <SliderConfig
                                                   currentRange={0}
                                                   handleSliderChange={[Function]}
-                                                  key="viz-series-2"
+                                                  key="viz-series-3"
                                                   max={90}
                                                   maxRange={90}
                                                   min={-90}
@@ -12015,7 +11106,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                 <SliderConfig
                                                   currentRange={0.7}
                                                   handleSliderChange={[Function]}
-                                                  key="viz-series-3"
+                                                  key="viz-series-4"
                                                   max={1}
                                                   maxRange={1}
                                                   minRange={0}
@@ -12203,7 +11294,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                 <SliderConfig
                                                   currentRange={0.97}
                                                   handleSliderChange={[Function]}
-                                                  key="viz-series-4"
+                                                  key="viz-series-5"
                                                   max={1}
                                                   maxRange={1}
                                                   minRange={0}
@@ -12391,7 +11482,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                 <SliderConfig
                                                   currentRange={1}
                                                   handleSliderChange={[Function]}
-                                                  key="viz-series-5"
+                                                  key="viz-series-6"
                                                   max={10}
                                                   maxRange={10}
                                                   minRange={0}
@@ -12579,7 +11670,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                 <SliderConfig
                                                   currentRange={80}
                                                   handleSliderChange={[Function]}
-                                                  key="viz-series-6"
+                                                  key="viz-series-7"
                                                   max={100}
                                                   maxRange={100}
                                                   minRange={0}
@@ -12794,6 +11885,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                     id="random_html_id"
                                     onBlur={[Function]}
                                     onFocus={[Function]}
+                                    props={Object {}}
                                     schemas={Array []}
                                     sectionId="color-theme"
                                     sectionName="Color Theme"
@@ -12992,26 +12084,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                 "mapTo": "dataConfig",
                                                 "name": "Data",
                                                 "sections": Array [
-                                                  Object {
-                                                    "editor": [Function],
-                                                    "id": "value_options",
-                                                    "mapTo": "valueOptions",
-                                                    "name": "Value options",
-                                                    "schemas": Array [
-                                                      Object {
-                                                        "component": null,
-                                                        "isSingleSelection": false,
-                                                        "mapTo": "xaxis",
-                                                        "name": "X-axis",
-                                                      },
-                                                      Object {
-                                                        "component": null,
-                                                        "isSingleSelection": false,
-                                                        "mapTo": "yaxis",
-                                                        "name": "Y-axis",
-                                                      },
-                                                    ],
-                                                  },
                                                   Object {
                                                     "editor": [Function],
                                                     "id": "legend",
@@ -13120,6 +12192,12 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                           ],
                                                         },
                                                       },
+                                                      Object {
+                                                        "component": [Function],
+                                                        "eleType": "input",
+                                                        "mapTo": "labelSize",
+                                                        "name": "Label Size",
+                                                      },
                                                       Object {
                                                         "component": [Function],
                                                         "defaultState": 0,
@@ -13248,7 +12326,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                             },
                                             "isUniColor": false,
                                             "layout": Object {
-                                              "height": 500,
+                                              "height": 1180,
                                               "legend": Object {
                                                 "orientation": "v",
                                                 "traceorder": "normal",
@@ -13511,93 +12589,6 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                       </EuiButtonEmpty>
                     </div>
                   </EuiFlexItem>
-                  <EuiFlexItem
-                    grow={false}
-                  >
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                    >
-                      <EuiButton
-                        data-test-subj="visualizeEditorRenderButton"
-                        disabled={false}
-                        iconType="play"
-                        onClick={[Function]}
-                        size="s"
-                      >
-                        <EuiButtonDisplay
-                          baseClassName="euiButton"
-                          data-test-subj="visualizeEditorRenderButton"
-                          disabled={false}
-                          element="button"
-                          iconType="play"
-                          isDisabled={false}
-                          onClick={[Function]}
-                          size="s"
-                          type="button"
-                        >
-                          <button
-                            className="euiButton euiButton--primary euiButton--small"
-                            data-test-subj="visualizeEditorRenderButton"
-                            disabled={false}
-                            onClick={[Function]}
-                            style={
-                              Object {
-                                "minWidth": undefined,
-                              }
-                            }
-                            type="button"
-                          >
-                            <EuiButtonContent
-                              className="euiButton__content"
-                              iconSide="left"
-                              iconType="play"
-                              textProps={
-                                Object {
-                                  "className": "euiButton__text",
-                                }
-                              }
-                            >
-                              <span
-                                className="euiButtonContent euiButton__content"
-                              >
-                                <EuiIcon
-                                  className="euiButtonContent__icon"
-                                  color="inherit"
-                                  size="m"
-                                  type="play"
-                                >
-                                  <EuiIconEmpty
-                                    aria-hidden={true}
-                                    className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                                    focusable="false"
-                                    role="img"
-                                    style={null}
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                                      focusable="false"
-                                      height={16}
-                                      role="img"
-                                      style={null}
-                                      viewBox="0 0 16 16"
-                                      width={16}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    />
-                                  </EuiIconEmpty>
-                                </EuiIcon>
-                                <span
-                                  className="euiButton__text"
-                                >
-                                  Preview
-                                </span>
-                              </span>
-                            </EuiButtonContent>
-                          </button>
-                        </EuiButtonDisplay>
-                      </EuiButton>
-                    </div>
-                  </EuiFlexItem>
                 </div>
               </EuiFlexGroup>
             </div>
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss
index 2a129f430..e07fded22 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss
@@ -122,4 +122,17 @@ $vis-editor-sidebar-min-width: 350px;
   .visEditorSidebar__autoApplyButton {
     margin-left: $euiSizeM;
   }
-}
\ No newline at end of file
+}
+
+.euiComboBoxOptionsList__rowWrap {
+  max-height: 250px;
+}
+
+.euiComboBoxOptionsList__rowWrap > div {
+  height: 250px !important;
+}
+
+.configPane_options {
+  height: 1198px;
+  overflow: auto;
+}
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx
index 5a6662314..27cf3379c 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx
@@ -122,8 +122,7 @@ export const ConfigPanel = ({ visualizations, setCurVisId, callback, changeIsVal
     const isValid_valueOptions: { [key: string]: boolean } = {
       tree_map: curVisId === TreeMap && valueOptions?.childField?.length !== 0 &&
         valueOptions?.valueField?.length !== 0,
-      gauge: Boolean(curVisId === Gauge && valueOptions?.series && valueOptions.series?.length !== 0 &&
-        valueOptions?.value && valueOptions.value?.length !== 0),
+      gauge: true,
       heatmap: Boolean(curVisId === HeatMap && valueOptions?.zaxis && valueOptions.zaxis?.length !== 0),
       bar: isValidValueOptionsXYAxes,
       line: isValidValueOptionsXYAxes,
@@ -135,7 +134,7 @@ export const ConfigPanel = ({ visualizations, setCurVisId, callback, changeIsVal
 
   useEffect(() => changeIsValidConfigOptionState(Boolean(isValidValueOptionConfigSelected)), [isValidValueOptionConfigSelected]);
 
-  const handleConfigUpdate = useCallback(() => {
+  const handleConfigUpdate = useCallback((updatedConfigs) => {
     try {
       if (!isValidValueOptionConfigSelected) {
         setToast(`Invalid value options configuration selected.`, 'danger');
@@ -146,8 +145,8 @@ export const ConfigPanel = ({ visualizations, setCurVisId, callback, changeIsVal
           vizId: curVisId,
           data: {
             ...{
-              ...vizConfigs,
-              layoutConfig: hjson.parse(vizConfigs.layoutConfig),
+              ...updatedConfigs,
+              layoutConfig: hjson.parse(updatedConfigs.layoutConfig),
             },
           },
         })
@@ -155,16 +154,18 @@ export const ConfigPanel = ({ visualizations, setCurVisId, callback, changeIsVal
     } catch (e: any) {
       setToast(`Invalid visualization configurations. error: ${e.message}`, 'danger');
     }
-  }, [tabId, vizConfigs, changeVisualizationConfig, dispatch, setToast, curVisId]);
+  }, [tabId, changeVisualizationConfig, dispatch, setToast, curVisId]);
 
   const handleConfigChange = (configSchema: string) => {
     return (configChanges: any) => {
+      const updatedVizConfigs = { ...vizConfigs, [configSchema]: configChanges };
       setVizConfigs((staleState) => {
         return {
           ...staleState,
           [configSchema]: configChanges,
         };
       });
+      handleConfigUpdate(updatedVizConfigs);
     };
   };
 
@@ -275,11 +276,12 @@ export const ConfigPanel = ({ visualizations, setCurVisId, callback, changeIsVal
             }}
             fullWidth
             renderOption={vizSelectableItemRenderer}
+            isClearable={false}
           />
           <EuiSpacer size="xs" />
         </EuiFlexItem>
         <EuiFlexItem>
-          <EuiPanel paddingSize="s">
+          <EuiPanel paddingSize="s" className="configPane_options">
             <EuiTabbedContent
               className="vis-config-tabs"
               tabs={tabs}
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel_footer.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel_footer.tsx
index 87e543670..75093f465 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel_footer.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panel_footer.tsx
@@ -32,25 +32,6 @@ export const DefaultEditorControls = ({
             Reset
           </EuiButtonEmpty>
         </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          {isInvalid ? (
-            <EuiToolTip content={'Errors in the highlighted fields need to be resolved.'}>
-              <EuiButton color="danger" iconType="alert" size="s" disabled>
-                Preview
-              </EuiButton>
-            </EuiToolTip>
-          ) : (
-            <EuiButton
-              data-test-subj="visualizeEditorRenderButton"
-              disabled={!isDirty}
-              iconType="play"
-              onClick={onConfigUpdate}
-              size="s"
-            >
-              Preview
-            </EuiButton>
-          )}
-        </EuiFlexItem>
       </EuiFlexGroup>
     </div>
   );
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_bar_chart_styles.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_bar_chart_styles.tsx
index 7098ae117..2fb6465fc 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_bar_chart_styles.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_bar_chart_styles.tsx
@@ -41,7 +41,11 @@ export const ConfigBarChartStyles = ({
 
     const dimensions = useMemo(() =>
         currentSchemas.map((schema: IConfigPanelOptionSection, index: number) => {
-            let params;
+            let params = {
+                title: schema.name,
+                vizState,
+                ...schema.props,
+            }
             const DimensionComponent = schema.component || ButtonGroupItem;
 
             const createDimensionComponent = (dimProps) => (
@@ -52,29 +56,34 @@ export const ConfigBarChartStyles = ({
             )
             if (schema.eleType === 'buttons') {
                 params = {
-                    title: schema.name,
+                    ...params,
                     legend: schema.name,
                     groupOptions: schema?.props?.options.map((btn: { name: string }) => ({ ...btn, label: btn.name })),
                     idSelected: vizState[schema.mapTo] || schema?.props?.defaultSelections[0]?.id,
                     handleButtonChange: handleConfigurationChange(schema.mapTo),
-                    vizState,
-                    ...schema.props,
                 };
                 return createDimensionComponent(params);
             }
-
+            if (schema.eleType === 'input') {
+              params = {
+                title: schema.name,
+                currentValue: vizState[schema.mapTo] || '',
+                handleInputChange: handleConfigurationChange(schema.mapTo),
+                vizState,
+                ...schema.props,
+              };
+              return createDimensionComponent(params);
+            }
             if (schema.eleType === 'slider') {
                 params = {
+                    ...params,
                     minRange: schema?.props?.min || 0,
-                    maxRange: schema.props.max,
+                    maxRange: schema?.props?.max || 100,
                     step: schema?.props?.step || 1,
-                    title: schema.name,
                     currentRange: vizState[schema.mapTo] || schema?.defaultState,
                     ticks: schema?.props?.ticks,
                     showTicks: schema?.props?.showTicks || false,
                     handleSliderChange: handleConfigurationChange(schema.mapTo),
-                    vizState,
-                    ...schema.props,
                 };
                 return createDimensionComponent(params);
             }
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx
index 6f8024244..cacfe2660 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx
@@ -15,7 +15,7 @@ export const ConfigChartOptions = ({
   handleConfigChange,
 }: any) => {
   const { data } = visualizations;
-  const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;
+  const { data: vizData = {}, metadata: { fields = [] } = {}, tree_map } = data?.rawVizData;
   const { dataConfig = {}, layoutConfig = {} } = visualizations?.data?.userConfigs;
 
   const handleConfigurationChange = useCallback(
@@ -44,56 +44,78 @@ export const ConfigChartOptions = ({
     return (
       currentSchemas &&
       currentSchemas.map((schema, index) => {
-        let params = {};
+        let params = {
+          title: schema.name,
+          vizState,
+          ...schema.props,
+        };
         const DimensionComponent = schema.component || PanelItem;
         if (schema.eleType === 'palettePicker') {
           params = {
-            title: schema.name,
+            ...params,
             colorPalettes: schema.options || [],
             selectedColor: vizState[schema.mapTo] || schema.defaultState,
             onSelectChange: handleConfigurationChange(schema.mapTo),
-            vizState,
-            ...schema.props,
           };
         } else if (schema.eleType === 'singleColorPicker') {
           params = {
-            title: schema.name,
+            ...params,
             selectedColor: vizState[schema.mapTo] || schema.defaultState,
             onSelectChange: handleConfigurationChange(schema.mapTo),
-            vizState,
-            ...schema.props,
           };
         } else if (schema.eleType === 'colorpicker') {
           params = {
-            title: schema.name,
+            ...params,
             selectedColor: vizState[schema.mapTo] || schema?.defaultState,
             colorPalettes: schema.options || [],
             onSelectChange: handleConfigurationChange(schema.mapTo),
-            vizState,
-            ...schema.props,
           };
         } else if (schema.eleType === 'treemapColorPicker') {
           params = {
-            title: schema.name,
+            ...params,
             selectedColor: vizState[schema.mapTo] || schema?.defaultState,
             colorPalettes: schema.options || [],
             numberOfParents:
-              (dataConfig?.valueOptions?.parentFields !== undefined &&
-                dataConfig?.valueOptions?.parentFields.length) | 0,
+              (tree_map?.dataConfig?.dimensions !== undefined &&
+                tree_map?.dataConfig.dimensions[0].parentFields.length) | 0,
             onSelectChange: handleConfigurationChange(schema.mapTo),
-            vizState,
-            ...schema.props,
           };
         } else if (schema.eleType === 'input') {
           params = {
-            title: schema.name,
+            ...params,
             currentValue: vizState[schema.mapTo] || '',
+            numValue: vizState[schema.mapTo] || '',
             handleInputChange: handleConfigurationChange(schema.mapTo),
-            vizState,
-            ...schema.props,
+          };
+        } else if (schema.eleType === 'slider') {
+          params = {
+            ...params,
+            maxRange: schema.props.max,
+            currentRange: vizState[schema.mapTo] || schema?.defaultState,
+            handleSliderChange: handleConfigurationChange(schema.mapTo),
+          };
+        } else if (schema.eleType === 'switchButton') {
+          params = {
+            ...params,
+            title: schema.name,
+            currentValue: vizState[schema.mapTo],
+            onToggle: handleConfigurationChange(schema.mapTo),
+          };
+        } else if (schema.eleType === 'buttons') {
+          params = {
+            ...params,
+            title: schema.name,
+            legend: schema.name,
+            groupOptions: schema?.props?.options.map((btn: { name: string }) => ({
+              ...btn,
+              label: btn.name,
+            })),
+            idSelected: vizState[schema.mapTo] || schema?.props?.defaultSelections[0]?.id,
+            handleButtonChange: handleConfigurationChange(schema.mapTo),
           };
         } else {
           params = {
+            ...params,
             paddingTitle: schema.name,
             advancedTitle: 'advancedTitle',
             dropdownList:
@@ -102,8 +124,6 @@ export const ConfigChartOptions = ({
             onSelectChange: handleConfigurationChange(schema.mapTo),
             isSingleSelection: schema.isSingleSelection,
             selectedAxis: vizState[schema.mapTo] || schema.defaultState,
-            vizState,
-            ...schema.props,
           };
         }
         return (
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx
index af429b4f3..96df2be20 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx
@@ -5,121 +5,119 @@
 
 import React, { useCallback } from 'react';
 import {
-    EuiButton,
-    EuiAccordion,
-    EuiFormRow,
-    EuiColorPicker,
-    EuiSpacer,
-    EuiIcon,
-    EuiFlexGroup,
-    EuiFlexItem,
-    htmlIdGenerator,
-    EuiComboBox,
+  EuiButton,
+  EuiAccordion,
+  EuiFormRow,
+  EuiColorPicker,
+  EuiSpacer,
+  EuiIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  htmlIdGenerator,
+  EuiComboBox,
 } from '@elastic/eui';
 import { isEmpty } from 'lodash';
 import { ADD_BUTTON_TEXT } from '../../../../../../../../common/constants/explorer';
-
+import { NUMERICAL_FIELDS } from '../../../../../../../../common/constants/shared';
 
 export const ConfigColorTheme = ({
-    visualizations,
-    schemas,
-    vizState = [],
-    handleConfigChange,
-    sectionName = 'Color Theme',
+  visualizations,
+  schemas,
+  vizState = [],
+  handleConfigChange,
+  sectionName = 'Color Theme',
 }: any) => {
-    const { data } = visualizations;
-    const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;
-
-    const addButtonText = ADD_BUTTON_TEXT;
-    const getColorThemeRow = () => ({
-        ctid: htmlIdGenerator('ct')(),
-        name: '',
-        color: '#FC0505',
-    })
+  const { data } = visualizations;
+  const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;
+  const addButtonText = ADD_BUTTON_TEXT;
+  const getColorThemeRow = () => ({
+    ctid: htmlIdGenerator('ct')(),
+    name: '',
+    color: '#FC0505',
+  });
 
-    const options = fields.map((item) => ({
-        ...item,
-        label: item.name,
+  const options = fields
+    .filter((item) => NUMERICAL_FIELDS.includes(item.type))
+    .map((item) => ({
+      ...item,
+      label: item.name,
     }));
+  const getUpdatedOptions = () =>
+    options.filter((option) => !vizState.some((vizOpt) => option.name === vizOpt?.name?.name));
 
-    const getUpdatedOptions = () => options.filter(option => !vizState.some(vizOpt =>
-        option.name === vizOpt?.name?.name
-    ))
-
-    const handleAddColorTheme = useCallback(() => {
-        const res = isEmpty(vizState) ? [] : vizState;
-        handleConfigChange([getColorThemeRow(), ...res]);
-    }, [vizState, handleConfigChange]);
+  const handleAddColorTheme = useCallback(() => {
+    const res = isEmpty(vizState) ? [] : vizState;
+    handleConfigChange([getColorThemeRow(), ...res]);
+  }, [vizState, handleConfigChange]);
 
-    const handleColorThemeChange = useCallback(
-        (ctId, ctName) => (event) => {
-            handleConfigChange([
-                ...vizState.map((ct) => {
-                    if (ctId !== ct.ctid) return ct;
-                    return {
-                        ...ct,
-                        [ctName]: (ctName === 'color' ? event : event[0]) || '',
-                    };
-                }),
-            ]);
-        },
-        [vizState, handleConfigChange]
-    );
+  const handleColorThemeChange = useCallback(
+    (ctId, ctName) => (event) => {
+      handleConfigChange([
+        ...vizState.map((ct) => {
+          if (ctId !== ct.ctid) return ct;
+          return {
+            ...ct,
+            [ctName]: (ctName === 'color' ? event : event[0]) || '',
+          };
+        }),
+      ]);
+    },
+    [vizState, handleConfigChange]
+  );
 
-    const handleColorThemeDelete = useCallback(
-        (ctId) => (event) =>
-            handleConfigChange([...vizState.filter((ct) => ct.ctid !== ctId)]),
-        [vizState, handleConfigChange]
-    );
-    return (
-        <EuiAccordion
-            initialIsOpen
-            id={`configPanel__${sectionName}`}
-            buttonContent={sectionName}
-            paddingSize="s"
-        >
-            <EuiButton fullWidth size="s" onClick={handleAddColorTheme}>
-                {addButtonText}
-            </EuiButton>
-            <EuiSpacer size="s" />
-            {!isEmpty(vizState) &&
-                vizState.map((ct) => {
-                    return (
-                        <>
-                            <EuiFormRow fullWidth label="">
-                                <EuiFlexGroup alignItems="center" gutterSize="xs">
-                                    <EuiFlexItem grow={3}>
-                                        <EuiFormRow helpText="Color">
-                                            <EuiColorPicker
-                                                fullWidth
-                                                onChange={handleColorThemeChange(ct.ctid, 'color')}
-                                                color={ct.color}
-                                            />
-                                        </EuiFormRow>
-                                    </EuiFlexItem>
-                                    <EuiFlexItem grow={4}>
-                                        <EuiFormRow helpText="Field">
-                                            <EuiComboBox
-                                                id={ct.ctid}
-                                                placeholder="Select a field"
-                                                options={getUpdatedOptions()}
-                                                singleSelection
-                                                selectedOptions={ct.name !== '' ? [ct.name] : []}
-                                                onChange={handleColorThemeChange(ct.ctid, 'name')}
-                                                aria-label="Use aria labels when no actual label is in use"
-                                            />
-                                        </EuiFormRow>
-                                    </EuiFlexItem>
-                                    <EuiFlexItem grow={1}>
-                                        <EuiFormRow>
-                                            <EuiIcon type="trash" onClick={handleColorThemeDelete(ct.ctid)} />
-                                        </EuiFormRow>
-                                    </EuiFlexItem>
-                                </EuiFlexGroup>
-                            </EuiFormRow>
-                        </>
-                    );
-                })}
-        </EuiAccordion>
-    );
+  const handleColorThemeDelete = useCallback(
+    (ctId) => (event) => handleConfigChange([...vizState.filter((ct) => ct.ctid !== ctId)]),
+    [vizState, handleConfigChange]
+  );
+  return (
+    <EuiAccordion
+      initialIsOpen
+      id={`configPanel__${sectionName}`}
+      buttonContent={sectionName}
+      paddingSize="s"
+    >
+      <EuiButton fullWidth size="s" onClick={handleAddColorTheme}>
+        {addButtonText}
+      </EuiButton>
+      <EuiSpacer size="s" />
+      {!isEmpty(vizState) &&
+        vizState.map((ct) => {
+          return (
+            <>
+              <EuiFormRow fullWidth label="">
+                <EuiFlexGroup alignItems="center" gutterSize="xs">
+                  <EuiFlexItem grow={3}>
+                    <EuiFormRow helpText="Color">
+                      <EuiColorPicker
+                        fullWidth
+                        onChange={handleColorThemeChange(ct.ctid, 'color')}
+                        color={ct.color}
+                      />
+                    </EuiFormRow>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={4}>
+                    <EuiFormRow helpText="Field">
+                      <EuiComboBox
+                        id={ct.ctid}
+                        placeholder="Select a field"
+                        options={getUpdatedOptions()}
+                        singleSelection
+                        selectedOptions={ct.name !== '' ? [ct.name] : []}
+                        onChange={handleColorThemeChange(ct.ctid, 'name')}
+                        aria-label="Use aria labels when no actual label is in use"
+                      />
+                    </EuiFormRow>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={1}>
+                    <EuiFormRow>
+                      <EuiIcon type="trash" onClick={handleColorThemeDelete(ct.ctid)} />
+                    </EuiFormRow>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiFormRow>
+            </>
+          );
+        })}
+    </EuiAccordion>
+  );
 };
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_legend.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_legend.tsx
index 35e16bc07..7bfc2b10a 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_legend.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_legend.tsx
@@ -24,18 +24,21 @@ export const ConfigLegend = ({ schemas, vizState, handleConfigChange }: any) =>
   const dimensions = useMemo(() => {
     return schemas.map((schema, index) => {
       const DimensionComponent = schema.component || ButtonGroupItem;
-      let params = {};
+      let params = {
+        title: schema.name,
+        vizState,
+        ...schema.props,
+      };
       if (schema.eleType === 'input') {
         params = {
-          title: schema.name,
+          ...params,
           currentValue: vizState[schema.mapTo] || '',
+          numValue: vizState[schema.mapTo] || '',
           handleInputChange: handleConfigurationChange(schema.mapTo),
-          vizState,
-          ...schema.props,
         };
       } else {
         params = {
-          title: schema.name,
+          ...params,
           legend: schema.name,
           groupOptions: schema?.props?.options.map((btn: { name: string }) => ({
             ...btn,
@@ -43,8 +46,6 @@ export const ConfigLegend = ({ schemas, vizState, handleConfigChange }: any) =>
           })),
           idSelected: vizState[schema.mapTo] || schema?.props?.defaultSelections[0]?.id,
           handleButtonChange: handleConfigurationChange(schema.mapTo),
-          vizState,
-          ...schema.props,
         };
       }
       return (
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx
index 23fde5433..5d85c64c0 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx
@@ -14,7 +14,7 @@ export const ConfigLineChartStyles = ({
   vizState,
   handleConfigChange,
   sectionName,
-  sectionId = 'chartStyles'
+  sectionId = 'chartStyles',
 }: any) => {
   const { data } = visualizations;
   const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;
@@ -33,54 +33,75 @@ export const ConfigLineChartStyles = ({
 
   /* To update the schema options based on current style mode selection */
   const currentSchemas = useMemo(() => {
-    if (!vizState?.style || vizState?.style === "lines") {
+    if (!vizState?.style || vizState?.style === 'lines') {
       return schemas.filter((schema: IConfigPanelOptionSection) => schema.mapTo !== 'pointSize');
     }
-    if (vizState?.style === "bar") {
-      return schemas.filter((schema: IConfigPanelOptionSection) => !["interpolation", "pointSize"].includes(schema.mapTo));
+    if (vizState?.style === 'bar') {
+      return schemas.filter(
+        (schema: IConfigPanelOptionSection) =>
+          !['interpolation', 'pointSize'].includes(schema.mapTo)
+      );
     }
-    if (vizState?.style === "markers") {
-      return schemas.filter((schema: IConfigPanelOptionSection) => ["style", "pointSize"].includes(schema.mapTo));
+    if (vizState?.style === 'markers') {
+      return schemas.filter((schema: IConfigPanelOptionSection) =>
+        ['style', 'pointSize'].includes(schema.mapTo)
+      );
     }
     if (vizState?.style === 'lines+markers') {
-      return schemas.filter((schema: IConfigPanelOptionSection) => schema.mapTo !== 'interpolation');
+      return schemas.filter(
+        (schema: IConfigPanelOptionSection) => schema.mapTo !== 'interpolation'
+      );
     }
   }, [vizState]);
 
-  const dimensions = useMemo(() =>
-    currentSchemas && currentSchemas.map((schema: IConfigPanelOptionSection, index: string) => {
-      const DimensionComponent = schema.component || ButtonGroupItem;
-      let params = {
-        title: schema.name,
-        vizState,
-        ...schema.props
-      };
-
-      if (schema.eleType === 'buttons') {
-        params = {
-          ...params,
-          legend: schema.name,
-          groupOptions: schema?.props?.options.map((btn: { name: string }) => ({ ...btn, label: btn.name })),
-          idSelected: vizState[schema.mapTo] || schema?.props?.defaultSelections[0]?.id,
-          handleButtonChange: handleConfigurationChange(schema.mapTo),
-        };
-      } else if (schema.eleType === 'slider') {
-        params = {
-          ...params,
-          maxRange: schema?.props?.max,
-          currentRange: vizState[schema.mapTo] || schema?.defaultState,
-          handleSliderChange: handleConfigurationChange(schema.mapTo),
+  const dimensions = useMemo(
+    () =>
+      currentSchemas &&
+      currentSchemas.map((schema: IConfigPanelOptionSection, index: number) => {
+        const DimensionComponent = schema.component || ButtonGroupItem;
+        let params = {
+          title: schema.name,
+          vizState,
+          ...schema.props,
         };
-      }
-
-      return (
-        <>
-          <DimensionComponent key={`viz-series-${index}`} {...params} />
-          <EuiSpacer size="s" />
-        </>
-      )
-    })
-    , [currentSchemas, vizState, handleConfigurationChange]);
+        if (schema.eleType === 'buttons') {
+          params = {
+            ...params,
+            legend: schema.name,
+            groupOptions: schema?.props?.options.map((btn: { name: string }) => ({
+              ...btn,
+              label: btn.name,
+            })),
+            idSelected: vizState[schema.mapTo] || schema?.props?.defaultSelections[0]?.id,
+            handleButtonChange: handleConfigurationChange(schema.mapTo),
+          };
+        } else if (schema.eleType === 'slider') {
+          params = {
+            ...params,
+            minRange: schema?.props?.min || 0,
+            maxRange: schema?.props?.max || 100,
+            step: schema?.props?.step || 1,
+            currentRange: vizState[schema.mapTo] || schema?.defaultState,
+            ticks: schema?.props?.ticks,
+            showTicks: schema?.props?.showTicks || false,
+            handleSliderChange: handleConfigurationChange(schema.mapTo),
+          };
+        } else if (schema.eleType === 'input') {
+          params = {
+            ...params,
+            numValue: vizState[schema.mapTo] || '',
+            handleInputChange: handleConfigurationChange(schema.mapTo),
+          };
+        }
+        return (
+          <>
+            <DimensionComponent key={`viz-series-${index}`} {...params} />
+            <EuiSpacer size="s" />
+          </>
+        );
+      }),
+    [currentSchemas, vizState, handleConfigurationChange]
+  );
 
   return (
     <EuiAccordion
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_number_input.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_number_input.tsx
index e7613d16a..ffca76f7b 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_number_input.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_number_input.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { EuiFieldNumber, EuiTitle, EuiSpacer, htmlIdGenerator } from '@elastic/eui';
 
 interface InputFieldProps {
@@ -16,19 +16,24 @@ export const InputFieldItem: React.FC<InputFieldProps> = ({
   title,
   numValue,
   handleInputChange,
-}) => (
-  <>
-    <EuiTitle size="xxs">
-      <h3>{title}</h3>
-    </EuiTitle>
-    <EuiSpacer size="s" />
-    <EuiFieldNumber
-      id={htmlIdGenerator('input-number')()}
-      fullWidth
-      placeholder="auto"
-      value={numValue}
-      onChange={(e) => handleInputChange(e.target.value)}
-      data-test-subj="valueFieldNumber"
-    />
-  </>
-);
+}) => {
+  const [fieldValue, setFieldValue] = useState<number | string>(numValue);
+
+  return (
+    <>
+      <EuiTitle size="xxs">
+        <h3>{title}</h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiFieldNumber
+        id={htmlIdGenerator('input-number')()}
+        fullWidth
+        placeholder="auto"
+        value={fieldValue}
+        onChange={(e) => setFieldValue(e.target.value)}
+        onBlur={() => handleInputChange(fieldValue)}
+        data-test-subj="valueFieldNumber"
+      />
+    </>
+  );
+};
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_option_gauge.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_option_gauge.tsx
new file mode 100644
index 000000000..e57b1870b
--- /dev/null
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_option_gauge.tsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useEffect } from 'react';
+import { EuiFormRow, EuiFieldNumber } from '@elastic/eui';
+import { DefaultGaugeChartParameters } from '../../../../../../../../common/constants/explorer';
+
+const helpText = `Limit number of gauges.`;
+
+export const ConfigPanelOptionGauge = ({
+  visualizations,
+  vizState,
+  panelOptionsValues,
+  handleConfigChange,
+}: any) => {
+  const { Gauge = {} } = visualizations?.data?.rawVizData;
+  const isReadOnly = !(
+    Gauge?.dataConfig?.dimensions?.length && Gauge?.dataConfig?.dimensions[0]?.name != ''
+  );
+  const [numberOfGauges, setNumberOfGauges] = useState<number>(
+    DefaultGaugeChartParameters.DisplayDefaultGauges
+  );
+
+  useEffect(() => {
+    if (!vizState) {
+      setNumberOfGauges(DefaultGaugeChartParameters.DisplayDefaultGauges);
+    }
+  }, [vizState?.numberOfGauges]);
+
+  return (
+    <EuiFormRow fullWidth label="Number of gauges" helpText={helpText}>
+      <EuiFieldNumber
+        name="numberOfGauges"
+        onChange={(e) => {
+          setNumberOfGauges(Number(e.target.value));
+        }}
+        value={numberOfGauges}
+        onBlur={() => {
+          const newPanelOptions = {
+            ...panelOptionsValues,
+            numberOfGauges: numberOfGauges,
+          };
+          handleConfigChange(newPanelOptions);
+        }}
+        placeholder={'Number of gauges'}
+        readOnly={isReadOnly}
+      />
+    </EuiFormRow>
+  );
+};
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_options.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_options.tsx
index a1a6d75d9..e6db2acb7 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_options.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_options.tsx
@@ -3,25 +3,37 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useState, useEffect } from 'react';
 import { EuiFieldText, EuiForm, EuiFormRow, EuiTextArea, EuiAccordion } from '@elastic/eui';
+import { visChartTypes } from '../../../../../../../../common/constants/shared';
+import { DefaultGaugeChartParameters } from '../../../../../../../../common/constants/explorer';
+import { ConfigPanelOptionGauge } from './config_panel_option_gauge';
 
 const helpText = 'Name your visualization.';
 
 export const ConfigPanelOptions = ({ visualizations, handleConfigChange, vizState }: any) => {
   const { dataConfig = {} } = visualizations?.data?.userConfigs;
+  const { name } = visualizations?.vis;
 
-  const handleConfigurationChange = useCallback(
-    (stateFiledName) => {
-      return (changes) => {
-        handleConfigChange({
-          ...vizState,
-          [stateFiledName]: changes,
-        });
-      };
-    },
-    [handleConfigChange, vizState]
-  );
+  const [panelOptionsValues, setPanelOptionsValues] = useState({
+    title: '',
+    description: '',
+  });
+
+  useEffect(() => {
+    setPanelOptionsValues({
+      title: vizState?.title || '',
+      description: vizState?.description || '',
+      ...(visualizations?.vis?.name?.toLowerCase() === visChartTypes.Gauge && {
+        numberOfGauges:
+          vizState?.numberOfGauges || DefaultGaugeChartParameters.DisplayDefaultGauges,
+      }),
+    });
+  }, [name, vizState?.title, vizState?.description, vizState?.numberOfGauges]);
+
+  const handleTextChange = ({ target }) => {
+    setPanelOptionsValues({ ...panelOptionsValues, [target.name]: target.value });
+  };
 
   return (
     <EuiAccordion
@@ -33,20 +45,32 @@ export const ConfigPanelOptions = ({ visualizations, handleConfigChange, vizStat
       <EuiForm component="form">
         <EuiFormRow fullWidth label="Title" helpText={`${helpText}`}>
           <EuiFieldText
-            name="first"
-            onChange={(e) => handleConfigurationChange('title')(e.target.value)}
-            value={vizState?.title || ''}
+            name="title"
+            onChange={handleTextChange}
+            onBlur={() => handleConfigChange(panelOptionsValues)}
+            value={panelOptionsValues.title}
             placeholder={'Title'}
           />
         </EuiFormRow>
         <EuiFormRow label="Description">
           <EuiTextArea
+            name="description"
             aria-label="Use aria labels when no actual label is in use"
             placeholder={'Description'}
-            value={vizState?.description || ''}
-            onChange={(e) => handleConfigurationChange('description')(e.target.value)}
+            value={panelOptionsValues.description}
+            onChange={handleTextChange}
+            onBlur={() => handleConfigChange(panelOptionsValues)}
           />
         </EuiFormRow>
+        {visualizations?.vis?.name?.toLowerCase() === visChartTypes.Gauge && (
+          <ConfigPanelOptionGauge
+            onChange={handleTextChange}
+            handleConfigChange={handleConfigChange}
+            visualizations={visualizations}
+            vizState={vizState}
+            panelOptionsValues={panelOptionsValues}
+          />
+        )}
       </EuiForm>
     </EuiAccordion>
   );
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_switch_button.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_switch_button.tsx
new file mode 100644
index 000000000..934bd8077
--- /dev/null
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_switch_button.tsx
@@ -0,0 +1,25 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiSwitch, EuiSpacer } from '@elastic/eui';
+
+interface SwitchButtonProps {
+  currentValue: boolean;
+  title: string;
+  onToggle: (value: boolean) => void;
+}
+export const SwitchButton = ({ currentValue, onToggle, title }: SwitchButtonProps) => {
+  return (
+    <>
+      <EuiSpacer />
+      <EuiSwitch
+        label={title}
+        checked={currentValue}
+        onChange={(e) => onToggle(e.target.checked)}
+      />
+    </>
+  );
+};
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds.tsx
index c38e8e812..7c342a027 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds.tsx
@@ -32,8 +32,9 @@ export const ConfigThresholds = ({
   vizState = [],
   handleConfigChange,
   sectionName = 'Thresholds',
+  props,
 }: any) => {
-  const addButtonText = '+ Add threadshold';
+  const addButtonText = '+ Add threshold';
   const getThresholdUnit = () => {
     return {
       thid: htmlIdGenerator('thr')(),
@@ -87,6 +88,9 @@ export const ConfigThresholds = ({
         fullWidth
         size="s"
         onClick={handleAddThreshold}
+        {...(props?.maxLimit && {
+          isDisabled: !isEmpty(vizState) && vizState.length === props.maxLimit,
+        })}
       >
         {addButtonText}
       </EuiButton>
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_treemap_parents.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_treemap_parents.tsx
index f92f9db1b..1312c328d 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_treemap_parents.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_treemap_parents.tsx
@@ -31,21 +31,20 @@ export const ConfigTreemapParentFields = ({ dropdownList, selectedAxis, onSelect
     };
   });
 
+  const initialParentState = {
+    name: '',
+    label: '',
+    type: '',
+  };
+
   const handleAddParent = () => {
-    onSelectChange([
-      ...selectedAxis,
-      {
-        name: '',
-        label: '',
-        type: '',
-      },
-    ]);
+    onSelectChange([...selectedAxis, initialParentState]);
   };
 
   const handleParentChange = (options: EuiComboBoxOptionOption<unknown>[], index: number) => {
     onSelectChange([
       ...selectedAxis.slice(0, index),
-      options[0] as ParentUnitType,
+      (options[0] as ParentUnitType) ?? initialParentState,
       ...selectedAxis.slice(index + 1, selectedAxis.length),
     ]);
   };
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_value_options.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_value_options.tsx
index d86467f85..a2d97c369 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_value_options.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_value_options.tsx
@@ -13,7 +13,7 @@ export const ConfigValueOptions = ({
   vizState,
   handleConfigChange,
   sectionName,
-  sectionId = 'valueOptions'
+  sectionId = 'valueOptions',
 }: any) => {
   const { data } = visualizations;
   const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;
@@ -32,18 +32,38 @@ export const ConfigValueOptions = ({
   const dimensions = useMemo(() => {
     return schemas.map((schema, index) => {
       const DimensionComponent = schema.component || PanelItem;
-      const params = {
-        paddingTitle: schema.name,
-        advancedTitle: 'advancedTitle',
-        dropdownList:
-          schema?.options?.map((option) => ({ ...option })) ||
-          fields.map((item) => ({ ...item })),
-        onSelectChange: handleConfigurationChange(schema.mapTo),
-        isSingleSelection: schema.isSingleSelection,
-        selectedAxis: vizState[schema.mapTo] || schema?.defaultState,
+      let params = {
+        title: schema.name,
         vizState,
         ...schema.props,
       };
+
+      if (schema.eleType === 'buttons') {
+        params = {
+          legend: schema.name,
+          groupOptions: schema?.props?.options.map((btn: { name: string }) => ({
+            ...btn,
+            label: btn.name,
+          })),
+          idSelected: vizState[schema.mapTo] || schema?.props?.defaultSelections[0]?.id,
+          handleButtonChange: handleConfigurationChange(schema.mapTo),
+          vizState,
+          ...schema.props,
+        };
+      } else {
+        params = {
+          paddingTitle: schema.name,
+          advancedTitle: 'advancedTitle',
+          dropdownList:
+            schema?.options?.map((option) => ({ ...option })) ||
+            fields.map((item) => ({ ...item })),
+          onSelectChange: handleConfigurationChange(schema.mapTo),
+          isSingleSelection: schema.isSingleSelection,
+          selectedAxis: vizState[schema.mapTo] || schema?.defaultState,
+          vizState,
+          ...schema.props,
+        };
+      }
       return (
         <>
           <DimensionComponent key={`viz-series-${index}`} {...params} />
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx
index 865164c5e..ea2e7d26b 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_item.tsx
@@ -15,13 +15,18 @@ import {
   EuiIcon,
   EuiPanel,
   EuiText,
+  EuiFieldNumber,
+  htmlIdGenerator,
 } from '@elastic/eui';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   render as renderExplorerVis,
   selectExplorerVisualization,
 } from '../../../../../../event_analytics/redux/slices/visualization_slice';
-import { AGGREGATION_OPTIONS } from '../../../../../../../../common/constants/explorer';
+import {
+  AGGREGATION_OPTIONS,
+  numericalTypes,
+} from '../../../../../../../../common/constants/explorer';
 import { ButtonGroupItem } from './config_button_group';
 import { visChartTypes } from '../../../../../../../../common/constants/shared';
 import { ConfigList } from '../../../../../../../../common/types/explorer';
@@ -46,6 +51,29 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) =>
 
   const [configList, setConfigList] = useState<ConfigList>({});
 
+  useEffect(() => {
+    if (
+      configList.dimensions &&
+      configList.metrics &&
+      visualizations.data?.rawVizData?.[visualizations.vis.name] === undefined
+    ) {
+      dispatch(
+        renderExplorerVis({
+          tabId,
+          data: {
+            ...explorerVisualizations,
+            [visualizations.vis.name]: {
+              dataConfig: {
+                metrics: configList.metrics,
+                dimensions: configList.dimensions,
+              },
+            },
+          },
+        })
+      );
+    }
+  }, [configList]);
+
   useEffect(() => {
     if (
       data.rawVizData?.[visualizations.vis.name] &&
@@ -56,18 +84,23 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) =>
       });
     } else if (
       visualizations.vis.name !== visChartTypes.HeatMap &&
+      visualizations.vis.name !== visChartTypes.Histogram &&
       (data.defaultAxes.xaxis || data.defaultAxes.yaxis)
     ) {
       const { xaxis, yaxis } = data.defaultAxes;
       setConfigList({
         dimensions: [...(xaxis && xaxis)],
-        metrics: [...(yaxis && yaxis)],
+        metrics: [...(yaxis && yaxis.map((item, i) => ({ ...item, side: i === 0 ? 'left' : 'right' })))],
       });
-    } else {
+    } else if (visualizations.vis.name === visChartTypes.HeatMap) {
       setConfigList({
         dimensions: [initialConfigEntry, initialConfigEntry],
         metrics: [initialConfigEntry],
       });
+    } else if (visualizations.vis.name === visChartTypes.Histogram) {
+      setConfigList({
+        dimensions: [{ bucketSize: '', bucketOffset: '' }],
+      });
     }
   }, [
     data.defaultAxes,
@@ -86,7 +119,7 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) =>
       listItem.type = value !== '' ? fields.find((x) => x.name === value)?.type : '';
       listItem.name = value;
     }
-    const newList = {
+    const updatedList = {
       ...list,
       [name]: [
         ...list[name].slice(0, index),
@@ -94,23 +127,36 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) =>
         ...list[name].slice(index + 1, list[name].length),
       ],
     };
-    setConfigList(newList);
+    setConfigList(updatedList);
+    updateChart(updatedList);
+  };
+
+  const updateHistogramConfig = (configName: string, fieldName: string, value: string) => {
+    const list = { ...configList };
+    let listItem = { ...list[configName][0] };
+    listItem[fieldName] = value;
+    const updatedList = {
+      ...list,
+      [configName]: [listItem],
+    };
+    setConfigList(updatedList);
   };
 
   const handleServiceRemove = (index: number, name: string) => {
     const list = { ...configList };
     const arr = [...list[name]];
     arr.splice(index, 1);
-    const y = { ...list, [name]: arr };
-    setConfigList(y);
+    const updatedList = { ...list, [name]: arr };
+    setConfigList(updatedList);
+    updateChart(updatedList);
   };
 
   const handleServiceAdd = (name: string) => {
-    let newList = { ...configList, [name]: [...configList[name], initialConfigEntry] };
-    setConfigList(newList);
+    const updatedList = { ...configList, [name]: [...configList[name], initialConfigEntry] };
+    setConfigList(updatedList);
   };
 
-  const updateChart = () => {
+  const updateChart = (updatedConfigList = configList) => {
     dispatch(
       renderExplorerVis({
         tabId,
@@ -118,8 +164,8 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) =>
           ...explorerVisualizations,
           [visualizations.vis.name]: {
             dataConfig: {
-              metrics: configList.metrics,
-              dimensions: configList.dimensions,
+              metrics: updatedConfigList.metrics,
+              dimensions: updatedConfigList.dimensions,
             },
           },
         },
@@ -128,9 +174,20 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) =>
   };
 
   const isPositionButtonVisible = (sectionName: string) =>
-    sectionName === 'metrics' &&
-    (visualizations.vis.name === visChartTypes.Line ||
-      visualizations.vis.name === visChartTypes.Bar);
+    sectionName === 'metrics' && visualizations.vis.name === visChartTypes.Line;
+
+  const getOptionsAvailable = (sectionName: string) => {
+    let selectedFields = {};
+    for (const key in configList) {
+      configList[key] && configList[key].forEach((field) => (selectedFields[field.label] = true));
+    }
+    const unselectedFields = fieldOptionList.filter((field) => !selectedFields[field.label]);
+    return sectionName === 'metrics'
+      ? unselectedFields
+      : visualizations.vis.name === visChartTypes.Line
+        ? unselectedFields.filter((i) => i.type === 'timestamp')
+        : unselectedFields;
+  };
 
   const getCommonUI = (lists, sectionName: string) =>
     lists &&
@@ -143,7 +200,7 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) =>
                 <h5>{index === 0 ? 'X-Axis' : 'Y-Axis'}</h5>
               </EuiTitle>
             )}
-            <EuiPanel color="subdued">
+            <EuiPanel color="subdued" style={{ padding: '0px' }}>
               <EuiFormRow
                 label="Aggregation"
                 labelAppend={
@@ -177,7 +234,7 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) =>
                   aria-label="Accessible screen reader label"
                   placeholder="Select a field"
                   singleSelection={{ asPlainText: true }}
-                  options={fieldOptionList}
+                  options={getOptionsAvailable(sectionName)}
                   selectedOptions={singleField.label ? [{ label: singleField.label }] : []}
                   onChange={(e) =>
                     updateList(e.length > 0 ? e[0].label : '', index, sectionName, 'label')
@@ -216,6 +273,7 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) =>
                     iconType="plusInCircleFilled"
                     color="primary"
                     onClick={() => handleServiceAdd(sectionName)}
+                    disabled={sectionName === "dimensions" && visualizations.vis.name === visChartTypes.Line}
                   >
                     Add
                   </EuiButton>
@@ -228,29 +286,67 @@ export const DataConfigPanelItem = ({ fieldOptionList, visualizations }: any) =>
       </>
     ));
 
+  const getNumberField = (type: string) => (
+    <>
+      <EuiFieldNumber
+        id={htmlIdGenerator('input-number')()}
+        fullWidth
+        placeholder="auto"
+        value={
+          configList?.dimensions &&
+            configList?.dimensions.length > 0 &&
+            configList.dimensions[0][type]
+            ? configList.dimensions[0][type]
+            : ''
+        }
+        onChange={(e) => updateHistogramConfig('dimensions', type, e.target.value)}
+        onBlur={() => updateChart()}
+        data-test-subj="valueFieldNumber"
+      />
+      <EuiSpacer size="s" />
+    </>
+  );
+
   return (
     <>
       <EuiTitle size="xxs">
         <h3>Data Configurations</h3>
       </EuiTitle>
       <EuiSpacer size="s" />
-      <EuiTitle size="xxs">
-        <h3>Dimensions</h3>
-      </EuiTitle>
-      {getCommonUI(configList.dimensions, 'dimensions')}
+      {visualizations.vis.name !== visChartTypes.Histogram ? (
+        <>
+          <EuiTitle size="xxs">
+            <h3>Dimensions</h3>
+          </EuiTitle>
+          {getCommonUI(configList.dimensions, 'dimensions')}
 
-      <EuiSpacer size="s" />
-      <EuiTitle size="xxs">
-        <h3>Metrics</h3>
-      </EuiTitle>
-      {getCommonUI(configList.metrics, 'metrics')}
+          <EuiSpacer size="s" />
+          <EuiTitle size="xxs">
+            <h3>Metrics</h3>
+          </EuiTitle>
+          {getCommonUI(configList.metrics, 'metrics')}
+        </>
+      ) : (
+        <>
+          <EuiTitle size="xxs">
+            <h3>Bucket Size</h3>
+          </EuiTitle>
+          {getNumberField('bucketSize')}
 
+          <EuiSpacer size="s" />
+          <EuiTitle size="xxs">
+            <h3>Bucket Offset</h3>
+          </EuiTitle>
+          {getNumberField('bucketOffset')}
+        </>
+      )}
       <EuiFlexItem grow={false}>
         <EuiButton
           data-test-subj="visualizeEditorRenderButton"
           iconType="play"
-          onClick={updateChart}
+          onClick={() => updateChart()}
           size="s"
+          disabled
         >
           Update chart
         </EuiButton>
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts
index 5ac7e5773..42a95839d 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts
@@ -18,3 +18,7 @@ export { SingleColorPicker } from './config_single_color_picker';
 export { PanelItem } from './config_panel_item';
 export { ConfigTreemapParentFields } from './config_treemap_parents';
 export { InputFieldItem } from './config_number_input';
+export { SliderConfig } from './config_style_slider';
+export { ConfigColorTheme } from './config_color_theme';
+export { SwitchButton } from './config_switch_button';
+export { ButtonGroupItem } from './config_button_group';
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx
index a807baf6a..7cf292d08 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx
@@ -19,6 +19,8 @@ import {
   selectExplorerVisualization,
 } from '../../../../../../event_analytics/redux/slices/visualization_slice';
 import { ConfigTreemapParentFields } from './config_treemap_parents';
+import { numericalTypes } from '../../../../../../../../common/constants/explorer';
+
 
 export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID }: any) => {
   const dispatch = useDispatch();
@@ -48,6 +50,20 @@ export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID
         dimensions: [{ childField: { ...xaxis[0] }, parentFields: [] }],
         metrics: [{ valueField: { ...yaxis[0] } }],
       });
+      dispatch(
+        renderExplorerVis({
+          tabId: tabID,
+          data: {
+            ...explorerVisualizations,
+            [visualizations.vis.name]: {
+              dataConfig: {
+                metrics: [{ valueField: { ...yaxis[0] } }],
+                dimensions: [{ childField: { ...xaxis[0] }, parentFields: [] }],
+              },
+            },
+          },
+        })
+      );
     }
   }, [
     data.defaultAxes,
@@ -70,9 +86,10 @@ export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID
       [configName]: [listItem],
     };
     setConfigList(newList);
+    updateChart(newList);
   };
 
-  const updateChart = () => {
+  const updateChart = (configList) => {
     dispatch(
       renderExplorerVis({
         tabId: tabID,
@@ -89,8 +106,31 @@ export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID
     );
   };
 
+  const getOptionsAvailable = ((sectionName: string) => {
+    const { dimensions, metrics } = configList;
+    let selectedFields = {};
+    let allSelectedFields = [];
+
+    for (const key in configList) {
+      if (key === 'dimensions') {
+        const [dimElements] = dimensions;
+        const { childField, parentFields } = dimElements;
+        allSelectedFields = [childField, ...parentFields];
+
+      } else if (key === 'metrics') {
+        const [metricsElement] = metrics;
+        allSelectedFields = [metricsElement.valueField];
+      }
+      const allValidSelectedFields = allSelectedFields.filter(item => item?.label);
+      allValidSelectedFields.length > 0 && allValidSelectedFields.forEach((field) => selectedFields[field.label] = true)
+    }
+
+    const unselectedFields = fieldOptionList.filter((field) => !selectedFields[field.label]);
+    return sectionName === 'metrics' ? unselectedFields.filter((field) => numericalTypes.includes(field.type)) : unselectedFields;
+  });
+
   return (
-    <>
+    <div style={{ height: 'auto' }}>
       <EuiTitle size="xxs">
         <h3>Data Configurations</h3>
       </EuiTitle>
@@ -103,9 +143,11 @@ export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID
           <EuiFormRow label="Child Field">
             <EuiComboBox
               placeholder="Select a field"
-              options={fieldOptionList}
+              options={getOptionsAvailable("dimensions")}
               selectedOptions={
-                configList.dimensions[0].childField ? [configList.dimensions[0].childField] : []
+                configList.dimensions[0].childField?.label !== ''
+                  ? [{ label: configList.dimensions[0].childField?.label }]
+                  : []
               }
               singleSelection={{ asPlainText: true }}
               onChange={(val) =>
@@ -116,8 +158,8 @@ export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID
 
           <EuiSpacer size="s" />
           <ConfigTreemapParentFields
-            dropdownList={fieldOptionList.map((opt) => ({ label: opt.label, name: opt.label }))}
-            selectedAxis={configList.dimensions[0].parentFields}
+            dropdownList={getOptionsAvailable("dimensions").map((opt) => ({ label: opt.label, name: opt.label }))}
+            selectedAxis={configList.dimensions[0]?.parentFields}
             onSelectChange={(val) => updateList('dimensions', 'parentFields', val)}
           />
           <EuiSpacer size="s" />
@@ -131,9 +173,11 @@ export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID
           <EuiFormRow label="Value Field">
             <EuiComboBox
               placeholder="Select a field"
-              options={fieldOptionList}
+              options={getOptionsAvailable("metrics")}
               selectedOptions={
-                configList.metrics[0].valueField ? [configList.metrics[0].valueField] : []
+                configList.metrics[0].valueField?.label !== ''
+                  ? [{ label: configList.metrics[0].valueField?.label }]
+                  : []
               }
               singleSelection={{ asPlainText: true }}
               onChange={(val) =>
@@ -155,6 +199,6 @@ export const TreemapConfigPanelItem = ({ fieldOptionList, visualizations, tabID
           Update chart
         </EuiButton>
       </EuiFlexItem>
-    </>
+    </div>
   );
 };
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor.tsx
index 1b6ec01e1..6ee5397d8 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor.tsx
@@ -28,6 +28,7 @@ export const VizDataPanel = ({ visualizations, onConfigChange, vizState = {}, ta
           vizState={vizState[section.mapTo] || section.defaultState || {}}
           sectionName={section.name}
           sectionId={section.id}
+          props={section.props || {}}
         />
       </EuiFormRow>
     );
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx
index 8c4163647..6722aeff2 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/index.tsx
@@ -8,7 +8,7 @@ import './app.scss';
 import _ from 'lodash';
 
 import React, { useContext } from 'react';
-import { EuiResizableContainer } from '@elastic/eui';
+import { EuiPanel, EuiResizableContainer, EuiSpacer } from '@elastic/eui';
 import { SELECTED_TIMESTAMP } from '../../../../../common/constants/explorer';
 import { IField, IQuery, IVisualizationContainerProps } from '../../../../../common/types/explorer';
 import { WorkspacePanel } from './workspace_panel';
@@ -51,15 +51,19 @@ export const ExplorerVisualizations = ({
   const { data } = visualizations;
   const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;
 
-  const fieldOptionList = fields.map((name) => {
-    return { label: name.name };
-  })
+  const fieldOptionList = fields.map((field) => {
+    return { ...field, label: field.name };
+  });
 
   return (
     <EuiResizableContainer>
       {(EuiResizablePanel, EuiResizableButton) => (
         <>
-          <EuiResizablePanel initialSize={17} minSize="300" mode="collapsible">
+          <EuiResizablePanel
+            initialSize={17}
+            minSize="300"
+            mode={['collapsible', { position: 'top' }]}
+          >
             <div className="dscFieldChooser">
               <Sidebar
                 query={query}
@@ -74,12 +78,21 @@ export const ExplorerVisualizations = ({
             </div>
           </EuiResizablePanel>
           <EuiResizableButton />
-          <EuiResizablePanel mode={['collapsible', {
-            'data-test-subj': 'panel-1-toggle',
-            className: 'panel-toggle',
-            position: 'top',
-          }]} initialSize={14} minSize="300" style={{ border: "1px solid #D3DAE6", padding: '0px' }}>
-            <div className="">
+          <EuiResizablePanel
+            mode={[
+              'collapsible',
+              {
+                'data-test-subj': 'panel-1-toggle',
+                className: 'panel-toggle',
+                position: 'top',
+              },
+            ]}
+            className="containerPanel"
+            initialSize={14}
+            minSize="300"
+          >
+            <EuiSpacer size="s" />
+            <EuiPanel paddingSize="s" className="dataConfigContainer">
               {curVisId === visChartTypes.TreeMap ? (
                 <TreemapConfigPanelItem
                   fieldOptionList={fieldOptionList}
@@ -93,11 +106,11 @@ export const ExplorerVisualizations = ({
                   tabID={tabId}
                 />
               )}
-            </div>
+            </EuiPanel>
           </EuiResizablePanel>
 
           <EuiResizableButton />
-          <EuiResizablePanel initialSize={65} minSize="30%" mode="main">
+          <EuiResizablePanel className="containerPanel" initialSize={65} minSize="30%" mode="main">
             <WorkspacePanel
               curVisId={curVisId}
               setCurVisId={setCurVisId}
@@ -105,7 +118,12 @@ export const ExplorerVisualizations = ({
             />
           </EuiResizablePanel>
           <EuiResizableButton />
-          <EuiResizablePanel initialSize={20} minSize="200px">
+          <EuiResizablePanel
+            className="containerPanel"
+            initialSize={20}
+            minSize="200px"
+            mode={['collapsible', { position: 'top' }]}
+          >
             <ConfigPanel
               vizVectors={explorerVis}
               visualizations={visualizations}
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/__tests__/__snapshots__/shared_components.test.tsx.snap b/dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/__tests__/__snapshots__/shared_components.test.tsx.snap
index 8ed6302b0..8511fbe6f 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/__tests__/__snapshots__/shared_components.test.tsx.snap
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/__tests__/__snapshots__/shared_components.test.tsx.snap
@@ -30,19 +30,19 @@ exports[`Shared components Renders empty placeholder component 1`] = `
             >
               <EuiIcon
                 color="subdued"
-                size="l"
+                size="xxl"
                 type={[Function]}
               >
                 <LensIconChartBar
                   aria-hidden={true}
-                  className="euiIcon euiIcon--large euiIcon--subdued"
+                  className="euiIcon euiIcon--xxLarge euiIcon--subdued"
                   focusable="false"
                   role="img"
                   style={null}
                 >
                   <svg
                     aria-hidden={true}
-                    className="euiIcon euiIcon--large euiIcon--subdued"
+                    className="euiIcon euiIcon--xxLarge euiIcon--subdued"
                     fill="none"
                     focusable="false"
                     height={22}
@@ -64,10 +64,10 @@ exports[`Shared components Renders empty placeholder component 1`] = `
                 </LensIconChartBar>
               </EuiIcon>
               <EuiSpacer
-                size="s"
+                size="l"
               >
                 <div
-                  className="euiSpacer euiSpacer--s"
+                  className="euiSpacer euiSpacer--l"
                 />
               </EuiSpacer>
               <p>
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.scss b/dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.scss
new file mode 100644
index 000000000..00045e476
--- /dev/null
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.scss
@@ -0,0 +1,12 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+ .lnsChart__empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 1180px;
+  font-size: 20px;
+}
diff --git a/dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.tsx b/dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.tsx
index 40d449ea7..bbfed2bb0 100644
--- a/dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.tsx
+++ b/dashboards-observability/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.tsx
@@ -4,14 +4,15 @@
  */
 
 import React from 'react';
-import { EuiIcon, EuiText, IconType, EuiSpacer } from '@elastic/eui';
+import { EuiIcon, EuiText, EuiSpacer } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
+import './empty_placeholder.scss';
 
 export const EmptyPlaceholder = (props: {icon: string}) => (
   <>
     <EuiText className="lnsChart__empty" textAlign="center" color="subdued" size="xs" data-test-subj="vizWorkspace__noData">
-      <EuiIcon type={props.icon} color="subdued" size="l" />
-      <EuiSpacer size="s" />
+      <EuiIcon type={props.icon} color="subdued" size="xxl" />
+      <EuiSpacer size="l" />
       <p>
         <FormattedMessage
           id="visualization_noData"
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
index 1d19db62f..f27d2049a 100644
--- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
@@ -214,26 +214,6 @@ exports[`Bar component Renders bar component 1`] = `
               "mapTo": "dataConfig",
               "name": "Data",
               "sections": Array [
-                Object {
-                  "editor": [Function],
-                  "id": "value_options",
-                  "mapTo": "valueOptions",
-                  "name": "Value options",
-                  "schemas": Array [
-                    Object {
-                      "component": null,
-                      "isSingleSelection": false,
-                      "mapTo": "xaxis",
-                      "name": "X-axis",
-                    },
-                    Object {
-                      "component": null,
-                      "isSingleSelection": false,
-                      "mapTo": "yaxis",
-                      "name": "Y-axis",
-                    },
-                  ],
-                },
                 Object {
                   "editor": [Function],
                   "id": "legend",
@@ -342,6 +322,12 @@ exports[`Bar component Renders bar component 1`] = `
                         ],
                       },
                     },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "labelSize",
+                      "name": "Label Size",
+                    },
                     Object {
                       "component": [Function],
                       "defaultState": 0,
@@ -470,7 +456,7 @@ exports[`Bar component Renders bar component 1`] = `
           },
           "isUniColor": false,
           "layout": Object {
-            "height": 500,
+            "height": 1180,
             "legend": Object {
               "orientation": "v",
               "traceorder": "normal",
@@ -489,160 +475,82 @@ exports[`Bar component Renders bar component 1`] = `
     }
   }
 >
-  <Plt
-    config={Object {}}
-    data={
-      Array [
-        Object {
-          "marker": Object {
-            "color": "rgba(60,161,199,0.4)",
-            "line": Object {
-              "color": "#3CA1C7",
-              "width": 1,
-            },
-          },
-          "name": "count()",
-          "orientation": "v",
-          "type": "bar",
-          "x": Array [
-            "error",
-            "info",
-            "login",
-            "security",
-            "success",
-            "warning",
-          ],
-          "y": Array [
-            154,
-            1753,
-            116,
-            468,
-            1964,
-            219,
-          ],
-        },
-      ]
-    }
-    layout={
-      Object {
-        "bargap": 0.30000000000000004,
-        "bargroupgap": 0.030000000000000027,
-        "barmode": "group",
-        "colorway": Array [
-          "#8C55A3",
-        ],
-        "height": 220,
-        "legend": Object {
-          "orientation": "v",
-        },
-        "margin": Object {
-          "b": 15,
-          "l": 60,
-          "pad": 0,
-          "r": 10,
-          "t": 30,
-        },
-        "showlegend": true,
-        "title": "",
-        "xaxis": Object {
-          "automargin": true,
-          "tickangle": 0,
-        },
-      }
-    }
+  <EmptyPlaceholder
+    icon="visBarVerticalStacked"
   >
-    <PlotlyComponent
-      config={
-        Object {
-          "displayModeBar": false,
-        }
-      }
-      data={
-        Array [
-          Object {
-            "marker": Object {
-              "color": "rgba(60,161,199,0.4)",
-              "line": Object {
-                "color": "#3CA1C7",
-                "width": 1,
-              },
-            },
-            "name": "count()",
-            "orientation": "v",
-            "type": "bar",
-            "x": Array [
-              "error",
-              "info",
-              "login",
-              "security",
-              "success",
-              "warning",
-            ],
-            "y": Array [
-              154,
-              1753,
-              116,
-              468,
-              1964,
-              219,
-            ],
-          },
-        ]
-      }
-      debug={false}
-      divId="explorerPlotComponent"
-      layout={
-        Object {
-          "autosize": true,
-          "bargap": 0.30000000000000004,
-          "bargroupgap": 0.030000000000000027,
-          "barmode": "group",
-          "colorway": Array [
-            "#8C55A3",
-          ],
-          "height": 220,
-          "hovermode": "closest",
-          "legend": Object {
-            "orientation": "v",
-          },
-          "margin": Object {
-            "b": 15,
-            "l": 60,
-            "pad": 0,
-            "r": 10,
-            "t": 30,
-          },
-          "showlegend": true,
-          "title": "",
-          "xaxis": Object {
-            "automargin": true,
-            "tickangle": 0,
-          },
-          "yaxis": Object {
-            "rangemode": "normal",
-            "showgrid": true,
-            "zeroline": false,
-          },
-        }
-      }
-      style={
-        Object {
-          "height": "100%",
-          "width": "100%",
-        }
-      }
-      useResizeHandler={true}
+    <EuiText
+      className="lnsChart__empty"
+      color="subdued"
+      data-test-subj="vizWorkspace__noData"
+      size="xs"
+      textAlign="center"
     >
       <div
-        id="explorerPlotComponent"
-        style={
-          Object {
-            "height": "100%",
-            "width": "100%",
-          }
-        }
-      />
-    </PlotlyComponent>
-  </Plt>
+        className="euiText euiText--extraSmall lnsChart__empty"
+        data-test-subj="vizWorkspace__noData"
+      >
+        <EuiTextAlign
+          textAlign="center"
+        >
+          <div
+            className="euiTextAlign euiTextAlign--center"
+          >
+            <EuiTextColor
+              color="subdued"
+              component="div"
+            >
+              <div
+                className="euiTextColor euiTextColor--subdued"
+              >
+                <EuiIcon
+                  color="subdued"
+                  size="xxl"
+                  type="visBarVerticalStacked"
+                >
+                  <EuiIconEmpty
+                    aria-hidden={true}
+                    className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
+                    focusable="false"
+                    role="img"
+                    style={null}
+                  >
+                    <svg
+                      aria-hidden={true}
+                      className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
+                      focusable="false"
+                      height={16}
+                      role="img"
+                      style={null}
+                      viewBox="0 0 16 16"
+                      width={16}
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </EuiIconEmpty>
+                </EuiIcon>
+                <EuiSpacer
+                  size="l"
+                >
+                  <div
+                    className="euiSpacer euiSpacer--l"
+                  />
+                </EuiSpacer>
+                <p>
+                  <FormattedMessage
+                    defaultMessage="No results found"
+                    id="visualization_noData"
+                    values={Object {}}
+                  >
+                    <span>
+                      No results found
+                    </span>
+                  </FormattedMessage>
+                </p>
+              </div>
+            </EuiTextColor>
+          </div>
+        </EuiTextAlign>
+      </div>
+    </EuiText>
+  </EmptyPlaceholder>
 </Bar>
 `;
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
index edcc736fb..debc9d64e 100644
--- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
@@ -214,26 +214,6 @@ exports[`Heatmap component Renders heatmap component 1`] = `
               "mapTo": "dataConfig",
               "name": "Data",
               "sections": Array [
-                Object {
-                  "editor": [Function],
-                  "id": "value_options",
-                  "mapTo": "valueOptions",
-                  "name": "Value options",
-                  "schemas": Array [
-                    Object {
-                      "component": null,
-                      "isSingleSelection": false,
-                      "mapTo": "xaxis",
-                      "name": "X-axis",
-                    },
-                    Object {
-                      "component": null,
-                      "isSingleSelection": false,
-                      "mapTo": "yaxis",
-                      "name": "Y-axis",
-                    },
-                  ],
-                },
                 Object {
                   "editor": [Function],
                   "id": "legend",
@@ -342,6 +322,12 @@ exports[`Heatmap component Renders heatmap component 1`] = `
                         ],
                       },
                     },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "labelSize",
+                      "name": "Label Size",
+                    },
                     Object {
                       "component": [Function],
                       "defaultState": 0,
@@ -470,7 +456,7 @@ exports[`Heatmap component Renders heatmap component 1`] = `
           },
           "isUniColor": false,
           "layout": Object {
-            "height": 500,
+            "height": 1180,
             "legend": Object {
               "orientation": "v",
               "traceorder": "normal",
@@ -518,19 +504,19 @@ exports[`Heatmap component Renders heatmap component 1`] = `
               >
                 <EuiIcon
                   color="subdued"
-                  size="l"
+                  size="xxl"
                   type="visBarVerticalStacked"
                 >
                   <EuiIconEmpty
                     aria-hidden={true}
-                    className="euiIcon euiIcon--large euiIcon--subdued euiIcon-isLoading"
+                    className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
                     focusable="false"
                     role="img"
                     style={null}
                   >
                     <svg
                       aria-hidden={true}
-                      className="euiIcon euiIcon--large euiIcon--subdued euiIcon-isLoading"
+                      className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
                       focusable="false"
                       height={16}
                       role="img"
@@ -542,10 +528,10 @@ exports[`Heatmap component Renders heatmap component 1`] = `
                   </EuiIconEmpty>
                 </EuiIcon>
                 <EuiSpacer
-                  size="s"
+                  size="l"
                 >
                   <div
-                    className="euiSpacer euiSpacer--s"
+                    className="euiSpacer euiSpacer--l"
                   />
                 </EuiSpacer>
                 <p>
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap
new file mode 100644
index 000000000..321db5d7d
--- /dev/null
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap
@@ -0,0 +1,612 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Histogram component Renders histogram component 1`] = `
+<Histogram
+  config={true}
+  layout={
+    Object {
+      "colorway": Array [
+        "#8C55A3",
+      ],
+      "height": 220,
+      "margin": Object {
+        "b": 15,
+        "l": 60,
+        "pad": 0,
+        "r": 10,
+        "t": 30,
+      },
+      "showlegend": true,
+    }
+  }
+  visualizations={
+    Object {
+      "data": Object {
+        "appData": Object {
+          "fromApp": false,
+        },
+        "defaultAxes": Object {},
+        "indexFields": Object {
+          "availableFields": Array [
+            Object {
+              "name": "agent",
+              "type": "string",
+            },
+            Object {
+              "name": "bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "clientip",
+              "type": "ip",
+            },
+            Object {
+              "name": "event",
+              "type": "struct",
+            },
+            Object {
+              "name": "extension",
+              "type": "string",
+            },
+            Object {
+              "name": "geo",
+              "type": "struct",
+            },
+            Object {
+              "name": "host",
+              "type": "string",
+            },
+            Object {
+              "name": "index",
+              "type": "string",
+            },
+            Object {
+              "name": "ip",
+              "type": "ip",
+            },
+            Object {
+              "name": "machine",
+              "type": "struct",
+            },
+            Object {
+              "name": "memory",
+              "type": "double",
+            },
+            Object {
+              "name": "message",
+              "type": "string",
+            },
+            Object {
+              "name": "phpmemory",
+              "type": "long",
+            },
+            Object {
+              "name": "referer",
+              "type": "string",
+            },
+            Object {
+              "name": "request",
+              "type": "string",
+            },
+            Object {
+              "name": "response",
+              "type": "string",
+            },
+            Object {
+              "name": "tags",
+              "type": "string",
+            },
+            Object {
+              "name": "timestamp",
+              "type": "timestamp",
+            },
+            Object {
+              "name": "url",
+              "type": "string",
+            },
+            Object {
+              "name": "utc_time",
+              "type": "timestamp",
+            },
+          ],
+          "queriedFields": Array [
+            Object {
+              "name": "double_per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "host",
+              "type": "text",
+            },
+            Object {
+              "name": "ip_count",
+              "type": "integer",
+            },
+            Object {
+              "name": "per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "resp_code",
+              "type": "text",
+            },
+            Object {
+              "name": "sum_bytes",
+              "type": "long",
+            },
+          ],
+          "selectedFields": Array [],
+          "unselectedFields": Array [],
+        },
+        "query": Object {},
+        "rawVizData": Object {
+          "data": Object {
+            "count()": Array [
+              154,
+              1753,
+              116,
+              468,
+              1964,
+              219,
+            ],
+            "tags": Array [
+              "error",
+              "info",
+              "login",
+              "security",
+              "success",
+              "warning",
+            ],
+          },
+          "jsonData": Array [
+            Object {
+              "count()": 154,
+              "tags": "error",
+            },
+            Object {
+              "count()": 1753,
+              "tags": "info",
+            },
+            Object {
+              "count()": 116,
+              "tags": "login",
+            },
+            Object {
+              "count()": 468,
+              "tags": "security",
+            },
+            Object {
+              "count()": 1964,
+              "tags": "success",
+            },
+            Object {
+              "count()": 219,
+              "tags": "warning",
+            },
+          ],
+          "metadata": Object {
+            "fields": Array [
+              Object {
+                "name": "count()",
+                "type": "integer",
+              },
+              Object {
+                "name": "tags",
+                "type": "text",
+              },
+            ],
+            "size": 6,
+            "status": 200,
+          },
+        },
+        "userConfigs": Object {},
+      },
+      "vis": Object {
+        "barWidth": 0.97,
+        "category": "Visualizations",
+        "categoryAxis": "xaxis",
+        "component": [Function],
+        "editorConfig": Object {
+          "panelTabs": Array [
+            Object {
+              "editor": [Function],
+              "id": "data-panel",
+              "mapTo": "dataConfig",
+              "name": "Data",
+              "sections": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "legend",
+                  "mapTo": "legend",
+                  "name": "Legend",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "mapTo": "showLegend",
+                      "name": "Show Legend",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                          Object {
+                            "id": "hidden",
+                            "name": "Hidden",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "mapTo": "position",
+                      "name": "Position",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "v",
+                            "name": "Right",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "v",
+                            "name": "Right",
+                          },
+                          Object {
+                            "id": "h",
+                            "name": "Bottom",
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "chart_styles",
+                  "mapTo": "chartStyles",
+                  "name": "Chart styles",
+                  "schemas": Array [
+                    Object {
+                      "component": [Function],
+                      "eleType": "buttons",
+                      "mapTo": "orientation",
+                      "name": "Orientation",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "v",
+                            "name": "Vertical",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "v",
+                            "name": "Vertical",
+                          },
+                          Object {
+                            "id": "h",
+                            "name": "Horizontal",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "buttons",
+                      "mapTo": "mode",
+                      "name": "Mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "group",
+                            "name": "Group",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "group",
+                            "name": "Group",
+                          },
+                          Object {
+                            "id": "stack",
+                            "name": "Stack",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "labelSize",
+                      "name": "Label Size",
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0,
+                      "eleType": "slider",
+                      "mapTo": "rotateBarLabels",
+                      "name": "Rotate bar labels",
+                      "props": Object {
+                        "max": 90,
+                        "min": -90,
+                        "showTicks": true,
+                        "ticks": Array [
+                          Object {
+                            "label": "-90°",
+                            "value": -90,
+                          },
+                          Object {
+                            "label": "-45°",
+                            "value": -45,
+                          },
+                          Object {
+                            "label": "0°",
+                            "value": 0,
+                          },
+                          Object {
+                            "label": "45°",
+                            "value": 45,
+                          },
+                          Object {
+                            "label": "90°",
+                            "value": 90,
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0.7,
+                      "eleType": "slider",
+                      "mapTo": "groupWidth",
+                      "name": "Group width",
+                      "props": Object {
+                        "max": 1,
+                        "step": 0.01,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0.97,
+                      "eleType": "slider",
+                      "mapTo": "barWidth",
+                      "name": "Bar width",
+                      "props": Object {
+                        "max": 1,
+                        "step": 0.01,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 1,
+                      "eleType": "slider",
+                      "mapTo": "lineWidth",
+                      "name": "Line width",
+                      "props": Object {
+                        "max": 10,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 80,
+                      "eleType": "slider",
+                      "mapTo": "fillOpacity",
+                      "name": "Fill Opacity",
+                      "props": Object {
+                        "max": 100,
+                      },
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "color-theme",
+                  "mapTo": "colorTheme",
+                  "name": "Color Theme",
+                  "schemas": Array [],
+                },
+              ],
+            },
+            Object {
+              "content": Array [],
+              "editor": [Function],
+              "id": "style-panel",
+              "mapTo": "layoutConfig",
+              "name": "Layout",
+            },
+            Object {
+              "editor": [Function],
+              "id": "availability-panel",
+              "mapTo": "availabilityConfig",
+              "name": "Availability",
+            },
+          ],
+        },
+        "fillOpacity": 80,
+        "fullLabel": "Bar",
+        "groupWidth": 0.7,
+        "icon": [Function],
+        "iconType": "visBarVerticalStacked",
+        "id": "bar",
+        "label": "Bar",
+        "labelAngle": 0,
+        "legendPosition": "v",
+        "lineWidth": 1,
+        "mode": "group",
+        "name": "bar",
+        "orientation": "v",
+        "selection": Object {
+          "dataLoss": "nothing",
+        },
+        "seriesAxis": "yaxis",
+        "showLegend": "show",
+        "type": "bar",
+        "visConfig": Object {
+          "config": Object {
+            "displaylogo": false,
+            "responsive": true,
+          },
+          "isUniColor": false,
+          "layout": Object {
+            "height": 1180,
+            "legend": Object {
+              "orientation": "v",
+              "traceorder": "normal",
+            },
+            "margin": Object {
+              "b": 30,
+              "l": 60,
+              "pad": 0,
+              "r": 30,
+              "t": 50,
+            },
+            "showlegend": true,
+          },
+        },
+      },
+    }
+  }
+>
+  <Plt
+    config={Object {}}
+    data={
+      Array [
+        Object {
+          "marker": Object {
+            "color": "rgba(60,161,199,0.2)",
+            "line": Object {
+              "color": "rgba(60,161,199,1)",
+              "width": 2,
+            },
+          },
+          "name": "count()",
+          "type": "histogram",
+          "x": Array [
+            154,
+            1753,
+            116,
+            468,
+            1964,
+            219,
+          ],
+          "xbins": undefined,
+        },
+      ]
+    }
+    layout={
+      Object {
+        "barmode": "group",
+        "colorway": Array [
+          "#8C55A3",
+        ],
+        "height": 220,
+        "legend": Object {
+          "orientation": "v",
+        },
+        "margin": Object {
+          "b": 15,
+          "l": 60,
+          "pad": 0,
+          "r": 10,
+          "t": 30,
+        },
+        "showlegend": true,
+        "title": "",
+      }
+    }
+  >
+    <PlotlyComponent
+      config={
+        Object {
+          "displayModeBar": false,
+        }
+      }
+      data={
+        Array [
+          Object {
+            "marker": Object {
+              "color": "rgba(60,161,199,0.2)",
+              "line": Object {
+                "color": "rgba(60,161,199,1)",
+                "width": 2,
+              },
+            },
+            "name": "count()",
+            "type": "histogram",
+            "x": Array [
+              154,
+              1753,
+              116,
+              468,
+              1964,
+              219,
+            ],
+            "xbins": undefined,
+          },
+        ]
+      }
+      debug={false}
+      divId="explorerPlotComponent"
+      layout={
+        Object {
+          "autosize": true,
+          "barmode": "group",
+          "colorway": Array [
+            "#8C55A3",
+          ],
+          "height": 220,
+          "hovermode": "closest",
+          "legend": Object {
+            "orientation": "v",
+          },
+          "margin": Object {
+            "b": 15,
+            "l": 60,
+            "pad": 0,
+            "r": 10,
+            "t": 30,
+          },
+          "showlegend": true,
+          "title": "",
+          "xaxis": Object {
+            "automargin": true,
+            "rangemode": "normal",
+            "showgrid": true,
+            "zeroline": false,
+          },
+          "yaxis": Object {
+            "rangemode": "normal",
+            "showgrid": true,
+            "zeroline": false,
+          },
+        }
+      }
+      style={
+        Object {
+          "height": "100%",
+          "width": "100%",
+        }
+      }
+      useResizeHandler={true}
+    >
+      <div
+        id="explorerPlotComponent"
+        style={
+          Object {
+            "height": "100%",
+            "width": "100%",
+          }
+        }
+      />
+    </PlotlyComponent>
+  </Plt>
+</Histogram>
+`;
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
index 94701f7db..24cba00da 100644
--- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
@@ -214,26 +214,6 @@ exports[`Line component Renders line component 1`] = `
               "mapTo": "dataConfig",
               "name": "Data",
               "sections": Array [
-                Object {
-                  "editor": [Function],
-                  "id": "value_options",
-                  "mapTo": "valueOptions",
-                  "name": "Value options",
-                  "schemas": Array [
-                    Object {
-                      "component": null,
-                      "isSingleSelection": false,
-                      "mapTo": "xaxis",
-                      "name": "X-axis",
-                    },
-                    Object {
-                      "component": null,
-                      "isSingleSelection": false,
-                      "mapTo": "yaxis",
-                      "name": "Y-axis",
-                    },
-                  ],
-                },
                 Object {
                   "editor": [Function],
                   "id": "legend",
@@ -342,6 +322,12 @@ exports[`Line component Renders line component 1`] = `
                         ],
                       },
                     },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "labelSize",
+                      "name": "Label Size",
+                    },
                     Object {
                       "component": [Function],
                       "defaultState": 0,
@@ -470,7 +456,7 @@ exports[`Line component Renders line component 1`] = `
           },
           "isUniColor": false,
           "layout": Object {
-            "height": 500,
+            "height": 1180,
             "legend": Object {
               "orientation": "v",
               "traceorder": "normal",
@@ -489,165 +475,82 @@ exports[`Line component Renders line component 1`] = `
     }
   }
 >
-  <Plt
-    config={Object {}}
-    data={
-      Array [
-        Object {
-          "fill": "tozeroy",
-          "fillcolor": "rgba(60,161,199,0.2)",
-          "line": Object {
-            "color": "#3CA1C7",
-            "shape": "spline",
-            "width": 2,
-          },
-          "marker": Object {
-            "size": 5,
-          },
-          "mode": "lines",
-          "name": undefined,
-          "type": "scatter",
-          "x": Array [
-            "error",
-            "info",
-            "login",
-            "security",
-            "success",
-            "warning",
-          ],
-          "y": undefined,
-        },
-      ]
-    }
-    layout={
-      Object {
-        "colorway": Array [
-          "#8C55A3",
-        ],
-        "height": 220,
-        "legend": Object {
-          "orientation": "v",
-        },
-        "margin": Object {
-          "b": 15,
-          "l": 60,
-          "pad": 0,
-          "r": 10,
-          "t": 30,
-        },
-        "showlegend": true,
-        "title": "",
-        "yaxis1": Object {
-          "overlaying": "y",
-          "side": "left",
-          "tickfont": Object {
-            "color": "#3CA1C7",
-          },
-          "titlefont": Object {
-            "color": "#3CA1C7",
-          },
-        },
-      }
-    }
+  <EmptyPlaceholder
+    icon="visBarVerticalStacked"
   >
-    <PlotlyComponent
-      config={
-        Object {
-          "displayModeBar": false,
-        }
-      }
-      data={
-        Array [
-          Object {
-            "fill": "tozeroy",
-            "fillcolor": "rgba(60,161,199,0.2)",
-            "line": Object {
-              "color": "#3CA1C7",
-              "shape": "spline",
-              "width": 2,
-            },
-            "marker": Object {
-              "size": 5,
-            },
-            "mode": "lines",
-            "name": undefined,
-            "type": "scatter",
-            "x": Array [
-              "error",
-              "info",
-              "login",
-              "security",
-              "success",
-              "warning",
-            ],
-            "y": undefined,
-          },
-        ]
-      }
-      debug={false}
-      divId="explorerPlotComponent"
-      layout={
-        Object {
-          "autosize": true,
-          "barmode": "stack",
-          "colorway": Array [
-            "#8C55A3",
-          ],
-          "height": 220,
-          "hovermode": "closest",
-          "legend": Object {
-            "orientation": "v",
-          },
-          "margin": Object {
-            "b": 15,
-            "l": 60,
-            "pad": 0,
-            "r": 10,
-            "t": 30,
-          },
-          "showlegend": true,
-          "title": "",
-          "xaxis": Object {
-            "automargin": true,
-            "rangemode": "normal",
-            "showgrid": true,
-            "zeroline": false,
-          },
-          "yaxis": Object {
-            "rangemode": "normal",
-            "showgrid": true,
-            "zeroline": false,
-          },
-          "yaxis1": Object {
-            "overlaying": "y",
-            "side": "left",
-            "tickfont": Object {
-              "color": "#3CA1C7",
-            },
-            "titlefont": Object {
-              "color": "#3CA1C7",
-            },
-          },
-        }
-      }
-      style={
-        Object {
-          "height": "100%",
-          "width": "100%",
-        }
-      }
-      useResizeHandler={true}
+    <EuiText
+      className="lnsChart__empty"
+      color="subdued"
+      data-test-subj="vizWorkspace__noData"
+      size="xs"
+      textAlign="center"
     >
       <div
-        id="explorerPlotComponent"
-        style={
-          Object {
-            "height": "100%",
-            "width": "100%",
-          }
-        }
-      />
-    </PlotlyComponent>
-  </Plt>
+        className="euiText euiText--extraSmall lnsChart__empty"
+        data-test-subj="vizWorkspace__noData"
+      >
+        <EuiTextAlign
+          textAlign="center"
+        >
+          <div
+            className="euiTextAlign euiTextAlign--center"
+          >
+            <EuiTextColor
+              color="subdued"
+              component="div"
+            >
+              <div
+                className="euiTextColor euiTextColor--subdued"
+              >
+                <EuiIcon
+                  color="subdued"
+                  size="xxl"
+                  type="visBarVerticalStacked"
+                >
+                  <EuiIconEmpty
+                    aria-hidden={true}
+                    className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
+                    focusable="false"
+                    role="img"
+                    style={null}
+                  >
+                    <svg
+                      aria-hidden={true}
+                      className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
+                      focusable="false"
+                      height={16}
+                      role="img"
+                      style={null}
+                      viewBox="0 0 16 16"
+                      width={16}
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </EuiIconEmpty>
+                </EuiIcon>
+                <EuiSpacer
+                  size="l"
+                >
+                  <div
+                    className="euiSpacer euiSpacer--l"
+                  />
+                </EuiSpacer>
+                <p>
+                  <FormattedMessage
+                    defaultMessage="No results found"
+                    id="visualization_noData"
+                    values={Object {}}
+                  >
+                    <span>
+                      No results found
+                    </span>
+                  </FormattedMessage>
+                </p>
+              </div>
+            </EuiTextColor>
+          </div>
+        </EuiTextAlign>
+      </div>
+    </EuiText>
+  </EmptyPlaceholder>
 </Line>
 `;
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
index a60d291d9..757f58b07 100644
--- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
@@ -214,26 +214,6 @@ exports[`Pie component Renders pie component 1`] = `
               "mapTo": "dataConfig",
               "name": "Data",
               "sections": Array [
-                Object {
-                  "editor": [Function],
-                  "id": "value_options",
-                  "mapTo": "valueOptions",
-                  "name": "Value options",
-                  "schemas": Array [
-                    Object {
-                      "component": null,
-                      "isSingleSelection": false,
-                      "mapTo": "xaxis",
-                      "name": "X-axis",
-                    },
-                    Object {
-                      "component": null,
-                      "isSingleSelection": false,
-                      "mapTo": "yaxis",
-                      "name": "Y-axis",
-                    },
-                  ],
-                },
                 Object {
                   "editor": [Function],
                   "id": "legend",
@@ -342,6 +322,12 @@ exports[`Pie component Renders pie component 1`] = `
                         ],
                       },
                     },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "labelSize",
+                      "name": "Label Size",
+                    },
                     Object {
                       "component": [Function],
                       "defaultState": 0,
@@ -470,7 +456,7 @@ exports[`Pie component Renders pie component 1`] = `
           },
           "isUniColor": false,
           "layout": Object {
-            "height": 500,
+            "height": 1180,
             "legend": Object {
               "orientation": "v",
               "traceorder": "normal",
@@ -489,147 +475,82 @@ exports[`Pie component Renders pie component 1`] = `
     }
   }
 >
-  <Plt
-    config={Object {}}
-    data={
-      Array [
-        Object {
-          "automargin": true,
-          "domain": Object {
-            "column": 0,
-            "row": 0,
-          },
-          "hole": 0,
-          "labels": undefined,
-          "name": "count()",
-          "outsidetextfont": Object {
-            "size": undefined,
-          },
-          "text": "count()",
-          "textinfo": "percent",
-          "textposition": "outside",
-          "type": "pie",
-          "values": undefined,
-        },
-      ]
-    }
-    layout={
-      Object {
-        "colorway": Array [
-          "#8C55A3",
-        ],
-        "grid": Object {
-          "columns": 1,
-          "rows": 1,
-        },
-        "height": 220,
-        "legend": Object {
-          "font": Object {
-            "size": undefined,
-          },
-          "orientation": "v",
-        },
-        "margin": Object {
-          "b": 15,
-          "l": 60,
-          "pad": 0,
-          "r": 10,
-          "t": 30,
-        },
-        "showlegend": "show",
-        "title": "",
-      }
-    }
+  <EmptyPlaceholder
+    icon="visBarVerticalStacked"
   >
-    <PlotlyComponent
-      config={
-        Object {
-          "displayModeBar": false,
-        }
-      }
-      data={
-        Array [
-          Object {
-            "automargin": true,
-            "domain": Object {
-              "column": 0,
-              "row": 0,
-            },
-            "hole": 0,
-            "labels": undefined,
-            "name": "count()",
-            "outsidetextfont": Object {
-              "size": undefined,
-            },
-            "text": "count()",
-            "textinfo": "percent",
-            "textposition": "outside",
-            "type": "pie",
-            "values": undefined,
-          },
-        ]
-      }
-      debug={false}
-      divId="explorerPlotComponent"
-      layout={
-        Object {
-          "autosize": true,
-          "barmode": "stack",
-          "colorway": Array [
-            "#8C55A3",
-          ],
-          "grid": Object {
-            "columns": 1,
-            "rows": 1,
-          },
-          "height": 220,
-          "hovermode": "closest",
-          "legend": Object {
-            "font": Object {
-              "size": undefined,
-            },
-            "orientation": "v",
-          },
-          "margin": Object {
-            "b": 15,
-            "l": 60,
-            "pad": 0,
-            "r": 10,
-            "t": 30,
-          },
-          "showlegend": "show",
-          "title": "",
-          "xaxis": Object {
-            "automargin": true,
-            "rangemode": "normal",
-            "showgrid": true,
-            "zeroline": false,
-          },
-          "yaxis": Object {
-            "rangemode": "normal",
-            "showgrid": true,
-            "zeroline": false,
-          },
-        }
-      }
-      style={
-        Object {
-          "height": "100%",
-          "width": "100%",
-        }
-      }
-      useResizeHandler={true}
+    <EuiText
+      className="lnsChart__empty"
+      color="subdued"
+      data-test-subj="vizWorkspace__noData"
+      size="xs"
+      textAlign="center"
     >
       <div
-        id="explorerPlotComponent"
-        style={
-          Object {
-            "height": "100%",
-            "width": "100%",
-          }
-        }
-      />
-    </PlotlyComponent>
-  </Plt>
+        className="euiText euiText--extraSmall lnsChart__empty"
+        data-test-subj="vizWorkspace__noData"
+      >
+        <EuiTextAlign
+          textAlign="center"
+        >
+          <div
+            className="euiTextAlign euiTextAlign--center"
+          >
+            <EuiTextColor
+              color="subdued"
+              component="div"
+            >
+              <div
+                className="euiTextColor euiTextColor--subdued"
+              >
+                <EuiIcon
+                  color="subdued"
+                  size="xxl"
+                  type="visBarVerticalStacked"
+                >
+                  <EuiIconEmpty
+                    aria-hidden={true}
+                    className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
+                    focusable="false"
+                    role="img"
+                    style={null}
+                  >
+                    <svg
+                      aria-hidden={true}
+                      className="euiIcon euiIcon--xxLarge euiIcon--subdued euiIcon-isLoading"
+                      focusable="false"
+                      height={16}
+                      role="img"
+                      style={null}
+                      viewBox="0 0 16 16"
+                      width={16}
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </EuiIconEmpty>
+                </EuiIcon>
+                <EuiSpacer
+                  size="l"
+                >
+                  <div
+                    className="euiSpacer euiSpacer--l"
+                  />
+                </EuiSpacer>
+                <p>
+                  <FormattedMessage
+                    defaultMessage="No results found"
+                    id="visualization_noData"
+                    values={Object {}}
+                  >
+                    <span>
+                      No results found
+                    </span>
+                  </FormattedMessage>
+                </p>
+              </div>
+            </EuiTextColor>
+          </div>
+        </EuiTextAlign>
+      </div>
+    </EuiText>
+  </EmptyPlaceholder>
 </Pie>
 `;
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap
index 1438329ba..c9f1aa121 100644
--- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap
@@ -197,26 +197,6 @@ exports[`Text component Renders text component 1`] = `
               "mapTo": "dataConfig",
               "name": "Data",
               "sections": Array [
-                Object {
-                  "editor": [Function],
-                  "id": "value_options",
-                  "mapTo": "valueOptions",
-                  "name": "Value options",
-                  "schemas": Array [
-                    Object {
-                      "component": null,
-                      "isSingleSelection": false,
-                      "mapTo": "xaxis",
-                      "name": "X-axis",
-                    },
-                    Object {
-                      "component": null,
-                      "isSingleSelection": false,
-                      "mapTo": "yaxis",
-                      "name": "Y-axis",
-                    },
-                  ],
-                },
                 Object {
                   "editor": [Function],
                   "id": "legend",
@@ -325,6 +305,12 @@ exports[`Text component Renders text component 1`] = `
                         ],
                       },
                     },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "labelSize",
+                      "name": "Label Size",
+                    },
                     Object {
                       "component": [Function],
                       "defaultState": 0,
@@ -453,7 +439,7 @@ exports[`Text component Renders text component 1`] = `
           },
           "isUniColor": false,
           "layout": Object {
-            "height": 500,
+            "height": 1180,
             "legend": Object {
               "orientation": "v",
               "traceorder": "normal",
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
index 97b53ae9b..46538a490 100644
--- a/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
@@ -214,26 +214,6 @@ exports[`Treemap component Renders treemap component 1`] = `
               "mapTo": "dataConfig",
               "name": "Data",
               "sections": Array [
-                Object {
-                  "editor": [Function],
-                  "id": "value_options",
-                  "mapTo": "valueOptions",
-                  "name": "Value options",
-                  "schemas": Array [
-                    Object {
-                      "component": null,
-                      "isSingleSelection": false,
-                      "mapTo": "xaxis",
-                      "name": "X-axis",
-                    },
-                    Object {
-                      "component": null,
-                      "isSingleSelection": false,
-                      "mapTo": "yaxis",
-                      "name": "Y-axis",
-                    },
-                  ],
-                },
                 Object {
                   "editor": [Function],
                   "id": "legend",
@@ -342,6 +322,12 @@ exports[`Treemap component Renders treemap component 1`] = `
                         ],
                       },
                     },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "labelSize",
+                      "name": "Label Size",
+                    },
                     Object {
                       "component": [Function],
                       "defaultState": 0,
@@ -470,7 +456,7 @@ exports[`Treemap component Renders treemap component 1`] = `
           },
           "isUniColor": false,
           "layout": Object {
-            "height": 500,
+            "height": 1180,
             "legend": Object {
               "orientation": "v",
               "traceorder": "normal",
@@ -511,6 +497,7 @@ exports[`Treemap component Renders treemap component 1`] = `
             "",
             "",
           ],
+          "sort": true,
           "textinfo": "label+value+percent parent+percent entry",
           "tiling": Object {
             "packing": undefined,
@@ -572,6 +559,7 @@ exports[`Treemap component Renders treemap component 1`] = `
               "",
               "",
             ],
+            "sort": true,
             "textinfo": "label+value+percent parent+percent entry",
             "tiling": Object {
               "packing": undefined,
diff --git a/dashboards-observability/public/components/visualizations/charts/__tests__/histogram.test.tsx b/dashboards-observability/public/components/visualizations/charts/__tests__/histogram.test.tsx
new file mode 100644
index 000000000..6eb1ebfff
--- /dev/null
+++ b/dashboards-observability/public/components/visualizations/charts/__tests__/histogram.test.tsx
@@ -0,0 +1,30 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { Histogram } from '../histogram/histogram';
+import {
+  LAYOUT_CONFIG,
+  TEST_VISUALIZATIONS_DATA,
+} from '../../../../../test/event_analytics_constants';
+
+describe('Histogram component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders histogram component', async () => {
+    const wrapper = mount(
+      <Histogram visualizations={TEST_VISUALIZATIONS_DATA} layout={LAYOUT_CONFIG} config={true} />
+    );
+
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/dashboards-observability/public/components/visualizations/charts/bar/bar.tsx b/dashboards-observability/public/components/visualizations/charts/bar/bar.tsx
index 1969401fa..c28433922 100644
--- a/dashboards-observability/public/components/visualizations/charts/bar/bar.tsx
+++ b/dashboards-observability/public/components/visualizations/charts/bar/bar.tsx
@@ -10,80 +10,166 @@ import { LONG_CHART_COLOR, PLOTLY_COLOR } from '../../../../../common/constants/
 import { AvailabilityUnitType } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability';
 import { ThresholdUnitType } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds';
 import { hexToRgb } from '../../../event_analytics/utils/utils';
-import {  FILLOPACITY_DIV_FACTOR } from '../../../../../common/constants/shared';
+import { EmptyPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components/empty_placeholder';
+import { FILLOPACITY_DIV_FACTOR } from '../../../../../common/constants/shared';
 
 export const Bar = ({ visualizations, layout, config }: any) => {
+  const DEFAULT_LABEL_SIZE = 10;
   const { vis } = visualizations;
   const {
     data,
     metadata: { fields },
   } = visualizations.data.rawVizData;
-  const { isUniColor } = vis.visConfig;
   const lastIndex = fields.length - 1;
   const {
     dataConfig = {},
     layoutConfig = {},
     availabilityConfig = {},
   } = visualizations?.data?.userConfigs;
-  const xaxis =
-    dataConfig.valueOptions && dataConfig.valueOptions.xaxis ? dataConfig.valueOptions.xaxis : [];
-  const yaxis =
-    dataConfig.valueOptions && dataConfig.valueOptions.xaxis ? dataConfig?.valueOptions.yaxis : [];
+  const dataConfigTab =
+    visualizations.data?.rawVizData?.bar?.dataConfig &&
+    visualizations.data.rawVizData.bar.dataConfig;
+  const xaxis = dataConfigTab?.dimensions
+    ? dataConfigTab.dimensions.filter((item) => item.label)
+    : [];
+  const yaxis = dataConfigTab?.metrics ? dataConfigTab.metrics.filter((item) => item.label) : [];
   const barOrientation = dataConfig?.chartStyles?.orientation || vis.orientation;
-  const { defaultAxes } = visualizations.data;
-  const tickAngle = dataConfig?.chartStyles?.rotateBarLabels || vis.labelAngle
+  const isVertical = barOrientation === vis.orientation;
+  let bars, valueSeries, valueForXSeries;
+
+  if (!isEmpty(xaxis) && !isEmpty(yaxis)) {
+    valueSeries = isVertical ? [...yaxis] : [...xaxis];
+    valueForXSeries = isVertical ? [...xaxis] : [...yaxis];
+  } else {
+    return <EmptyPlaceholder icon={visualizations?.vis?.iconType} />;
+  }
+
+  const tickAngle = dataConfig?.chartStyles?.rotateBarLabels || vis.labelAngle;
   const lineWidth = dataConfig?.chartStyles?.lineWidth || vis.lineWidth;
-  const fillOpacity = dataConfig?.chartStyles?.fillOpacity !== undefined ? dataConfig?.chartStyles?.fillOpacity / FILLOPACITY_DIV_FACTOR : vis.fillOpacity / FILLOPACITY_DIV_FACTOR;
+  const fillOpacity =
+    dataConfig?.chartStyles?.fillOpacity !== undefined
+      ? dataConfig?.chartStyles?.fillOpacity / FILLOPACITY_DIV_FACTOR
+      : vis.fillOpacity / FILLOPACITY_DIV_FACTOR;
   const barWidth = 1 - (dataConfig?.chartStyles?.barWidth || vis.barWidth);
   const groupWidth = 1 - (dataConfig?.chartStyles?.groupWidth || vis.groupWidth);
-  const isVertical = barOrientation === vis.orientation;
-  const showLegend = !(dataConfig?.legend?.showLegend && dataConfig.legend.showLegend !== vis.showLegend);
+  const showLegend = !(
+    dataConfig?.legend?.showLegend && dataConfig.legend.showLegend !== vis.showLegend
+  );
   const legendPosition = dataConfig?.legend?.position || vis.legendPosition;
+  visualizations.data?.rawVizData?.dataConfig?.metrics
+    ? visualizations.data?.rawVizData?.dataConfig?.metrics
+    : [];
+  const labelSize = dataConfig?.chartStyles?.labelSize || DEFAULT_LABEL_SIZE;
 
-  const getSelectedColorTheme = (field: any, index: number) => dataConfig?.colorTheme?.length > 0 && dataConfig.colorTheme.find(
-    (colorSelected) => colorSelected.name.name === field.name)?.color || PLOTLY_COLOR[index % PLOTLY_COLOR.length];
+  const getSelectedColorTheme = (field: any, index: number) =>
+    (dataConfig?.colorTheme?.length > 0 &&
+      dataConfig.colorTheme.find((colorSelected) => colorSelected.name.name === field.label)
+        ?.color) ||
+    PLOTLY_COLOR[index % PLOTLY_COLOR.length];
 
-  let valueSeries;
-  if (!isEmpty(xaxis) && !isEmpty(yaxis)) {
-    valueSeries = isVertical ? [...yaxis] : [...xaxis];
+  const prepareData = (valueForXSeries) => {
+    return (valueForXSeries.map((dimension: any) => data[dimension.label]))?.reduce(
+      (prev, cur) => {
+        return prev.map((i, j) => `${i}, ${cur[j]}`);
+      }
+    );
+  };
+
+  const createNameData = (nameData, metricName: string) =>
+    nameData?.map((el) => el + ',' + metricName);
+
+  // for multiple dimention and metrics with timestamp
+  if (valueForXSeries.some((e) => e.type === 'timestamp')) {
+    const nameData =
+      valueForXSeries.length > 1
+        ? (valueForXSeries
+              .filter((item) => item.type !== 'timestamp')
+              .map((dimension) => data[dimension.label])
+          ).reduce((prev, cur) => {
+            return prev.map((i, j) => `${i}, ${cur[j]}`);
+          })
+        : [];
+
+    let dimensionsData = 
+      valueForXSeries
+        .filter((item) => item.type === 'timestamp')
+        .map((dimension) => data[dimension.label]).flat();
+
+    bars = (valueSeries.map((field: any, index: number) => {
+      const selectedColor = getSelectedColorTheme(field, index);
+      return dimensionsData.map((dimension: any, j: number) => {
+        return {
+          x: isVertical
+            ? !isEmpty(xaxis)
+              ? dimension
+              : data[fields[lastIndex].name]
+            : data[field.label],
+          y: isVertical ? data[field.label][j] : dimensionsData, // TODO: orinetation
+          type: vis.type,
+          marker: {
+            color: hexToRgb(selectedColor, fillOpacity),
+            line: {
+              color: selectedColor,
+              width: lineWidth,
+            },
+          },
+          name: nameData.length > 0 ? createNameData(nameData, field.label)[j] : field.label, // dimensionsData[index]+ ',' + field.label,
+          orientation: barOrientation,
+        };
+      });
+    })).flat();
+
+
+    // merging x, y for same names
+    bars = Object.values(
+      bars?.reduce((acc, { x, y, name, type, marker, orientation }) => {
+        acc[name] = acc[name] || { x: [], y: [], name, type, marker, orientation };
+        acc[name].x.push(x);
+        acc[name].y.push(y);
+
+        return acc;
+      }, {})
+    );
   } else {
-    valueSeries = defaultAxes.yaxis || take(fields, lastIndex > 0 ? lastIndex : 1);
+    // for multiple dimention and metrics without timestamp
+    const dimensionsData = prepareData(valueForXSeries);
+    const metricsData = prepareData(valueSeries);
+    bars = valueSeries.map((field: any, index: number) => {
+      const selectedColor = getSelectedColorTheme(field, index);
+      return {
+        x: isVertical
+          ? !isEmpty(xaxis)
+            ? dimensionsData
+            : data[fields[lastIndex].name]
+          : data[field.name],
+        y: isVertical ? data[field.name] : metricsData, // TODO: add if isempty true
+        type: vis.type,
+        marker: {
+          color: hexToRgb(selectedColor, fillOpacity),
+          line: {
+            color: selectedColor,
+            width: lineWidth,
+          },
+        },
+        name: field.name,
+        orientation: barOrientation,
+      };
+    });
   }
 
-  // determine category axis
-  let bars = valueSeries.map((field: any, index: number) => {
-    const selectedColor = getSelectedColorTheme(field, index);
-    return {
-      x: isVertical
-        ? data[!isEmpty(xaxis) ? xaxis[0].label : fields[lastIndex].name]
-        : data[field.name],
-      y: isVertical
-        ? data[field.name]
-        : data[!isEmpty(yaxis) ? yaxis[0]?.label : fields[lastIndex].name],
-      type: vis.type,
-      marker: {
-        color: hexToRgb(selectedColor, fillOpacity),
-        line: {
-          color: selectedColor,
-          width: lineWidth
-        }
-      },
-      name: field.name,
-      orientation: barOrientation,
-    };
-  });
-
   // If chart has length of result buckets < 16
   // then use the LONG_CHART_COLOR for all the bars in the chart
   const plotlyColorway =
     data[fields[lastIndex].name].length < 16 ? PLOTLY_COLOR : [LONG_CHART_COLOR];
-
   const mergedLayout = {
     colorway: plotlyColorway,
     ...layout,
     ...(layoutConfig.layout && layoutConfig.layout),
     title: dataConfig?.panelOptions?.title || layoutConfig.layout?.title || '',
     barmode: dataConfig?.chartStyles?.mode || visualizations.vis.mode,
+    font: {
+      size: labelSize,
+    },
     xaxis: {
       tickangle: tickAngle,
       automargin: true,
@@ -96,7 +182,6 @@ export const Bar = ({ visualizations, layout, config }: any) => {
     },
     showlegend: showLegend,
   };
-
   if (dataConfig.thresholds || availabilityConfig.level) {
     const thresholdTraces = {
       x: [],
@@ -134,7 +219,6 @@ export const Bar = ({ visualizations, layout, config }: any) => {
     mergedLayout.shapes = [...mapToLine(thresholds, { dash: 'dashdot' }), ...mapToLine(levels, {})];
     bars = [...bars, thresholdTraces];
   }
-
   const mergedConfigs = {
     ...config,
     ...(layoutConfig.config && layoutConfig.config),
diff --git a/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts b/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts
index eef1db58c..584568a45 100644
--- a/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts
+++ b/dashboards-observability/public/components/visualizations/charts/bar/bar_type.ts
@@ -13,8 +13,12 @@ import { ConfigAvailability } from '../../../event_analytics/explorer/visualizat
 import { ButtonGroupItem } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group';
 import { ConfigBarChartStyles } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_bar_chart_styles';
 import { SliderConfig } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider';
-import { ConfigLegend } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_legend';
+import {
+  ConfigLegend,
+  InputFieldItem,
+} from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
 import { DefaultChartStyles } from '../../../../../common/constants/shared';
+
 import { ConfigColorTheme } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme';
 const sharedConfigs = getPlotlySharedConfigs();
 const VIS_CATEGORY = getPlotlyCategory();
@@ -52,26 +56,6 @@ export const createBarTypeDefinition = (params: any) => ({
         mapTo: 'dataConfig',
         editor: VizDataPanel,
         sections: [
-          {
-            id: 'value_options',
-            name: 'Value options',
-            editor: ConfigValueOptions,
-            mapTo: 'valueOptions',
-            schemas: [
-              {
-                name: 'X-axis',
-                isSingleSelection: false,
-                component: null,
-                mapTo: 'xaxis',
-              },
-              {
-                name: 'Y-axis',
-                isSingleSelection: false,
-                component: null,
-                mapTo: 'yaxis',
-              },
-            ],
-          },
           {
             id: 'legend',
             name: 'Legend',
@@ -84,8 +68,8 @@ export const createBarTypeDefinition = (params: any) => ({
                 component: null,
                 props: {
                   options: [
-                    { name: 'Show', id: "show" },
-                    { name: 'Hidden', id: "hidden" },
+                    { name: 'Show', id: 'show' },
+                    { name: 'Hidden', id: 'hidden' },
                   ],
                   defaultSelections: [{ name: 'Show', id: ShowLegend }],
                 },
@@ -136,6 +120,12 @@ export const createBarTypeDefinition = (params: any) => ({
                   defaultSelections: [{ name: 'Group', id: 'group' }],
                 },
               },
+              {
+                name: 'Label Size',
+                component: InputFieldItem,
+                mapTo: 'labelSize',
+                eleType: 'input',
+              },
               {
                 name: 'Rotate bar labels',
                 component: SliderConfig,
@@ -143,17 +133,16 @@ export const createBarTypeDefinition = (params: any) => ({
                 eleType: 'slider',
                 defaultState: 0,
                 props: {
-                  ticks:
-                    [
-                      { label: '-90°', value: -90 },
-                      { label: '-45°', value: -45 },
-                      { label: '0°', value: 0 },
-                      { label: '45°', value: 45 },
-                      { label: '90°', value: 90 },
-                    ],
+                  ticks: [
+                    { label: '-90°', value: -90 },
+                    { label: '-45°', value: -45 },
+                    { label: '0°', value: 0 },
+                    { label: '45°', value: 45 },
+                    { label: '90°', value: 90 },
+                  ],
                   showTicks: true,
                   min: -90,
-                  max: 90
+                  max: 90,
                 },
               },
               {
diff --git a/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge.tsx b/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge.tsx
index 711f4d9e2..ac05f6642 100644
--- a/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge.tsx
+++ b/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge.tsx
@@ -4,11 +4,20 @@
  */
 
 import React, { useMemo } from 'react';
-import { indexOf } from 'lodash';
 import Plotly from 'plotly.js-dist';
 import { Plt } from '../../../plotly/plot';
-import { NUMERICAL_FIELDS } from '../../../../../../common/constants/shared';
 import { PLOTLY_GAUGE_COLUMN_NUMBER } from '../../../../../../common/constants/explorer';
+import { DefaultGaugeChartParameters } from '../../../../../../common/constants/explorer';
+import { ThresholdUnitType } from '../../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds';
+import { EmptyPlaceholder } from '../../../../event_analytics/explorer/visualizations/shared_components/empty_placeholder';
+
+const {
+  GaugeTitleSize,
+  DisplayDefaultGauges,
+  OrientationDefault,
+  TickLength,
+  LegendPlacement,
+} = DefaultGaugeChartParameters;
 
 export const Gauge = ({ visualizations, layout, config }: any) => {
   const {
@@ -16,41 +25,65 @@ export const Gauge = ({ visualizations, layout, config }: any) => {
     metadata: { fields },
   } = visualizations.data.rawVizData;
 
+  // data config parametrs
   const { dataConfig = {}, layoutConfig = {} } = visualizations.data.userConfigs;
+  const dataConfigTab = visualizations?.data?.rawVizData?.Gauge?.dataConfig;
+  const dimensions = dataConfigTab?.dimensions
+    ? dataConfigTab.dimensions.filter((i) => i.name !== '')
+    : [];
+  const metrics = dataConfigTab?.metrics ? dataConfigTab.metrics.filter((i) => i.name !== '') : [];
+  const dimensionsLength = dimensions.length;
+  const metricsLength = metrics.length;
+  const numberOfGauges = dataConfig?.panelOptions?.numberOfGauges || DisplayDefaultGauges;
 
-  const series =
-    dataConfig?.valueOptions && dataConfig?.valueOptions?.series
-      ? dataConfig.valueOptions.series
-      : [];
+  // style parameters
+  const thresholds = dataConfig?.thresholds || [];
+  const titleSize = dataConfig?.chartStyles?.titleSize || GaugeTitleSize;
+  const valueSize = dataConfig?.chartStyles?.valueSize;
+  const showThresholdMarkers = dataConfig?.chartStyles?.showThresholdMarkers || false;
+  const showThresholdLabels = dataConfig?.chartStyles?.showThresholdLabels || false;
+  const orientation = dataConfig?.chartStyles?.orientation || OrientationDefault;
+  const legendPlacement = dataConfig?.chartStyles?.legendPlacement || LegendPlacement;
 
-  const value =
-    dataConfig?.valueOptions && dataConfig?.valueOptions?.value
-      ? dataConfig.valueOptions.value
-      : [];
+  const isEmptyPlot = !metricsLength;
 
-  const thresholds = dataConfig?.thresholds || [];
+  if (isEmptyPlot) return <EmptyPlaceholder icon={visualizations?.vis?.iconType} />;
 
   const gaugeData: Plotly.Data[] = useMemo(() => {
     let calculatedGaugeData: Plotly.Data[] = [];
-    if (series && series[0] && value && value[0]) {
-      if (indexOf(NUMERICAL_FIELDS, series[0].type) > 0) {
-        calculatedGaugeData = [
-          ...data[value[0].name].map((dimesionSlice, index) => ({
-            field_name: dimesionSlice,
-            value: data[series[0].name][index],
-          })),
-        ];
-      } else {
-        value.map((val) => {
-          const selectedSeriesIndex = indexOf(data[series[0].name], val.name);
-          fields.map((field) => {
-            if (field.name !== series[0].name) {
-              calculatedGaugeData.push({
-                field_name: field.name,
-                value: data[field.name][selectedSeriesIndex],
-              });
-            }
+    if (dimensionsLength || metricsLength) {
+      // case 1,2: no dimension, single/multiple metrics
+      if (!dimensionsLength && metricsLength >= 1) {
+        calculatedGaugeData = metrics.map((metric: any) => {
+          return {
+            field_name: metric.name,
+            value: data[metric.name][0],
+          };
+        });
+      }
+
+      // case 3: multiple dimensions and multiple metrics
+      if (dimensionsLength && metricsLength) {
+        const selectedDimensionsData = dimensions
+          .map((dimension: any) => data[dimension.name].slice(0, numberOfGauges))
+          .reduce((prev, cur) => {
+            return prev.map((i, j) => `${i}, ${cur[j]}`);
           });
+
+        const selectedMetricsData = metrics.map((metric: any) =>
+          data[metric.name].slice(0, numberOfGauges)
+        );
+
+        selectedMetricsData.map((metricSlice: any, metricSliceIndex: number) => {
+          calculatedGaugeData = [
+            ...calculatedGaugeData,
+            ...metricSlice.map((metricSliceData: any, metricSliceDataIndex: number) => {
+              return {
+                field_name: `${selectedDimensionsData[metricSliceDataIndex]}, ${metrics[metricSliceIndex].name}`,
+                value: metricSliceData,
+              };
+            }),
+          ];
         });
       }
 
@@ -61,40 +94,92 @@ export const Gauge = ({ visualizations, layout, config }: any) => {
           value: gauge.value || 0,
           title: {
             text: gauge.field_name,
-            font: { size: 14 },
+            font: { size: titleSize },
+            align: legendPlacement,
           },
+          ...(valueSize && {
+            number: {
+              font: {
+                size: valueSize,
+              },
+            },
+          }),
           domain: {
-            row: Math.floor(index / PLOTLY_GAUGE_COLUMN_NUMBER),
-            column: index % PLOTLY_GAUGE_COLUMN_NUMBER,
+            ...(orientation === 'auto' || orientation === 'h'
+              ? {
+                  row: Math.floor(index / PLOTLY_GAUGE_COLUMN_NUMBER),
+                  column: index % PLOTLY_GAUGE_COLUMN_NUMBER,
+                }
+              : {
+                  column: Math.floor(index / PLOTLY_GAUGE_COLUMN_NUMBER),
+                  row: index % PLOTLY_GAUGE_COLUMN_NUMBER,
+                }),
           },
           gauge: {
-            ...(thresholds && {
-              threshold: {
-                line: { color: thresholds[0]?.color || 'red', width: 4 },
-                thickness: 0.75,
-                value: thresholds[0]?.value || 0,
-              },
-            }),
+            ...(showThresholdMarkers &&
+              thresholds &&
+              thresholds.length && {
+                threshold: {
+                  line: { color: thresholds[0]?.color || 'red', width: 4 },
+                  thickness: 0.75,
+                  value: thresholds[0]?.value || 0,
+                },
+              }),
+            //threshold labels
+            ...(showThresholdLabels && thresholds && thresholds.length
+              ? {
+                  axis: {
+                    ticktext: [gauge.value, ...thresholds.map((t: ThresholdUnitType) => t.name)],
+                    tickvals: [gauge.value, ...thresholds.map((t: ThresholdUnitType) => t.value)],
+                    ticklen: TickLength,
+                  },
+                }
+              : {}),
           },
         };
       });
     }
     return calculatedGaugeData;
-  }, [series, value, data, fields, thresholds]);
+  }, [
+    dimensions,
+    metrics,
+    data,
+    fields,
+    thresholds,
+    showThresholdMarkers,
+    orientation,
+    showThresholdLabels,
+    titleSize,
+    valueSize,
+  ]);
 
   const mergedLayout = useMemo(() => {
     const isAtleastOneFullRow = Math.floor(gaugeData.length / PLOTLY_GAUGE_COLUMN_NUMBER) > 0;
     return {
       grid: {
-        rows: Math.floor(gaugeData.length / PLOTLY_GAUGE_COLUMN_NUMBER) + 1,
-        columns: isAtleastOneFullRow ? PLOTLY_GAUGE_COLUMN_NUMBER : gaugeData.length,
+        ...(orientation === 'auto' || orientation === 'h'
+          ? {
+              rows: Math.floor(gaugeData.length / PLOTLY_GAUGE_COLUMN_NUMBER) + 1,
+              columns: isAtleastOneFullRow ? PLOTLY_GAUGE_COLUMN_NUMBER : gaugeData.length,
+            }
+          : {
+              columns: Math.floor(gaugeData.length / PLOTLY_GAUGE_COLUMN_NUMBER) + 1,
+              rows: isAtleastOneFullRow ? PLOTLY_GAUGE_COLUMN_NUMBER : gaugeData.length,
+            }),
         pattern: 'independent',
       },
       ...layout,
       ...(layoutConfig.layout && layoutConfig.layout),
       title: dataConfig?.panelOptions?.title || layoutConfig.layout?.title || '',
     };
-  }, [layout, gaugeData.length, layoutConfig.layout, dataConfig?.panelOptions?.title]);
+  }, [
+    data,
+    layout,
+    gaugeData.length,
+    layoutConfig.layout,
+    dataConfig?.panelOptions?.title,
+    orientation,
+  ]);
 
   const mergedConfigs = {
     ...config,
diff --git a/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge_type.ts b/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge_type.ts
index e5e91b7db..4b80cf307 100644
--- a/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge_type.ts
+++ b/dashboards-observability/public/components/visualizations/charts/financial/gauge/gauge_type.ts
@@ -9,13 +9,17 @@ import { LensIconChartLine } from '../../../assets/chart_line';
 import { VizDataPanel } from '../../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor';
 import { ConfigEditor } from '../../../../event_analytics/explorer/visualizations/config_panel/config_panes/json_editor';
 import {
-  ConfigValueOptions,
   ConfigThresholds,
-  ConfigGaugeValueOptions,
+  InputFieldItem,
+  SwitchButton,
+  ConfigChartOptions,
+  ButtonGroupItem,
 } from '../../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
+import { DefaultGaugeChartParameters } from '../../../../../../common/constants/explorer';
 
 const sharedConfigs = getPlotlySharedConfigs();
 const VIS_CATEGORY = getPlotlyCategory();
+const { ThresholdsMaxLimit } = DefaultGaugeChartParameters;
 
 export const createGaugeTypeDefinition = (params: any = {}) => ({
   name: 'Gauge',
@@ -39,24 +43,68 @@ export const createGaugeTypeDefinition = (params: any = {}) => ({
         editor: VizDataPanel,
         sections: [
           {
-            id: 'value_options',
-            name: 'Value options',
-            editor: ConfigGaugeValueOptions,
-            mapTo: 'valueOptions',
+            id: 'chart-styles',
+            name: 'Chart styles',
+            editor: ConfigChartOptions,
+            mapTo: 'chartStyles',
             schemas: [
               {
-                name: 'Series',
-                isSingleSelection: true,
-                onChangeHandler: 'setXaxisSelections',
-                component: null,
-                mapTo: 'series',
+                name: 'Orientation',
+                component: ButtonGroupItem,
+                mapTo: 'orientation',
+                eleType: 'buttons',
+                props: {
+                  options: [
+                    { name: 'Auto', id: 'auto' },
+                    { name: 'Vertical', id: 'v' },
+                    { name: 'Horizontal', id: 'h' },
+                  ],
+                  defaultSelections: [{ name: 'Auto', id: 'auto' }],
+                },
               },
               {
-                name: 'Value',
-                isSingleSelection: false,
-                onChangeHandler: 'setYaxisSelections',
-                component: null,
-                mapTo: 'value',
+                name: 'Legend Placement',
+                component: ButtonGroupItem,
+                mapTo: 'legendPlacement',
+                eleType: 'buttons',
+                props: {
+                  options: [
+                    { name: 'Center', id: 'center' },
+                    { name: 'Right', id: 'right' },
+                    { name: 'Left', id: 'left' },
+                  ],
+                  defaultSelections: [{ name: 'Center', id: 'center' }],
+                },
+              },
+              {
+                title: 'Title Size',
+                name: 'Title Size',
+                component: InputFieldItem,
+                mapTo: 'titleSize',
+                eleType: 'input',
+              },
+              {
+                title: 'Value Size',
+                name: 'Value Size',
+                component: InputFieldItem,
+                mapTo: 'valueSize',
+                eleType: 'input',
+              },
+              {
+                title: 'Show threshold labels',
+                name: 'Show threshold labels',
+                component: SwitchButton,
+                mapTo: 'showThresholdLabels',
+                eleType: 'switchButton',
+                currentValue: false,
+              },
+              {
+                title: 'Show threshold markers',
+                name: 'Show threshold markers',
+                component: SwitchButton,
+                mapTo: 'showThresholdMarkers',
+                eleType: 'switchButton',
+                currentValue: true,
               },
             ],
           },
@@ -67,6 +115,9 @@ export const createGaugeTypeDefinition = (params: any = {}) => ({
             mapTo: 'thresholds',
             defaultState: [],
             schemas: [],
+            props: {
+              maxLimit: ThresholdsMaxLimit,
+            },
           },
         ],
       },
diff --git a/dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts b/dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts
index 5fbec3e02..075082cc0 100644
--- a/dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts
+++ b/dashboards-observability/public/components/visualizations/charts/helpers/viz_types.ts
@@ -6,6 +6,7 @@
 import { isEmpty, take } from 'lodash';
 import { getVisType } from '../vis_types';
 import { IVisualizationContainerProps, IField, IQuery } from '../../../../../common/types/explorer';
+import { visChartTypes } from '../../../../../common/constants/shared';
 
 interface IVizContainerProps {
   vizId: string;
@@ -20,13 +21,19 @@ interface IVizContainerProps {
   };
 }
 
-const getDefaultXYAxisLabels = (vizFields: IField[]) => {
+const getDefaultXYAxisLabels = (vizFields: IField[], visName: string) => {
   if (isEmpty(vizFields)) return {};
-  const vizFieldsWithLabel = vizFields.map(vizField => ({ ...vizField, label: vizField.name }));
-  return {
-    xaxis: [vizFieldsWithLabel[vizFieldsWithLabel.length - 1]] || [],
-    yaxis: take(vizFieldsWithLabel, vizFieldsWithLabel.length - 1 > 0 ? vizFieldsWithLabel.length - 1 : 1) || [],
-  };
+  const vizFieldsWithLabel: ({ [key: string]: string })[] = vizFields.map(vizField => ({ ...vizField, label: vizField.name }));
+
+  const mapXaxis = (): ({ [key: string]: string })[] => visName === visChartTypes.Line ?
+    vizFieldsWithLabel.filter((field) => field.type === 'timestamp') :
+    [vizFieldsWithLabel[vizFieldsWithLabel.length - 1]];
+
+  const mapYaxis = (): ({ [key: string]: string })[] => visName === visChartTypes.Line ?
+    vizFieldsWithLabel.filter((field) => field.type !== 'timestamp')
+    : take(vizFieldsWithLabel, vizFieldsWithLabel.length - 1 > 0 ? vizFieldsWithLabel.length - 1 : 1) || [];
+
+  return { xaxis: mapXaxis(), yaxis: mapYaxis() };
 };
 
 export const getVizContainerProps = ({
@@ -37,6 +44,9 @@ export const getVizContainerProps = ({
   userConfigs = {},
   appData = {},
 }: IVizContainerProps): IVisualizationContainerProps => {
+  const visType = {
+    ...getVisType(vizId),
+  }
   return {
     data: {
       appData: { ...appData },
@@ -45,11 +55,9 @@ export const getVizContainerProps = ({
       indexFields: { ...indexFields },
       userConfigs: { ...userConfigs },
       defaultAxes: {
-        ...getDefaultXYAxisLabels(rawVizData?.metadata?.fields),
+        ...getDefaultXYAxisLabels(rawVizData?.metadata?.fields, visType.name),
       },
     },
-    vis: {
-      ...getVisType(vizId),
-    },
+    vis: visType,
   };
 };
diff --git a/dashboards-observability/public/components/visualizations/charts/histogram/histogram.tsx b/dashboards-observability/public/components/visualizations/charts/histogram/histogram.tsx
index 28c9adb96..99686e60b 100644
--- a/dashboards-observability/public/components/visualizations/charts/histogram/histogram.tsx
+++ b/dashboards-observability/public/components/visualizations/charts/histogram/histogram.tsx
@@ -4,39 +4,84 @@
  */
 
 import React from 'react';
-import { take, merge, isEmpty } from 'lodash';
+import { take, isEmpty, last } from 'lodash';
 import { Plt } from '../../plotly/plot';
-import { PLOTLY_COLOR } from '../../../../../common/constants/shared';
+import {
+  DefaultChartStyles,
+  PLOTLY_COLOR,
+  FILLOPACITY_DIV_FACTOR,
+} from '../../../../../common/constants/shared';
+import { hexToRgb } from '../../../../components/event_analytics/utils/utils';
 
 export const Histogram = ({ visualizations, layout, config }: any) => {
-  const { vis } = visualizations;
+  const { LineWidth, FillOpacity, LegendPosition, ShowLegend } = DefaultChartStyles;
   const {
     data = {},
     metadata: { fields },
   } = visualizations.data.rawVizData;
-  const { defaultAxes } = visualizations.data.defaultAxes;
-  const { xaxis = null, yaxis = null } = visualizations.data.userConfigs;
+  const { defaultAxes } = visualizations?.data;
+  const { dataConfig = {}, layoutConfig = {} } = visualizations?.data?.userConfigs;
   const lastIndex = fields.length - 1;
+  const lineWidth = dataConfig?.chartStyles?.lineWidth || LineWidth;
+  const showLegend =
+    dataConfig?.legend?.showLegend && dataConfig.legend.showLegend !== ShowLegend ? false : true;
+  const legendPosition = dataConfig?.legend?.position || LegendPosition;
+  const fillOpacity =
+    (dataConfig?.chartStyles?.fillOpacity || FillOpacity) / FILLOPACITY_DIV_FACTOR;
 
-  let valueSeries;
-  if (!isEmpty(xaxis) && !isEmpty(yaxis)) {
-    valueSeries = [
-      ...visualizations?.data?.userConfigs[vis.seriesAxis].map((item) => ({
-        ...item,
-        name: item.label,
-      })),
-    ];
-  } else {
-    valueSeries = defaultAxes?.yaxis || take(fields, lastIndex > 0 ? lastIndex : 1);
+  const valueSeries = defaultAxes?.yaxis || take(fields, lastIndex > 0 ? lastIndex : 1);
+
+  const xbins: any = {};
+  if (visualizations.data?.rawVizData?.histogram?.dataConfig?.dimensions[0].bucketSize) {
+    xbins.size = visualizations.data?.rawVizData?.histogram?.dataConfig?.dimensions[0].bucketSize;
+  }
+  if (visualizations.data?.rawVizData?.histogram?.dataConfig?.dimensions[0].bucketOffset) {
+    xbins.start =
+      visualizations.data?.rawVizData?.histogram?.dataConfig?.dimensions[0].bucketOffset;
   }
 
-  const hisValues = valueSeries.map((field: any) => {
+  const selectedColorTheme = (field: any, index: number, opacity?: number) => {
+    let newColor;
+    if (dataConfig?.colorTheme && dataConfig?.colorTheme.length !== 0) {
+      newColor = dataConfig.colorTheme.find(
+        (colorSelected) => colorSelected.name.name === field.name
+      );
+    }
+    return hexToRgb(newColor ? newColor.color : PLOTLY_COLOR[index % PLOTLY_COLOR.length], opacity);
+  };
+
+  const hisValues = valueSeries.map((field: any, index: number) => {
     return {
-      x: data[xaxis ? xaxis[0]?.label : fields[lastIndex].name],
+      x: data[field.name],
       type: 'histogram',
       name: field.name,
+      marker: {
+        color: selectedColorTheme(field, index, fillOpacity),
+        line: {
+          color: selectedColorTheme(field, index),
+          width: lineWidth,
+        },
+      },
+      xbins: !isEmpty(xbins) ? xbins : undefined,
     };
   });
 
-  return <Plt data={hisValues} layout={layout} config={config} />;
+  const mergedLayout = {
+    ...layout,
+    ...(layoutConfig.layout && layoutConfig.layout),
+    title: dataConfig?.panelOptions?.title || layoutConfig.layout?.title || '',
+    barmode: 'group',
+    legend: {
+      ...layout.legend,
+      orientation: legendPosition,
+    },
+    showlegend: showLegend,
+  };
+
+  const mergedConfigs = {
+    ...config,
+    ...(layoutConfig.config && layoutConfig.config),
+  };
+
+  return <Plt data={hisValues} layout={mergedLayout} config={mergedConfigs} />;
 };
diff --git a/dashboards-observability/public/components/visualizations/charts/histogram/histogram_type.ts b/dashboards-observability/public/components/visualizations/charts/histogram/histogram_type.ts
index 3e6e0d967..dccaf45d7 100644
--- a/dashboards-observability/public/components/visualizations/charts/histogram/histogram_type.ts
+++ b/dashboards-observability/public/components/visualizations/charts/histogram/histogram_type.ts
@@ -5,13 +5,20 @@
 
 import { Histogram } from './histogram';
 import { getPlotlySharedConfigs, getPlotlyCategory } from '../shared/shared_configs';
-import { LensIconChartLine } from '../../assets/chart_line';
 import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor';
 import { ConfigEditor } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/json_editor';
-import { ConfigValueOptions } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
+import {
+  ConfigChartOptions,
+  ConfigLegend,
+  SliderConfig,
+  ConfigColorTheme,
+  ConfigThresholds,
+} from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
+import { DefaultChartStyles } from '../../../../../common/constants/shared';
 
 const sharedConfigs = getPlotlySharedConfigs();
 const VIS_CATEGORY = getPlotlyCategory();
+const { LineWidth, FillOpacity, ShowLegend, LegendPosition } = DefaultChartStyles;
 
 export const createHistogramVisDefinition = (params = {}) => ({
   name: 'histogram',
@@ -24,7 +31,7 @@ export const createHistogramVisDefinition = (params = {}) => ({
     dataLoss: 'nothing',
   },
   valueSeries: 'yaxis',
-  icon: LensIconChartLine,
+  iconType: 'visArea',
   editorConfig: {
     panelTabs: [
       {
@@ -34,22 +41,69 @@ export const createHistogramVisDefinition = (params = {}) => ({
         editor: VizDataPanel,
         sections: [
           {
-            id: 'value_options',
-            name: 'Value options',
-            editor: ConfigValueOptions,
-            mapTo: 'valueOptions',
+            id: 'chart-styles',
+            name: 'Chart styles',
+            editor: ConfigChartOptions,
+            mapTo: 'chartStyles',
             schemas: [
               {
-                name: 'X-axis',
-                isSingleSelection: true,
+                name: 'Line width',
+                component: SliderConfig,
+                mapTo: 'lineWidth',
+                defaultState: LineWidth,
+                eleType: 'slider',
+                props: {
+                  max: 10,
+                },
+              },
+              {
+                name: 'Fill Opacity',
+                component: SliderConfig,
+                mapTo: 'fillOpacity',
+                defaultState: FillOpacity,
+                eleType: 'slider',
+                props: {
+                  max: 100,
+                },
+              },
+            ],
+          },
+          {
+            id: 'color-theme',
+            name: 'Color Theme',
+            editor: ConfigColorTheme,
+            mapTo: 'colorTheme',
+            schemas: [],
+          },
+          {
+            id: 'legend',
+            name: 'Legend',
+            editor: ConfigLegend,
+            mapTo: 'legend',
+            schemas: [
+              {
+                name: 'Show Legend',
+                mapTo: 'showLegend',
                 component: null,
-                mapTo: 'xaxis',
+                props: {
+                  options: [
+                    { name: 'Show', id: 'show' },
+                    { name: 'Hidden', id: 'hidden' },
+                  ],
+                  defaultSelections: [{ name: 'Show', id: ShowLegend }],
+                },
               },
               {
-                name: 'Y-axis',
-                isSingleSelection: false,
+                name: 'Position',
+                mapTo: 'position',
                 component: null,
-                mapTo: 'yaxis',
+                props: {
+                  options: [
+                    { name: 'Right', id: 'v' },
+                    { name: 'Bottom', id: 'h' },
+                  ],
+                  defaultSelections: [{ name: 'Right', id: LegendPosition }],
+                },
               },
             ],
           },
diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx
index 5d21eead1..c2429b14f 100644
--- a/dashboards-observability/public/components/visualizations/charts/lines/line.tsx
+++ b/dashboards-observability/public/components/visualizations/charts/lines/line.tsx
@@ -8,11 +8,25 @@ import { take, isEmpty, last } from 'lodash';
 import { Plt } from '../../plotly/plot';
 import { AvailabilityUnitType } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability';
 import { ThresholdUnitType } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds';
-import { DefaultChartStyles, FILLOPACITY_DIV_FACTOR, PLOTLY_COLOR } from '../../../../../common/constants/shared';
+import {
+  DefaultChartStyles,
+  FILLOPACITY_DIV_FACTOR,
+  PLOTLY_COLOR,
+} from '../../../../../common/constants/shared';
 import { hexToRgb } from '../../../../components/event_analytics/utils/utils';
+import { EmptyPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components/empty_placeholder';
 
 export const Line = ({ visualizations, layout, config }: any) => {
-  const { DefaultMode, Interpolation, LineWidth, FillOpacity, MarkerSize, LegendPosition, ShowLegend } = DefaultChartStyles;
+  const {
+    DefaultMode,
+    Interpolation,
+    LineWidth,
+    FillOpacity,
+    MarkerSize,
+    LegendPosition,
+    ShowLegend,
+    LabelAngle,
+  } = DefaultChartStyles;
   const {
     data = {},
     metadata: { fields },
@@ -24,39 +38,63 @@ export const Line = ({ visualizations, layout, config }: any) => {
     availabilityConfig = {},
   } = visualizations?.data?.userConfigs;
 
-  const dataConfigTab = visualizations.data?.rawVizData?.line?.dataConfig && visualizations.data.rawVizData.line.dataConfig;
-  const xaxis = dataConfigTab?.dimensions ? dataConfigTab?.dimensions : [];
-  const yaxis = dataConfigTab?.metrics ? dataConfigTab?.metrics : [];
+  const dataConfigTab =
+    visualizations.data?.rawVizData?.line?.dataConfig &&
+    visualizations.data.rawVizData.line.dataConfig;
+  const xaxis = dataConfigTab?.dimensions ? dataConfigTab?.dimensions.filter((item) => item.label) : [];
+  const yaxis = dataConfigTab?.metrics ? dataConfigTab?.metrics.filter((item) => item.label) : [];
 
   const lastIndex = fields.length - 1;
 
   const mode = dataConfig?.chartStyles?.style || DefaultMode;
   const lineShape = dataConfig?.chartStyles?.interpolation || Interpolation;
   const lineWidth = dataConfig?.chartStyles?.lineWidth || LineWidth;
-  const showLegend = !(dataConfig?.legend?.showLegend && dataConfig.legend.showLegend !== ShowLegend);
+  const showLegend = !(
+    dataConfig?.legend?.showLegend && dataConfig.legend.showLegend !== ShowLegend
+  );
   const legendPosition = dataConfig?.legend?.position || LegendPosition;
   const markerSize = dataConfig?.chartStyles?.pointSize || MarkerSize;
-  const fillOpacity = dataConfig?.chartStyles?.fillOpacity !== undefined ? dataConfig?.chartStyles?.fillOpacity / FILLOPACITY_DIV_FACTOR : FillOpacity / FILLOPACITY_DIV_FACTOR;
+  const fillOpacity =
+    dataConfig?.chartStyles?.fillOpacity !== undefined
+      ? dataConfig?.chartStyles?.fillOpacity / FILLOPACITY_DIV_FACTOR
+      : FillOpacity / FILLOPACITY_DIV_FACTOR;
+  const tickAngle = dataConfig?.chartStyles?.rotateLabels || LabelAngle;
+  const labelSize = dataConfig?.chartStyles?.labelSize;
+  const legendSize = dataConfig?.legend?.legendSize;
+
+  const getSelectedColorTheme = (field: any, index: number) =>
+    (dataConfig?.colorTheme?.length > 0 &&
+      dataConfig.colorTheme.find((colorSelected) => colorSelected.name.name === field.name)
+        ?.color) ||
+    PLOTLY_COLOR[index % PLOTLY_COLOR.length];
+
+  if (isEmpty(xaxis) || isEmpty(yaxis))
+    return <EmptyPlaceholder icon={visualizations?.vis?.iconType} />;
 
   let valueSeries;
   if (!isEmpty(xaxis) && !isEmpty(yaxis)) {
     valueSeries = [...yaxis];
   } else {
-    valueSeries = defaultAxes.yaxis || take(fields, lastIndex > 0 ? lastIndex : 1);
+    valueSeries = (defaultAxes.yaxis || take(fields, lastIndex > 0 ? lastIndex : 1))
+      .map((item, i) => ({ ...item, side: i === 0 ? 'left' : 'right' }));
   }
 
+  const isDimensionTimestamp = isEmpty(xaxis)
+    ? defaultAxes?.xaxis?.length && defaultAxes.xaxis[0].type === 'timestamp'
+    : xaxis.length === 1 && xaxis[0].type === 'timestamp';
+
   let multiMetrics = {};
   const [calculatedLayout, lineValues] = useMemo(() => {
     const isBarMode = mode === 'bar';
-
     let calculatedLineValues = valueSeries.map((field: any, index: number) => {
-      const fillColor = hexToRgb(PLOTLY_COLOR[index % PLOTLY_COLOR.length], fillOpacity);
+      const selectedColor = getSelectedColorTheme(field, index);
+      const fillColor = hexToRgb(selectedColor, fillOpacity);
       const barMarker = {
         color: fillColor,
         line: {
-          color: PLOTLY_COLOR[index],
-          width: lineWidth
-        }
+          color: selectedColor,
+          width: lineWidth,
+        },
       };
       const fillProperty = {
         fill: 'tozeroy',
@@ -65,14 +103,20 @@ export const Line = ({ visualizations, layout, config }: any) => {
       const multiYaxis = { yaxis: `y${index + 1}` };
       multiMetrics = {
         ...multiMetrics,
-        [`yaxis${index + 1}`]: {
-          // title: `yaxis${index + 1} title`, TODO: need to add title
-          titlefont: { color: PLOTLY_COLOR[index] },
-          tickfont: { color: PLOTLY_COLOR[index] },
+        [`yaxis${index > 0 ? index + 1 : ''}`]: {
+          titlefont: {
+            color: selectedColor,
+          },
+          tickfont: {
+            color: selectedColor,
+            ...(labelSize && {
+              size: labelSize,
+            }),
+          },
           overlaying: 'y',
-          side: index === 0 ? 'left' : field.side || "right"
-        }
-      }
+          side: field.side,
+        },
+      };
 
       return {
         x: data[!isEmpty(xaxis) ? xaxis[0]?.label : fields[lastIndex].name],
@@ -80,17 +124,17 @@ export const Line = ({ visualizations, layout, config }: any) => {
         type: isBarMode ? 'bar' : 'scatter',
         name: field.label,
         mode,
-        ...!['bar', 'markers'].includes(mode) && fillProperty,
+        ...(!['bar', 'markers'].includes(mode) && fillProperty),
         line: {
           shape: lineShape,
           width: lineWidth,
-          color: PLOTLY_COLOR[index],
+          color: selectedColor,
         },
         marker: {
           size: markerSize,
-          ...isBarMode && barMarker,
+          ...(isBarMode && barMarker),
         },
-        ...(index >= 1 && multiYaxis)
+        ...(index >= 1 && multiYaxis),
       };
     });
 
@@ -104,10 +148,24 @@ export const Line = ({ visualizations, layout, config }: any) => {
       legend: {
         ...layout.legend,
         orientation: legendPosition,
+        ...(legendSize && {
+          font: {
+            size: legendSize,
+          },
+        }),
+      },
+      xaxis: {
+        tickangle: tickAngle,
+        automargin: true,
+        tickfont: {
+          ...(labelSize && {
+            size: labelSize,
+          }),
+        },
       },
       showlegend: showLegend,
-      ...isBarMode && layoutForBarMode,
-      ...multiMetrics && multiMetrics,
+      ...(isBarMode && layoutForBarMode),
+      ...(multiMetrics && multiMetrics),
     };
 
     if (dataConfig.thresholds || availabilityConfig.level) {
@@ -158,5 +216,9 @@ export const Line = ({ visualizations, layout, config }: any) => {
     ...(layoutConfig.config && layoutConfig.config),
   };
 
-  return <Plt data={lineValues} layout={calculatedLayout} config={mergedConfigs} />;
+  return isDimensionTimestamp ? (
+    <Plt data={lineValues} layout={calculatedLayout} config={mergedConfigs} />
+  ) : (
+    <EmptyPlaceholder icon={visualizations?.vis?.iconType} />
+  );
 };
diff --git a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts
index ed8e1ed8d..9413b0322 100644
--- a/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts
+++ b/dashboards-observability/public/components/visualizations/charts/lines/line_type.ts
@@ -10,10 +10,11 @@ import { PLOTLY_COLOR } from '../../../../../common/constants/shared';
 import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor';
 import { ConfigEditor } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/json_editor';
 import {
-  ConfigValueOptions,
   ConfigThresholds,
   ConfigLineChartStyles,
   ConfigLegend,
+  InputFieldItem,
+  ConfigColorTheme
 } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
 import { ConfigAvailability } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability';
 import { DefaultChartStyles } from '../../../../../common/constants/shared';
@@ -21,14 +22,23 @@ import { ButtonGroupItem } from '../../../../../public/components/event_analytic
 import { SliderConfig } from '../../../../../public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider';
 const sharedConfigs = getPlotlySharedConfigs();
 const VIS_CATEGORY = getPlotlyCategory();
-const { DefaultMode, Interpolation, LineWidth, FillOpacity, MarkerSize, LegendPosition, ShowLegend } = DefaultChartStyles;
+const {
+  DefaultMode,
+  Interpolation,
+  LineWidth,
+  FillOpacity,
+  MarkerSize,
+  LegendPosition,
+  ShowLegend,
+  LabelAngle
+} = DefaultChartStyles;
 
 export const createLineTypeDefinition = (params: any = {}) => ({
   name: 'line',
   type: 'line',
   id: 'line',
-  label: 'Line',
-  fullLabel: 'Line',
+  label: 'Time series',
+  fullLabel: 'Time series',
   iconType: 'visLine',
   category: VIS_CATEGORY.BASICS,
   selection: {
@@ -57,8 +67,8 @@ export const createLineTypeDefinition = (params: any = {}) => ({
                 component: null,
                 props: {
                   options: [
-                    { name: 'Show', id: "show" },
-                    { name: 'Hidden', id: "hidden" },
+                    { name: 'Show', id: 'show' },
+                    { name: 'Hidden', id: 'hidden' },
                   ],
                   defaultSelections: [{ name: 'Show', id: ShowLegend }],
                 },
@@ -75,6 +85,13 @@ export const createLineTypeDefinition = (params: any = {}) => ({
                   defaultSelections: [{ name: 'Right', id: LegendPosition }],
                 },
               },
+              {
+                title: 'Legend Size',
+                name: 'Legend Size',
+                component: InputFieldItem,
+                mapTo: 'legendSize',
+                eleType: 'input',
+              },
             ],
           },
           {
@@ -91,9 +108,8 @@ export const createLineTypeDefinition = (params: any = {}) => ({
                 props: {
                   options: [
                     { name: 'Lines', id: 'lines' },
-                    { name: 'Bars', id: 'bar' },
-                    { name: 'Points', id: 'markers' },
-                    { name: 'Lines + Points', id: 'lines+markers' }
+                    { name: 'Marker', id: 'markers' },
+                    { name: 'Lines + Markers', id: 'lines+markers' },
                   ],
                   defaultSelections: [{ name: 'Lines', id: DefaultMode }],
                 },
@@ -119,9 +135,9 @@ export const createLineTypeDefinition = (params: any = {}) => ({
                 mapTo: 'lineWidth',
                 defaultState: LineWidth,
                 eleType: 'slider',
-                props:{
+                props: {
                   max: 10,
-                }
+                },
               },
               {
                 name: 'Fill Opacity',
@@ -129,9 +145,9 @@ export const createLineTypeDefinition = (params: any = {}) => ({
                 mapTo: 'fillOpacity',
                 defaultState: FillOpacity,
                 eleType: 'slider',
-                props:{
+                props: {
                   max: 100,
-                }
+                },
               },
               {
                 name: 'Point Size',
@@ -139,12 +155,45 @@ export const createLineTypeDefinition = (params: any = {}) => ({
                 mapTo: 'pointSize',
                 defaultState: MarkerSize,
                 eleType: 'slider',
-                props:{
+                props: {
                   max: 40,
-                }
+                },
+              },
+              {
+                title: 'Label Size',
+                name: 'Label Size',
+                component: InputFieldItem,
+                mapTo: 'labelSize',
+                eleType: 'input',
+              },
+              {
+                name: 'Rotate labels',
+                component: SliderConfig,
+                mapTo: 'rotateLabels',
+                eleType: 'slider',
+                defaultState: LabelAngle,
+                props: {
+                  ticks: [
+                    { label: '-90°', value: -90 },
+                    { label: '-45°', value: -45 },
+                    { label: '0°', value: 0 },
+                    { label: '45°', value: 45 },
+                    { label: '90°', value: 90 },
+                  ],
+                  showTicks: true,
+                  min: -90,
+                  max: 90,
+                },
               },
             ],
           },
+          {
+            id: 'color-theme',
+            name: 'Color theme',
+            editor: ConfigColorTheme,
+            mapTo: 'colorTheme',
+            schemas: [],
+          },
           {
             id: 'thresholds',
             name: 'Thresholds',
diff --git a/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx b/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx
index 176c5421d..7eea24a4e 100644
--- a/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx
+++ b/dashboards-observability/public/components/visualizations/charts/maps/heatmap.tsx
@@ -54,6 +54,7 @@ export const HeatMap = ({ visualizations, layout, config }: any) => {
       ? dataConfig?.chartStyles.color ?? HEATMAP_SINGLE_COLOR
       : dataConfig?.chartStyles.scheme ?? HEATMAP_PALETTE_COLOR
     : HEATMAP_PALETTE_COLOR;
+  const showColorscale = dataConfig?.legend?.showLegend ?? 'show';
 
   const traceColor: any = [];
   if (colorField.name === SINGLE_COLOR_PALETTE) {
@@ -72,7 +73,8 @@ export const HeatMap = ({ visualizations, layout, config }: any) => {
 
     // maps bukcets to metrics
     for (let i = 0; i < data[xaxisField.label].length; i++) {
-      buckets[`${data[xaxisField.label][i]},${data[yaxisField.label][i]}`] = data[zMetrics.label][i];
+      buckets[`${data[xaxisField.label][i]},${data[yaxisField.label][i]}`] =
+        data[zMetrics.label][i];
     }
 
     // initialize empty 2 dimensional array, inner loop for each xaxis field, outer loop for yaxis
@@ -112,6 +114,7 @@ export const HeatMap = ({ visualizations, layout, config }: any) => {
       y: uniqueYaxis,
       colorscale: colorField.name === SINGLE_COLOR_PALETTE ? traceColor : colorField.name,
       type: 'heatmap',
+      showscale: showColorscale === 'show',
     },
   ];
 
diff --git a/dashboards-observability/public/components/visualizations/charts/maps/heatmap_type.ts b/dashboards-observability/public/components/visualizations/charts/maps/heatmap_type.ts
index 8bcd56697..74aa9948e 100644
--- a/dashboards-observability/public/components/visualizations/charts/maps/heatmap_type.ts
+++ b/dashboards-observability/public/components/visualizations/charts/maps/heatmap_type.ts
@@ -14,6 +14,7 @@ import {
   ConfigChartOptions,
   PanelItem,
   SingleColorPicker,
+  ConfigLegend,
 } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
 import {
   COLOR_PALETTES,
@@ -44,6 +45,26 @@ export const createMapsVisDefinition = () => ({
         mapTo: 'dataConfig',
         editor: VizDataPanel,
         sections: [
+          {
+            id: 'legend',
+            name: 'Legend',
+            editor: ConfigLegend,
+            mapTo: 'legend',
+            schemas: [
+              {
+                name: 'Show Colorscale',
+                mapTo: 'showLegend',
+                component: null,
+                props: {
+                  options: [
+                    { name: 'Show', id: 'show' },
+                    { name: 'Hidden', id: 'hidden' },
+                  ],
+                  defaultSelections: [{ name: 'Show', id: 'show' }],
+                },
+              },
+            ],
+          },
           {
             id: 'chart_styles',
             name: 'Chart Styles',
diff --git a/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts b/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts
index eb4bc7d6e..57d14cc7b 100644
--- a/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts
+++ b/dashboards-observability/public/components/visualizations/charts/maps/treemap_type.ts
@@ -12,12 +12,17 @@ import {
   ConfigValueOptions,
   ColorPalettePicker,
   ConfigChartOptions,
+  ConfigLegend,
 } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
 import { DEFAULT_PALETTE, COLOR_PALETTES } from '../../../../../common/constants/colors';
+import { ButtonGroupItem } from '../../../../../public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group';
+import { DefaultChartStyles } from '../../../../../common/constants/shared';
 
 const sharedConfigs = getPlotlySharedConfigs();
 const VIS_CATEGORY = getPlotlyCategory();
 
+const { SortSectors } = DefaultChartStyles;
+
 export interface BarTypeParams {}
 
 export const createTreeMapDefinition = (params: BarTypeParams = {}) => ({
@@ -44,6 +49,26 @@ export const createTreeMapDefinition = (params: BarTypeParams = {}) => ({
         mapTo: 'dataConfig',
         editor: VizDataPanel,
         sections: [
+          {
+            id: 'legend',
+            name: 'Legend',
+            editor: ConfigLegend,
+            mapTo: 'legend',
+            schemas: [
+              {
+                name: 'Show Colorscale',
+                mapTo: 'showLegend',
+                component: null,
+                props: {
+                  options: [
+                    { name: 'Show', id: 'show' },
+                    { name: 'Hidden', id: 'hidden' },
+                  ],
+                  defaultSelections: [{ name: 'Show', id: 'show' }],
+                },
+              },
+            ],
+          },
           {
             id: 'treemap_options',
             name: 'Treemap',
@@ -68,6 +93,19 @@ export const createTreeMapDefinition = (params: BarTypeParams = {}) => ({
                   isClearable: false,
                 },
               },
+              {
+                name: 'Sort Sectors',
+                component: ButtonGroupItem,
+                mapTo: 'sort_sectors',
+                eleType: 'buttons',
+                props: {
+                  options: [
+                    { name: 'Largest to Smallest', id: 'largest_to_smallest' },
+                    { name: 'Random', id: 'random' },
+                  ],
+                  defaultSelections: [{ name: 'Largest to Smallest', id: SortSectors }],
+                },
+              },
             ],
           },
           {
diff --git a/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx b/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx
index f13c69ec5..0572d9563 100644
--- a/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx
+++ b/dashboards-observability/public/components/visualizations/charts/maps/treemaps.tsx
@@ -14,8 +14,11 @@ import {
   MULTI_COLOR_PALETTE,
   SINGLE_COLOR_PALETTE,
 } from '../../../../../common/constants/colors';
+import { DefaultChartStyles } from '../../../../../common/constants/shared';
 
 export const TreeMap = ({ visualizations, layout, config }: any) => {
+  const { DefaultSortSectors } = DefaultChartStyles;
+
   const {
     data,
     metadata: { fields },
@@ -52,9 +55,12 @@ export const TreeMap = ({ visualizations, layout, config }: any) => {
       ? dataConfig?.treemapOptions.tilingAlgorithm[0]
       : 'squarify';
 
+  const sortSectorsField = dataConfig?.treemapOptions?.sort_sectors || DefaultSortSectors;
+  const showColorscale = dataConfig?.legend?.showLegend ?? 'show';
+
   const areParentFieldsInvalid =
-    new Set([...parentFields.map((x) => x.name)]).size !== parentFields.length ||
-    parentFields.some((x) => isEmpty(data[x.name]) || isEqual(childField.name, x.name));
+    new Set([...parentFields.map((field) => field.name)]).size !== parentFields.length ||
+    parentFields.some((field) => isEmpty(data[field.name]) || isEqual(childField.name, field.name));
 
   if (
     isEmpty(data[childField.name]) ||
@@ -101,7 +107,7 @@ export const TreeMap = ({ visualizations, layout, config }: any) => {
             const currentParentIndices = uniqueParents.map((parent) =>
               data[field.name].findIndex((index) => index === parent)
             );
-            const lastParents = currentParentIndices.map((x) => data[lastParentField.name][x]);
+            const lastParents = currentParentIndices.map((index) => data[lastParentField.name][index]);
             parentsArray = [...parentsArray, ...lastParents];
             valuesArray = [...valuesArray, ...Array(lastParents.length).fill(0)];
             colorsArray =
@@ -140,6 +146,7 @@ export const TreeMap = ({ visualizations, layout, config }: any) => {
             colorbar: {
               len: 1,
             },
+            showscale: showColorscale === 'show',
           }
         : {};
 
@@ -163,6 +170,7 @@ export const TreeMap = ({ visualizations, layout, config }: any) => {
           packing: tilingAlgorithm.value,
         },
         marker: markerColors,
+        sort: sortSectorsField === DefaultSortSectors,
       },
     ];
 
diff --git a/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx b/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx
index 5dc4dd204..3a1856361 100644
--- a/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx
+++ b/dashboards-observability/public/components/visualizations/charts/pie/pie.tsx
@@ -7,6 +7,7 @@ import React from 'react';
 import { take, isEmpty } from 'lodash';
 import { Plt } from '../../plotly/plot';
 import { DEFAULT_PALETTE, HEX_CONTRAST_COLOR } from '../../../../../common/constants/colors';
+import { EmptyPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components/empty_placeholder';
 
 export const Pie = ({ visualizations, layout, config }: any) => {
   const { vis } = visualizations;
@@ -16,11 +17,11 @@ export const Pie = ({ visualizations, layout, config }: any) => {
   } = visualizations.data.rawVizData;
   const { defaultAxes } = visualizations.data;
   const { dataConfig = {}, layoutConfig = {} } = visualizations?.data?.userConfigs;
-  const xaxis = visualizations.data?.rawVizData?.pie?.dataConfig?.dimensions
-    ? visualizations.data?.rawVizData?.pie?.dataConfig?.dimensions
+  const xaxis = visualizations.data?.rawVizData?.pie?.dataConfig?.dimensions 
+    ? visualizations.data?.rawVizData?.pie?.dataConfig?.dimensions.filter((item)  => item.label)
     : [];
   const yaxis = visualizations.data?.rawVizData?.pie?.dataConfig?.metrics
-    ? visualizations.data?.rawVizData?.pie?.dataConfig?.metrics
+    ? visualizations.data?.rawVizData?.pie?.dataConfig?.metrics.filter((item)  => item.label)
     : [];
   const type = dataConfig?.chartStyles?.mode ? dataConfig?.chartStyles?.mode[0]?.modeId : 'pie';
   const lastIndex = fields.length - 1;
@@ -32,6 +33,9 @@ export const Pie = ({ visualizations, layout, config }: any) => {
   const legendSize = dataConfig?.legend?.size || vis.legendSize;
   const labelSize = dataConfig?.chartStyles?.labelSize || vis.labelSize;
 
+  if (isEmpty(xaxis) || isEmpty(yaxis))
+    return <EmptyPlaceholder icon={visualizations?.vis?.iconType} />;
+
   let valueSeries;
   if (!isEmpty(xaxis) && !isEmpty(yaxis)) {
     valueSeries = [...yaxis];
@@ -42,6 +46,26 @@ export const Pie = ({ visualizations, layout, config }: any) => {
   const invertHex = (hex: string) =>
     (Number(`0x1${hex}`) ^ HEX_CONTRAST_COLOR).toString(16).substr(1).toUpperCase();
 
+  const createLegendLabels = (dimLabels: string[], xaxisLables:string[] ) => {
+    return dimLabels.map((label:string, index:number) => {
+      return [xaxisLables[index], label].join(',');
+    });
+  };
+  
+  const labelsOfXAxis = () => {
+    let legendLabels = [];
+    if (xaxis.length > 0) {
+      let dimLabelsArray = data[xaxis[0].label];
+      for (let i = 0; i < xaxis.length - 1; i++) {
+        dimLabelsArray = createLegendLabels(dimLabelsArray, data[xaxis[i + 1].label]);
+      }
+      legendLabels = dimLabelsArray;
+    } else {
+      legendLabels = data[fields[lastIndex].name];
+    }
+    return legendLabels;
+  };
+
   const pies = valueSeries.map((field: any, index) => {
     const marker =
       colorTheme.name !== DEFAULT_PALETTE
@@ -56,7 +80,7 @@ export const Pie = ({ visualizations, layout, config }: any) => {
           }
         : undefined;
     return {
-      labels: data[xaxis ? xaxis[0]?.label : fields[lastIndex].name],
+      labels: labelsOfXAxis(),
       values: data[field.label],
       type: 'pie',
       name: field.name,
diff --git a/dashboards-observability/public/components/visualizations/charts/shared/shared_configs.ts b/dashboards-observability/public/components/visualizations/charts/shared/shared_configs.ts
index 062f38785..6730a5d60 100644
--- a/dashboards-observability/public/components/visualizations/charts/shared/shared_configs.ts
+++ b/dashboards-observability/public/components/visualizations/charts/shared/shared_configs.ts
@@ -16,7 +16,7 @@ export const getPlotlySharedConfigs = () => {
         t: 50,
         pad: 0,
       },
-      height: 500,
+      height: 1180,
       legend: {
         orientation: 'v',
         traceorder: 'normal',