diff --git a/common/constants/shared.ts b/common/constants/shared.ts
index 2d10c08e2..6922a12ed 100644
--- a/common/constants/shared.ts
+++ b/common/constants/shared.ts
@@ -85,7 +85,7 @@ export const SAVED_OBJECT = '/object';
 // Color Constants
 export const PLOTLY_COLOR = [
   '#3CA1C7',
-  '#8C55A3',
+  '#54B399',
   '#DB748A',
   '#F2BE4B',
   '#68CCC2',
diff --git a/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap b/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
index 6a9095181..adf75a180 100644
--- a/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
+++ b/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
@@ -1423,7 +1423,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
               "barmode": "group",
               "colorway": Array [
                 "#3CA1C7",
-                "#8C55A3",
+                "#54B399",
                 "#DB748A",
                 "#F2BE4B",
                 "#68CCC2",
@@ -1516,7 +1516,7 @@ exports[`Utils helper functions renders displayVisualization function 1`] = `
                 "barmode": "group",
                 "colorway": Array [
                   "#3CA1C7",
-                  "#8C55A3",
+                  "#54B399",
                   "#DB748A",
                   "#F2BE4B",
                   "#68CCC2",
@@ -2057,7 +2057,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
             "layout": Object {
               "colorway": Array [
                 "#3CA1C7",
-                "#8C55A3",
+                "#54B399",
                 "#DB748A",
                 "#F2BE4B",
                 "#68CCC2",
@@ -2573,7 +2573,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
               "layout": Object {
                 "colorway": Array [
                   "#3CA1C7",
-                  "#8C55A3",
+                  "#54B399",
                   "#DB748A",
                   "#F2BE4B",
                   "#68CCC2",
@@ -3103,7 +3103,7 @@ exports[`Utils helper functions renders displayVisualization function 2`] = `
                 "layout": Object {
                   "colorway": Array [
                     "#3CA1C7",
-                    "#8C55A3",
+                    "#54B399",
                     "#DB748A",
                     "#F2BE4B",
                     "#68CCC2",
@@ -4768,7 +4768,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
               "barmode": "group",
               "colorway": Array [
                 "#3CA1C7",
-                "#8C55A3",
+                "#54B399",
                 "#DB748A",
                 "#F2BE4B",
                 "#68CCC2",
@@ -4861,7 +4861,7 @@ exports[`Utils helper functions renders displayVisualization function 3`] = `
                 "barmode": "group",
                 "colorway": Array [
                   "#3CA1C7",
-                  "#8C55A3",
+                  "#54B399",
                   "#DB748A",
                   "#F2BE4B",
                   "#68CCC2",
diff --git a/public/components/event_analytics/explorer/explorer.tsx b/public/components/event_analytics/explorer/explorer.tsx
index 52c9abaa9..35f7091db 100644
--- a/public/components/event_analytics/explorer/explorer.tsx
+++ b/public/components/event_analytics/explorer/explorer.tsx
@@ -12,6 +12,7 @@ import {
   EuiHorizontalRule,
   EuiLink,
   EuiLoadingSpinner,
+  EuiPanel,
   EuiSpacer,
   EuiTabbedContent,
   EuiTabbedContentTab,
@@ -506,108 +507,111 @@ export const Explorer = ({
         </div>
         <div className={`dscWrapper ${mainSectionClassName}`}>
           {explorerData && !isEmpty(explorerData.jsonData) ? (
-            <div className="dscWrapper__content">
-              <div className="dscResults">
-                {countDistribution?.data && !isLiveTailOnRef.current && (
-                  <>
-                    <HitsCounter
-                      hits={_.sum(countDistribution.data['count()'])}
-                      showResetButton={false}
-                      onResetQuery={() => {}}
-                    />
-                    <TimechartHeader
-                      options={timeIntervalOptions}
-                      onChangeInterval={(selectedIntrv) => {
-                        const intervalOptionsIndex = timeIntervalOptions.findIndex(
-                          (item) => item.value === selectedIntrv
-                        );
-                        const intrv = selectedIntrv.replace(/^auto_/, '');
-                        getCountVisualizations(intrv);
-                        selectedIntervalRef.current = timeIntervalOptions[intervalOptionsIndex];
-                        getPatterns(intrv, getErrorHandler('Error fetching patterns'));
-                      }}
-                      stateInterval={selectedIntervalRef.current?.value}
-                      startTime={appLogEvents ? startTime : dateRange[0]}
-                      endTime={appLogEvents ? endTime : dateRange[1]}
-                    />
-                    <CountDistribution
-                      countDistribution={countDistribution}
-                      selectedInterval={selectedIntervalRef.current?.value}
-                      startTime={appLogEvents ? startTime : dateRange[0]}
-                      endTime={appLogEvents ? endTime : dateRange[1]}
-                    />
-                    <EuiHorizontalRule margin="xs" />
-                    <LogPatterns
-                      selectedIntervalUnit={selectedIntervalRef.current}
-                      handleTimeRangePickerRefresh={handleTimeRangePickerRefresh}
-                    />
-                  </>
-                )}
-
-                <section
-                  className="dscTable dscTableFixedScroll"
-                  aria-labelledby="documentsAriaLabel"
-                >
-                  <h2 className="euiScreenReaderOnly" id="documentsAriaLabel">
-                    <FormattedMessage id="discover.documentsAriaLabel" defaultMessage="Documents" />
-                  </h2>
-                  <div className="dscDiscover">
-                    {isLiveTailOnRef.current && (
+            <EuiFlexGroup direction="column" gutterSize="none">
+              <EuiFlexItem grow={false}>
+                <EuiPanel hasBorder={false} hasShadow={false} paddingSize="s" color="transparent">
+                  <EuiPanel paddingSize="s" style={{ height: '100%' }}>
+                    {countDistribution?.data && !isLiveTailOnRef.current && (
                       <>
-                        <EuiSpacer size="m" />
-                        <EuiFlexGroup justifyContent="center" alignItems="center" gutterSize="m">
-                          <EuiLoadingSpinner size="l" />
-                          <EuiText textAlign="center" data-test-subj="LiveStreamIndicator_on">
-                            <strong>&nbsp;&nbsp;Live streaming</strong>
-                          </EuiText>
-                          <EuiFlexItem grow={false}>
-                            <HitsCounter
-                              hits={totalHits}
-                              showResetButton={false}
-                              onResetQuery={() => {}}
-                            />
-                          </EuiFlexItem>
-                          <EuiFlexItem grow={false}>since {liveTimestamp}</EuiFlexItem>
-                        </EuiFlexGroup>
-                        <EuiSpacer size="m" />
+                        <HitsCounter
+                          hits={_.sum(countDistribution.data['count()'])}
+                          showResetButton={false}
+                          onResetQuery={() => {}}
+                        />
+                        <TimechartHeader
+                          options={timeIntervalOptions}
+                          onChangeInterval={(selectedIntrv) => {
+                            const intervalOptionsIndex = timeIntervalOptions.findIndex(
+                              (item) => item.value === selectedIntrv
+                            );
+                            const intrv = selectedIntrv.replace(/^auto_/, '');
+                            getCountVisualizations(intrv);
+                            selectedIntervalRef.current = timeIntervalOptions[intervalOptionsIndex];
+                            getPatterns(intrv, getErrorHandler('Error fetching patterns'));
+                          }}
+                          stateInterval={selectedIntervalRef.current?.value}
+                          startTime={appLogEvents ? startTime : dateRange[0]}
+                          endTime={appLogEvents ? endTime : dateRange[1]}
+                        />
+                        <CountDistribution
+                          countDistribution={countDistribution}
+                          selectedInterval={selectedIntervalRef.current?.value}
+                          startTime={appLogEvents ? startTime : dateRange[0]}
+                          endTime={appLogEvents ? endTime : dateRange[1]}
+                        />
                       </>
                     )}
-                    {countDistribution?.data && (
-                      <EuiTitle size="s">
-                        <h3 style={{ margin: '0px', textAlign: 'left', marginLeft: '10px' }}>
-                          Events
-                          <span className="event-header-count">
-                            {' '}
-                            (
-                            {reduce(
-                              countDistribution.data['count()'],
-                              (sum, n) => {
-                                return sum + n;
-                              },
-                              0
-                            )}
-                            )
-                          </span>
-                        </h3>
-                      </EuiTitle>
-                    )}
-                    <EuiHorizontalRule margin="xs" />
-                    <DataGrid
-                      http={http}
-                      pplService={pplService}
-                      rows={explorerData.jsonData}
-                      rowsAll={explorerData.jsonDataAll}
-                      explorerFields={explorerFields}
-                      timeStampField={queryRef.current![SELECTED_TIMESTAMP]}
-                      rawQuery={appBasedRef.current || queryRef.current![RAW_QUERY]}
+                  </EuiPanel>
+                </EuiPanel>
+              </EuiFlexItem>
+
+              <EuiFlexItem grow={false}>
+                <EuiPanel hasBorder={false} hasShadow={false} paddingSize="s" color="transparent">
+                  <EuiPanel paddingSize="s" style={{ height: '100%' }}>
+                    <LogPatterns
+                      selectedIntervalUnit={selectedIntervalRef.current}
+                      handleTimeRangePickerRefresh={handleTimeRangePickerRefresh}
                     />
-                    <a tabIndex={0} id="discoverBottomMarker">
-                      &#8203;
-                    </a>
-                  </div>
-                </section>
-              </div>
-            </div>
+                  </EuiPanel>
+                </EuiPanel>
+              </EuiFlexItem>
+
+              <EuiFlexItem grow={false}>
+                <EuiPanel hasBorder={false} hasShadow={false} paddingSize="s" color="transparent">
+                  <EuiPanel paddingSize="s" style={{ height: '100%' }}>
+                    <section
+                      className="dscTable dscTableFixedScroll"
+                      aria-labelledby="documentsAriaLabel"
+                    >
+                      <h2 className="euiScreenReaderOnly" id="documentsAriaLabel">
+                        <FormattedMessage
+                          id="discover.documentsAriaLabel"
+                          defaultMessage="Documents"
+                        />
+                      </h2>
+                      <div className="dscDiscover">
+                        {isLiveTailOnRef.current && (
+                          <>
+                            <EuiSpacer size="m" />
+                            <EuiFlexGroup
+                              justifyContent="center"
+                              alignItems="center"
+                              gutterSize="m"
+                            >
+                              <EuiLoadingSpinner size="l" />
+                              <EuiText textAlign="center" data-test-subj="LiveStreamIndicator_on">
+                                <strong>&nbsp;&nbsp;Live streaming</strong>
+                              </EuiText>
+                              <EuiFlexItem grow={false}>
+                                <HitsCounter
+                                  hits={totalHits}
+                                  showResetButton={false}
+                                  onResetQuery={() => {}}
+                                />
+                              </EuiFlexItem>
+                              <EuiFlexItem grow={false}>since {liveTimestamp}</EuiFlexItem>
+                            </EuiFlexGroup>
+                            <EuiSpacer size="m" />
+                          </>
+                        )}
+                        <DataGrid
+                          http={http}
+                          pplService={pplService}
+                          rows={explorerData.jsonData}
+                          rowsAll={explorerData.jsonDataAll}
+                          explorerFields={explorerFields}
+                          timeStampField={queryRef.current![SELECTED_TIMESTAMP]}
+                          rawQuery={appBasedRef.current || queryRef.current![RAW_QUERY]}
+                        />
+                        <a tabIndex={0} id="discoverBottomMarker">
+                          &#8203;
+                        </a>
+                      </div>
+                    </section>
+                  </EuiPanel>
+                </EuiPanel>
+              </EuiFlexItem>
+            </EuiFlexGroup>
           ) : (
             <NoResults />
           )}
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
index 5be9321c7..6162e2a46 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
@@ -1602,7 +1602,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                 "layout": Object {
                   "colorway": Array [
                     "#3CA1C7",
-                    "#8C55A3",
+                    "#54B399",
                     "#DB748A",
                     "#F2BE4B",
                     "#68CCC2",
@@ -1835,7 +1835,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                 "layout": Object {
                   "colorway": Array [
                     "#3CA1C7",
-                    "#8C55A3",
+                    "#54B399",
                     "#DB748A",
                     "#F2BE4B",
                     "#68CCC2",
@@ -2333,7 +2333,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                 "layout": Object {
                   "colorway": Array [
                     "#3CA1C7",
-                    "#8C55A3",
+                    "#54B399",
                     "#DB748A",
                     "#F2BE4B",
                     "#68CCC2",
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
index fbaa0739f..1529919ed 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
   layout={
     Object {
       "colorway": Array [
-        "#8C55A3",
+        "#54B399",
       ],
       "height": 220,
       "margin": Object {
@@ -698,7 +698,7 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
         "bargroupgap": 0.030000000000000027,
         "barmode": "group",
         "colorway": Array [
-          "#8C55A3",
+          "#54B399",
         ],
         "height": 220,
         "hovermode": "closest",
@@ -756,7 +756,7 @@ exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
           "bargroupgap": 0.030000000000000027,
           "barmode": "group",
           "colorway": Array [
-            "#8C55A3",
+            "#54B399",
           ],
           "height": 220,
           "hovermode": "closest",
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap
index 4acd7cae0..bb2075dc0 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Gauge component Renders gauge component 1`] = `
   layout={
     Object {
       "colorway": Array [
-        "#8C55A3",
+        "#54B399",
       ],
       "height": 220,
       "margin": Object {
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
index fe48e3228..013b2106b 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Heatmap component Renders heatmap component 1`] = `
   layout={
     Object {
       "colorway": Array [
-        "#8C55A3",
+        "#54B399",
       ],
       "height": 220,
       "margin": Object {
@@ -710,7 +710,7 @@ exports[`Heatmap component Renders heatmap component 1`] = `
     layout={
       Object {
         "colorway": Array [
-          "#8C55A3",
+          "#54B399",
         ],
         "height": 220,
         "margin": Object {
@@ -763,7 +763,7 @@ exports[`Heatmap component Renders heatmap component 1`] = `
           "autosize": true,
           "barmode": "stack",
           "colorway": Array [
-            "#8C55A3",
+            "#54B399",
           ],
           "height": 220,
           "hovermode": "closest",
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap
index 1857b0bc5..f56257ba0 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Histogram component Renders histogram component 1`] = `
   layout={
     Object {
       "colorway": Array [
-        "#8C55A3",
+        "#54B399",
       ],
       "height": 220,
       "margin": Object {
@@ -711,7 +711,7 @@ exports[`Histogram component Renders histogram component 1`] = `
       Object {
         "barmode": "group",
         "colorway": Array [
-          "#8C55A3",
+          "#54B399",
         ],
         "height": 220,
         "legend": Object {
@@ -767,7 +767,7 @@ exports[`Histogram component Renders histogram component 1`] = `
           "autosize": true,
           "barmode": "group",
           "colorway": Array [
-            "#8C55A3",
+            "#54B399",
           ],
           "height": 220,
           "hovermode": "closest",
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap
index 65d40ade3..fd5d086b1 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Horizontal bar component Renders horizontal bar component 1`] = `
   layout={
     Object {
       "colorway": Array [
-        "#8C55A3",
+        "#54B399",
       ],
       "height": 220,
       "margin": Object {
@@ -698,7 +698,7 @@ exports[`Horizontal bar component Renders horizontal bar component 1`] = `
         "bargroupgap": 0.030000000000000027,
         "barmode": "group",
         "colorway": Array [
-          "#8C55A3",
+          "#54B399",
         ],
         "height": 220,
         "hovermode": "closest",
@@ -756,7 +756,7 @@ exports[`Horizontal bar component Renders horizontal bar component 1`] = `
           "bargroupgap": 0.030000000000000027,
           "barmode": "group",
           "colorway": Array [
-            "#8C55A3",
+            "#54B399",
           ],
           "height": 220,
           "hovermode": "closest",
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
index ecab56aa6..87f23bc1d 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Line component Renders line component 1`] = `
   layout={
     Object {
       "colorway": Array [
-        "#8C55A3",
+        "#54B399",
       ],
       "height": 220,
       "margin": Object {
@@ -697,7 +697,7 @@ exports[`Line component Renders line component 1`] = `
       Object {
         "autosize": true,
         "colorway": Array [
-          "#8C55A3",
+          "#54B399",
         ],
         "height": 220,
         "legend": Object {
@@ -749,7 +749,7 @@ exports[`Line component Renders line component 1`] = `
           "autosize": true,
           "barmode": "stack",
           "colorway": Array [
-            "#8C55A3",
+            "#54B399",
           ],
           "height": 220,
           "hovermode": "closest",
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/metrics.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/metrics.test.tsx.snap
index ee792c625..0d2c4eea3 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/metrics.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/metrics.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Metrics component Renders Metrics component 1`] = `
   layout={
     Object {
       "colorway": Array [
-        "#8C55A3",
+        "#54B399",
       ],
       "height": 220,
       "margin": Object {
@@ -618,7 +618,7 @@ exports[`Metrics component Renders Metrics component 1`] = `
           "layout": Object {
             "colorway": Array [
               "#3CA1C7",
-              "#8C55A3",
+              "#54B399",
               "#DB748A",
               "#F2BE4B",
               "#68CCC2",
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
index 2efd9326f..67b8a1360 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Pie component Renders pie component 1`] = `
   layout={
     Object {
       "colorway": Array [
-        "#8C55A3",
+        "#54B399",
       ],
       "height": 220,
       "margin": Object {
@@ -686,7 +686,7 @@ exports[`Pie component Renders pie component 1`] = `
     layout={
       Object {
         "colorway": Array [
-          "#8C55A3",
+          "#54B399",
         ],
         "grid": Object {
           "columns": 0,
@@ -733,7 +733,7 @@ exports[`Pie component Renders pie component 1`] = `
           "autosize": true,
           "barmode": "stack",
           "colorway": Array [
-            "#8C55A3",
+            "#54B399",
           ],
           "grid": Object {
             "columns": 0,
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
index dbe192ad4..483149850 100644
--- a/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Treemap component Renders treemap component 1`] = `
   layout={
     Object {
       "colorway": Array [
-        "#8C55A3",
+        "#54B399",
       ],
       "height": 220,
       "margin": Object {
@@ -723,7 +723,7 @@ exports[`Treemap component Renders treemap component 1`] = `
     layout={
       Object {
         "colorway": Array [
-          "#8C55A3",
+          "#54B399",
         ],
         "height": 220,
         "margin": Object {
@@ -790,7 +790,7 @@ exports[`Treemap component Renders treemap component 1`] = `
           "autosize": true,
           "barmode": "stack",
           "colorway": Array [
-            "#8C55A3",
+            "#54B399",
           ],
           "height": 220,
           "hovermode": "closest",
diff --git a/public/components/visualizations/plotly/__tests__/__snapshots__/plotly.test.tsx.snap b/public/components/visualizations/plotly/__tests__/__snapshots__/plotly.test.tsx.snap
index af24195dd..5ed2e0512 100644
--- a/public/components/visualizations/plotly/__tests__/__snapshots__/plotly.test.tsx.snap
+++ b/public/components/visualizations/plotly/__tests__/__snapshots__/plotly.test.tsx.snap
@@ -36,7 +36,7 @@ exports[`Ploty base component Renders Ploty base component 1`] = `
   layout={
     Object {
       "colorway": Array [
-        "#8C55A3",
+        "#54B399",
       ],
       "height": 220,
       "margin": Object {
@@ -101,7 +101,7 @@ exports[`Ploty base component Renders Ploty base component 1`] = `
         "autosize": true,
         "barmode": "stack",
         "colorway": Array [
-          "#8C55A3",
+          "#54B399",
         ],
         "height": 220,
         "hovermode": "closest",