+
@@ -160,7 +166,10 @@ class Component extends React.Component
{
});
return (
-
+
);
}),
diff --git a/packages/charts/src/utils/themes/dark_theme.ts b/packages/charts/src/utils/themes/dark_theme.ts
index 4653de47f3..b57ee62836 100644
--- a/packages/charts/src/utils/themes/dark_theme.ts
+++ b/packages/charts/src/utils/themes/dark_theme.ts
@@ -410,6 +410,7 @@ export const DARK_THEME: Theme = {
},
border: DARK_BASE_COLORS.lightShade,
barBackground: DARK_BASE_COLORS.lightShade,
+ emptyBackground: Colors.Transparent.keyword,
nonFiniteText: 'N/A',
minHeight: 64,
},
diff --git a/packages/charts/src/utils/themes/legacy_dark_theme.ts b/packages/charts/src/utils/themes/legacy_dark_theme.ts
index a23ad13981..8703f76e64 100644
--- a/packages/charts/src/utils/themes/legacy_dark_theme.ts
+++ b/packages/charts/src/utils/themes/legacy_dark_theme.ts
@@ -416,6 +416,7 @@ export const LEGACY_DARK_THEME: Theme = {
},
border: '#343741',
barBackground: '#343741',
+ emptyBackground: Colors.Transparent.keyword,
nonFiniteText: 'N/A',
minHeight: 64,
},
diff --git a/packages/charts/src/utils/themes/legacy_light_theme.ts b/packages/charts/src/utils/themes/legacy_light_theme.ts
index 0f7c2263b5..67980452ec 100644
--- a/packages/charts/src/utils/themes/legacy_light_theme.ts
+++ b/packages/charts/src/utils/themes/legacy_light_theme.ts
@@ -415,6 +415,7 @@ export const LEGACY_LIGHT_THEME: Theme = {
},
border: '#EDF0F5',
barBackground: '#EDF0F5',
+ emptyBackground: Colors.Transparent.keyword,
nonFiniteText: 'N/A',
minHeight: 64,
},
diff --git a/packages/charts/src/utils/themes/light_theme.ts b/packages/charts/src/utils/themes/light_theme.ts
index d414f757cd..c82fb3a130 100644
--- a/packages/charts/src/utils/themes/light_theme.ts
+++ b/packages/charts/src/utils/themes/light_theme.ts
@@ -409,6 +409,7 @@ export const LIGHT_THEME: Theme = {
},
border: '#EDF0F5', // LIGHT_BASE_COLORS.lightShade,
barBackground: '#EDF0F5', // LIGHT_BASE_COLORS.lightShade,
+ emptyBackground: Colors.Transparent.keyword,
nonFiniteText: 'N/A',
minHeight: 64,
},
diff --git a/packages/charts/src/utils/themes/theme.ts b/packages/charts/src/utils/themes/theme.ts
index 20374575dc..8497c7bb57 100644
--- a/packages/charts/src/utils/themes/theme.ts
+++ b/packages/charts/src/utils/themes/theme.ts
@@ -328,6 +328,7 @@ export interface MetricStyle {
};
border: Color;
barBackground: Color;
+ emptyBackground: Color;
nonFiniteText: string;
minHeight: Pixels;
}
diff --git a/storybook/parameters.ts b/storybook/parameters.ts
index 9209899570..c5b02c0743 100644
--- a/storybook/parameters.ts
+++ b/storybook/parameters.ts
@@ -81,6 +81,7 @@ export const storybookParameters: Parameters = {
{ id: 'blue', title: 'Blue', color: '#14abf5' },
{ id: 'yellow', title: 'Yellow', color: '#fec709' },
{ id: 'green', title: 'Green', color: '#00c1b4' },
+ { id: 'gray', title: 'Gray', color: 'rgb(237, 240, 245)' },
],
},
toggles: {
diff --git a/storybook/stories/metric/2_grid.story.tsx b/storybook/stories/metric/2_grid.story.tsx
index 84b791c8cd..2ab58e9c4f 100644
--- a/storybook/stories/metric/2_grid.story.tsx
+++ b/storybook/stories/metric/2_grid.story.tsx
@@ -8,7 +8,7 @@
import { EuiIcon } from '@elastic/eui';
import { action } from '@storybook/addon-actions';
-import { select, number, boolean, button } from '@storybook/addon-knobs';
+import { select, number, boolean, button, color } from '@storybook/addon-knobs';
import React, { useEffect, useMemo, useState } from 'react';
import { Chart, isMetricElementEvent, Metric, MetricDatum, Settings } from '@elastic/charts';
@@ -51,6 +51,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
const progressBarDirection = select('progress bar direction', ['horizontal', 'vertical'], 'vertical');
const maxDataPoints = number('max trend data points', 30, { min: 0, max: 50, step: 1 });
+ const emptyBackground = color('empty background', 'transparent');
const data: (MetricDatum | undefined)[] = useMemo(
() => [
@@ -211,6 +212,11 @@ export const Example: ChartsStory = (_, { title, description }) => {
.join(' ')}