diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md
index fdaf99670..d2b1b13b9 100644
--- a/packages/polaris-viz/CHANGELOG.md
+++ b/packages/polaris-viz/CHANGELOG.md
@@ -5,7 +5,11 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
-
+## Unreleased
+
+### Changed
+
+- Changed default series icon indicator for non-line charts to a circle from a square.
## [15.8.1] - 2025-01-21
diff --git a/packages/polaris-viz/src/components/DefaultPreview/DefaultPreview.scss b/packages/polaris-viz/src/components/DefaultPreview/DefaultPreview.scss
new file mode 100644
index 000000000..ea7be0fe8
--- /dev/null
+++ b/packages/polaris-viz/src/components/DefaultPreview/DefaultPreview.scss
@@ -0,0 +1,9 @@
+@import '../../styles/common';
+
+.ColorPreview {
+ border-radius: 100%;
+ display: block;
+ flex: none;
+ @include print-color;
+ overflow: hidden;
+}
diff --git a/packages/polaris-viz/src/components/DefaultPreview/DefaultPreview.tsx b/packages/polaris-viz/src/components/DefaultPreview/DefaultPreview.tsx
new file mode 100644
index 000000000..1a1b68695
--- /dev/null
+++ b/packages/polaris-viz/src/components/DefaultPreview/DefaultPreview.tsx
@@ -0,0 +1,24 @@
+import type {Color} from '@shopify/polaris-viz-core';
+
+import {getCSSBackgroundFromColor} from '../../utilities/getCSSBackgroundFromColor';
+
+import styles from './DefaultPreview.scss';
+
+const ANGLE = 305;
+
+export interface DefaultPreviewProps {
+ color: Color;
+}
+
+const ICON_SIZE = 8;
+
+export function DefaultPreview({color}: DefaultPreviewProps) {
+ const background = getCSSBackgroundFromColor(color, ANGLE);
+
+ return (
+
+ );
+}
diff --git a/packages/polaris-viz/src/components/DefaultPreview/index.ts b/packages/polaris-viz/src/components/DefaultPreview/index.ts
new file mode 100644
index 000000000..e53b64b51
--- /dev/null
+++ b/packages/polaris-viz/src/components/DefaultPreview/index.ts
@@ -0,0 +1,2 @@
+export {DefaultPreview} from './DefaultPreview';
+export type {DefaultPreviewProps} from './DefaultPreview';
diff --git a/packages/polaris-viz/src/components/DefaultPreview/stories/DefaultPreview.stories.tsx b/packages/polaris-viz/src/components/DefaultPreview/stories/DefaultPreview.stories.tsx
new file mode 100644
index 000000000..1d87b4b9c
--- /dev/null
+++ b/packages/polaris-viz/src/components/DefaultPreview/stories/DefaultPreview.stories.tsx
@@ -0,0 +1,33 @@
+import type {Story} from '@storybook/react';
+import {COLOR_VARIABLES} from '@shopify/polaris-viz-core';
+
+export {META as default} from './meta';
+
+import type {DefaultPreviewProps} from '../..';
+
+import {Template} from './data';
+
+export const Solid: Story = Template.bind({});
+
+Solid.args = {
+ color: COLOR_VARIABLES.colorTeal80,
+};
+
+export const Gradient: Story = Template.bind({});
+
+Gradient.args = {
+ color: [
+ {
+ color: '#39337f',
+ offset: 0,
+ },
+ {
+ color: '#5052b3',
+ offset: 50,
+ },
+ {
+ color: '#1bbe9e',
+ offset: 100,
+ },
+ ],
+};
diff --git a/packages/polaris-viz/src/components/DefaultPreview/stories/data.tsx b/packages/polaris-viz/src/components/DefaultPreview/stories/data.tsx
new file mode 100644
index 000000000..f71926abe
--- /dev/null
+++ b/packages/polaris-viz/src/components/DefaultPreview/stories/data.tsx
@@ -0,0 +1,10 @@
+import type {Story} from '@storybook/react';
+
+import type {DefaultPreviewProps} from '../DefaultPreview';
+import {DefaultPreview} from '../DefaultPreview';
+
+export const Template: Story = (
+ args: DefaultPreviewProps,
+) => {
+ return ;
+};
diff --git a/packages/polaris-viz/src/components/DefaultPreview/stories/meta.tsx b/packages/polaris-viz/src/components/DefaultPreview/stories/meta.tsx
new file mode 100644
index 000000000..e420501ce
--- /dev/null
+++ b/packages/polaris-viz/src/components/DefaultPreview/stories/meta.tsx
@@ -0,0 +1,24 @@
+import type {Meta} from '@storybook/react';
+
+import {CONTROLS_ARGS} from '../../../storybook/constants';
+import {DefaultPreview} from '../DefaultPreview';
+
+export const META: Meta = {
+ title: 'Shared/Subcomponents/DefaultPreview',
+ component: DefaultPreview,
+ argTypes: {
+ color: {
+ description:
+ 'The CSS color or gradient array color to be displayed in the square.',
+ },
+ },
+ parameters: {
+ controls: CONTROLS_ARGS,
+ docs: {
+ description: {
+ component:
+ 'Used to connect chart colors and gradients to information in tooltips and legends.',
+ },
+ },
+ },
+};
diff --git a/packages/polaris-viz/src/components/DefaultPreview/tests/DefaultPreview.test.tsx b/packages/polaris-viz/src/components/DefaultPreview/tests/DefaultPreview.test.tsx
new file mode 100644
index 000000000..3f0c3e185
--- /dev/null
+++ b/packages/polaris-viz/src/components/DefaultPreview/tests/DefaultPreview.test.tsx
@@ -0,0 +1,17 @@
+import {mount} from '@shopify/react-testing';
+
+import {DefaultPreview} from '../DefaultPreview';
+
+describe('', () => {
+ it('renders a div with a background color', () => {
+ const actual = mount();
+
+ expect(actual).toContainReactComponent('span', {
+ style: {
+ background: 'rgb(222, 54, 24)',
+ height: 8,
+ width: 8,
+ },
+ });
+ });
+});
diff --git a/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.scss b/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.scss
index e05c8cb39..b959bf5af 100644
--- a/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.scss
+++ b/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.scss
@@ -38,5 +38,5 @@
.IconContainer {
display: flex;
align-items: center;
- justify-items: center;
+ justify-content: center;
}
diff --git a/packages/polaris-viz/src/components/Legend/constants.ts b/packages/polaris-viz/src/components/Legend/constants.ts
index e2862bfb0..4c2e4ac2c 100644
--- a/packages/polaris-viz/src/components/Legend/constants.ts
+++ b/packages/polaris-viz/src/components/Legend/constants.ts
@@ -1,3 +1,3 @@
export const LEGEND_ITEM_LEFT_PADDING = 8;
export const LEGEND_ITEM_RIGHT_PADDING = 16;
-export const LEGEND_ITEM_GAP = 8;
+export const LEGEND_ITEM_GAP = 6;
diff --git a/packages/polaris-viz/src/components/index.ts b/packages/polaris-viz/src/components/index.ts
index 84295f149..a17653c0f 100644
--- a/packages/polaris-viz/src/components/index.ts
+++ b/packages/polaris-viz/src/components/index.ts
@@ -12,6 +12,8 @@ export type {SimpleNormalizedChartProps} from './SimpleNormalizedChart';
export {YAxis} from './YAxis';
export {SquareColorPreview} from './SquareColorPreview';
export type {SquareColorPreviewProps} from './SquareColorPreview';
+export {DefaultPreview} from './DefaultPreview';
+export type {DefaultPreviewProps} from './DefaultPreview';
export {StackedAreaChart} from './StackedAreaChart';
export type {StackedAreaChartProps} from './StackedAreaChart';
export {BarChart} from './BarChart';
diff --git a/packages/polaris-viz/src/components/shared/SeriesIcon/SeriesIcon.tsx b/packages/polaris-viz/src/components/shared/SeriesIcon/SeriesIcon.tsx
index 33c1b97a0..b0f2fd6a9 100644
--- a/packages/polaris-viz/src/components/shared/SeriesIcon/SeriesIcon.tsx
+++ b/packages/polaris-viz/src/components/shared/SeriesIcon/SeriesIcon.tsx
@@ -1,7 +1,7 @@
import type {Shape, Color, LineStyle} from '@shopify/polaris-viz-core';
import {LinePreview} from '../../LinePreview';
-import {SquareColorPreview} from '../../SquareColorPreview';
+import {DefaultPreview} from '../../DefaultPreview';
interface Props {
color: Color;
@@ -16,8 +16,7 @@ export function SeriesIcon({color, lineStyle, shape = 'Bar'}: Props) {
return ;
}
- case 'Bar':
default:
- return ;
+ return ;
}
}