vccs 0.4.1 → 0.6.0

package/dist/es/cartesian/getCartesianPosition.mjs

@@ -0,0 +1,176 @@
+import { isNumber, isPercent } from "../utils/validate.mjs";
+import { getPercentValue } from "../utils/data.mjs";
+//#region src/cartesian/getCartesianPosition.ts
+function cartesianViewBoxToTrapezoid(box) {
+	if (!box) return;
+	return {
+		x: box.x,
+		y: box.y,
+		upperWidth: "upperWidth" in box ? box.upperWidth : box.width,
+		lowerWidth: "lowerWidth" in box ? box.lowerWidth : box.width,
+		width: box.width,
+		height: box.height
+	};
+}
+/**
+* Calculates the position and alignment for a generic element in a Cartesian coordinate system.
+*
+* @param options - The options including viewBox, position, and offset.
+* @returns The calculated x, y, alignment and size.
+*/
+function getCartesianPosition(options) {
+	const { viewBox, position, offset = 0, parentViewBox, clamp } = options;
+	const { x, y, height, upperWidth, lowerWidth } = cartesianViewBoxToTrapezoid(viewBox);
+	const upperX = x;
+	const lowerX = x + (upperWidth - lowerWidth) / 2;
+	const middleX = (upperX + lowerX) / 2;
+	const midHeightWidth = (upperWidth + lowerWidth) / 2;
+	const centerX = upperX + upperWidth / 2;
+	const verticalSign = height >= 0 ? 1 : -1;
+	const verticalOffset = verticalSign * offset;
+	const verticalEnd = verticalSign > 0 ? "end" : "start";
+	const verticalStart = verticalSign > 0 ? "start" : "end";
+	const horizontalSign = upperWidth >= 0 ? 1 : -1;
+	const horizontalOffset = horizontalSign * offset;
+	const horizontalEnd = horizontalSign > 0 ? "end" : "start";
+	const horizontalStart = horizontalSign > 0 ? "start" : "end";
+	if (position === "top") {
+		const result = {
+			x: upperX + upperWidth / 2,
+			y: y - verticalOffset,
+			horizontalAnchor: "middle",
+			verticalAnchor: verticalEnd
+		};
+		if (clamp && parentViewBox) {
+			result.height = Math.max(y - parentViewBox.y, 0);
+			result.width = upperWidth;
+		}
+		return result;
+	}
+	if (position === "bottom") {
+		const result = {
+			x: lowerX + lowerWidth / 2,
+			y: y + height + verticalOffset,
+			horizontalAnchor: "middle",
+			verticalAnchor: verticalStart
+		};
+		if (clamp && parentViewBox) {
+			result.height = Math.max(parentViewBox.y + parentViewBox.height - (y + height), 0);
+			result.width = lowerWidth;
+		}
+		return result;
+	}
+	if (position === "left") {
+		const result = {
+			x: middleX - horizontalOffset,
+			y: y + height / 2,
+			horizontalAnchor: horizontalEnd,
+			verticalAnchor: "middle"
+		};
+		if (clamp && parentViewBox) {
+			result.width = Math.max(result.x - parentViewBox.x, 0);
+			result.height = height;
+		}
+		return result;
+	}
+	if (position === "right") {
+		const result = {
+			x: middleX + midHeightWidth + horizontalOffset,
+			y: y + height / 2,
+			horizontalAnchor: horizontalStart,
+			verticalAnchor: "middle"
+		};
+		if (clamp && parentViewBox) {
+			result.width = Math.max(parentViewBox.x + parentViewBox.width - result.x, 0);
+			result.height = height;
+		}
+		return result;
+	}
+	const sizeAttrs = clamp && parentViewBox ? {
+		width: midHeightWidth,
+		height
+	} : {};
+	if (position === "insideLeft") return {
+		x: middleX + horizontalOffset,
+		y: y + height / 2,
+		horizontalAnchor: horizontalStart,
+		verticalAnchor: "middle",
+		...sizeAttrs
+	};
+	if (position === "insideRight") return {
+		x: middleX + midHeightWidth - horizontalOffset,
+		y: y + height / 2,
+		horizontalAnchor: horizontalEnd,
+		verticalAnchor: "middle",
+		...sizeAttrs
+	};
+	if (position === "insideTop") return {
+		x: upperX + upperWidth / 2,
+		y: y + verticalOffset,
+		horizontalAnchor: "middle",
+		verticalAnchor: verticalStart,
+		...sizeAttrs
+	};
+	if (position === "insideBottom") return {
+		x: lowerX + lowerWidth / 2,
+		y: y + height - verticalOffset,
+		horizontalAnchor: "middle",
+		verticalAnchor: verticalEnd,
+		...sizeAttrs
+	};
+	if (position === "insideTopLeft") return {
+		x: upperX + horizontalOffset,
+		y: y + verticalOffset,
+		horizontalAnchor: horizontalStart,
+		verticalAnchor: verticalStart,
+		...sizeAttrs
+	};
+	if (position === "insideTopRight") return {
+		x: upperX + upperWidth - horizontalOffset,
+		y: y + verticalOffset,
+		horizontalAnchor: horizontalEnd,
+		verticalAnchor: verticalStart,
+		...sizeAttrs
+	};
+	if (position === "insideBottomLeft") return {
+		x: lowerX + horizontalOffset,
+		y: y + height - verticalOffset,
+		horizontalAnchor: horizontalStart,
+		verticalAnchor: verticalEnd,
+		...sizeAttrs
+	};
+	if (position === "insideBottomRight") return {
+		x: lowerX + lowerWidth - horizontalOffset,
+		y: y + height - verticalOffset,
+		horizontalAnchor: horizontalEnd,
+		verticalAnchor: verticalEnd,
+		...sizeAttrs
+	};
+	if (!!position && typeof position === "object" && (isNumber(position.x) || isPercent(position.x)) && (isNumber(position.y) || isPercent(position.y))) return {
+		x: x + getPercentValue(position.x, midHeightWidth),
+		y: y + getPercentValue(position.y, height),
+		horizontalAnchor: "end",
+		verticalAnchor: "end",
+		...sizeAttrs
+	};
+	return {
+		x: centerX,
+		y: y + height / 2,
+		horizontalAnchor: "middle",
+		verticalAnchor: "middle",
+		...sizeAttrs
+	};
+}
+var absolutePositions = [
+	"top",
+	"left",
+	"right",
+	"bottom"
+];
+function isOutsidePosition(position) {
+	if (position == null) return false;
+	if (typeof position === "object") return true;
+	return absolutePositions.includes(position);
+}
+//#endregion
+export { getCartesianPosition, isOutsidePosition };

package/dist/es/chart/{RechartsWrapper.mjs → ChartsWrapper.mjs}

@@ -10,10 +10,11 @@ import { useSynchronisedEventsFromOtherCharts } from "../events/useChartSynchron
 import { useReportScale } from "../state/utils/useReportScale.mjs";
 import { providePortalRaw } from "./TooltipPortalContext.mjs";
 import { provideLegendPortalRaw } from "./LegendPortalContext.mjs";
-import { createVNode, defineComponent, ref } from "vue";
-//#region src/chart/RechartsWrapper.tsx
-var RechartsWrapper = /* @__PURE__ */ defineComponent({
-	name: "RechartsWrapper",
+import { createVNode, defineComponent, ref, watch } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+//#region src/chart/ChartsWrapper.tsx
+var ChartsWrapper = /* @__PURE__ */ defineComponent({
+	name: "ChartsWrapper",
 	props: {
 		class: classProp,
 		height: {
@@ -28,9 +29,14 @@ var RechartsWrapper = /* @__PURE__ */ defineComponent({
 		onMouseLeave: { type: Function },
 		onMouseMove: { type: Function },
 		onMouseUp: { type: Function },
+		onResize: { type: Function },
 		onTouchEnd: { type: Function },
 		onTouchMove: { type: Function },
 		onTouchStart: { type: Function },
+		responsive: {
+			type: Boolean,
+			default: false
+		},
 		style: { type: [
 			String,
 			Object,
@@ -49,11 +55,20 @@ var RechartsWrapper = /* @__PURE__ */ defineComponent({
 		const legendPortal = ref(null);
 		providePortalRaw(tooltipPortal);
 		provideLegendPortalRaw(legendPortal);
+		const wrapperEl = ref(null);
 		const innerRef = (node) => {
 			scaleRef.value = node;
 			tooltipPortal.value = node;
 			legendPortal.value = node;
+			wrapperEl.value = node;
 		};
+		watch(() => props.responsive, (responsive, _, onCleanup) => {
+			if (!responsive) return;
+			onCleanup(useResizeObserver(wrapperEl, (entries) => {
+				const { width, height } = entries[0].contentRect;
+				props.onResize?.(width, height);
+			}).stop);
+		}, { immediate: true });
 		const myOnClick = (e) => {
 			const chartPointer = getChartPointer(e);
 			if (chartPointer) dispatch(mouseClickAction(chartPointer));
@@ -136,7 +151,12 @@ var RechartsWrapper = /* @__PURE__ */ defineComponent({
 		};
 		return () => createVNode("div", {
 			"class": ["v-charts-wrapper", props.class],
-			"style": [{
+			"style": [props.responsive ? {
+				position: "relative",
+				cursor: "default",
+				width: "100%",
+				height: "100%"
+			} : {
 				position: "relative",
 				cursor: "default",
 				width: `${props.width}px`,
@@ -161,4 +181,4 @@ var RechartsWrapper = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-export { RechartsWrapper };
+export { ChartsWrapper };

package/dist/es/chart/Sankey.mjs

@@ -3,7 +3,7 @@ import { useAppDispatch } from "../state/hooks.mjs";
 import { Layer } from "../container/Layer.mjs";
 import { Animate } from "../animation/Animate.mjs";
 import { createRechartsStore } from "../state/store.mjs";
-import { RechartsWrapper } from "./RechartsWrapper.mjs";
+import { ChartsWrapper } from "./ChartsWrapper.mjs";
 import Surface from "../container/Surface.mjs";
 import { computeSankeyLayout, linkPathGenerator } from "./sankeyUtils.mjs";
 import { Fragment, computed, createVNode, defineComponent, watchEffect } from "vue";
@@ -318,7 +318,7 @@ var Sankey = /* @__PURE__ */ defineComponent({
 		provideStore({ store: createRechartsStore({ options: sankeyOptions }, "Sankey") });
 		return () => {
 			if (!props.data || !props.data.nodes || props.data.nodes.length === 0) return null;
-			return createVNode(RechartsWrapper, {
+			return createVNode(ChartsWrapper, {
 				"width": props.width,
 				"height": props.height
 			}, { default: () => [createVNode(SankeyInner, props, {

package/dist/es/chart/SunburstChart.mjs

@@ -3,7 +3,7 @@ import { addTooltipEntrySettings, mouseLeaveItem, removeTooltipEntrySettings, se
 import { useAppDispatch } from "../state/hooks.mjs";
 import { Layer } from "../container/Layer.mjs";
 import { createRechartsStore } from "../state/store.mjs";
-import { RechartsWrapper } from "./RechartsWrapper.mjs";
+import { ChartsWrapper } from "./ChartsWrapper.mjs";
 import Surface from "../container/Surface.mjs";
 import { Sector } from "../shape/Sector.mjs";
 import { computeSunburstLayout } from "./sunburstUtils.mjs";
@@ -218,7 +218,7 @@ var SunburstChart = /* @__PURE__ */ defineComponent({
 		provideStore({ store: createRechartsStore({ options: sunburstOptions }, "SunburstChart") });
 		return () => {
 			if (!props.data?.children || props.data.children.length === 0) return null;
-			return createVNode(RechartsWrapper, {
+			return createVNode(ChartsWrapper, {
 				"width": props.width,
 				"height": props.height
 			}, { default: () => [createVNode(SunburstInner, props, { content: slots.content }), slots.default?.()] });

package/dist/es/chart/Surface.vue_vue_type_script_setup_true_lang.mjs

@@ -17,7 +17,13 @@ var Surface_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		height: {},
 		viewBox: {},
 		class: {},
-		style: {},
+		style: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
 		title: {},
 		desc: {}
 	},

package/dist/es/chart/Treemap.mjs

@@ -4,7 +4,7 @@ import { Layer } from "../container/Layer.mjs";
 import { getStringSize } from "../utils/attrs.mjs";
 import { Animate } from "../animation/Animate.mjs";
 import { createRechartsStore } from "../state/store.mjs";
-import { RechartsWrapper } from "./RechartsWrapper.mjs";
+import { ChartsWrapper } from "./ChartsWrapper.mjs";
 import Surface from "../container/Surface.mjs";
 import { computeTreemapLayout } from "./treemapUtils.mjs";
 import { Fragment, computed, createTextVNode, createVNode, defineComponent, ref, watchEffect } from "vue";
@@ -368,7 +368,7 @@ var Treemap = /* @__PURE__ */ defineComponent({
 		provideStore({ store: createRechartsStore({ options: treemapOptions }, "Treemap") });
 		return () => {
 			if (!props.data || props.data.length === 0) return null;
-			return createVNode(RechartsWrapper, {
+			return createVNode(ChartsWrapper, {
 				"width": props.width,
 				"height": props.height
 			}, { default: () => [createVNode(TreemapInner, props, { content: slots.content }), slots.default?.()] });

package/dist/es/chart/generateCategoricalChart.mjs

@@ -1,16 +1,16 @@
 import { classProp } from "../types/common.mjs";
-import { validateWidthHeight } from "../utils/validate.mjs";
 import { provideClipPathId } from "./provideClipPathId.mjs";
 import { createRechartsStore } from "../state/store.mjs";
 import Surface_default from "./Surface.mjs";
 import { ChartDataContextProvider } from "../context/ChartDataContextProvider.mjs";
 import ClipPath_default from "../container/ClipPath.mjs";
-import { RechartsWrapper } from "./RechartsWrapper.mjs";
+import { ChartsWrapper } from "./ChartsWrapper.mjs";
 import { FULL_WIDTH_AND_HEIGHT } from "./const.mjs";
 import { ReportMainChartProps } from "../state/ReportMainChartProps.mjs";
 import ReportChartProps_default from "../state/ReportChartProps.mjs";
 import { applyDefaultProps } from "../utils/props.mjs";
 import { ReportPolarOptions } from "../state/ReportPolarOptions.mjs";
+import { useResponsiveSize } from "../hooks/useResponsiveSize.mjs";
 import { Fragment, createVNode, defineComponent, mergeProps } from "vue";
 import { provideStore } from "@reduxjs/vue-redux";
 //#region src/chart/generateCategoricalChart.tsx
@@ -63,6 +63,10 @@ var CategoricalProps = {
 	},
 	maxBarSize: { type: Number },
 	outerRadius: { type: [Number, String] },
+	responsive: {
+		type: Boolean,
+		default: false
+	},
 	reverseStackOrder: {
 		type: Boolean,
 		default: false
@@ -102,38 +106,43 @@ function generateCategoricalChart({ chartName, defaultProps = {}, defaultTooltip
 				eventEmitter: void 0
 			} }, props.id ?? chartName) });
 			const clipPathId = provideClipPathId(props);
+			const { effectiveWidth, effectiveHeight, hasValidSize, handleResize } = useResponsiveSize(props);
+			function renderPolarOptions(isPolarChart) {
+				if (!isPolarChart) return null;
+				return createVNode(ReportPolarOptions, {
+					"cx": props.cx ?? "50%",
+					"cy": props.cy ?? "50%",
+					"startAngle": props.startAngle ?? defaultProps.startAngle ?? 90,
+					"endAngle": props.endAngle ?? defaultProps.endAngle ?? -270,
+					"innerRadius": props.innerRadius ?? 0,
+					"outerRadius": props.outerRadius ?? "80%"
+				}, null);
+			}
 			return () => {
-				const { compact, width, height, title, desc, ...rest } = props;
+				const { compact, width, height, title, desc, responsive, ...rest } = props;
 				const attributes = { ...attrs };
-				if (!validateWidthHeight({
-					width,
-					height
-				})) return null;
 				const layout = props.layout ?? defaultProps.layout ?? defaultLayout;
 				const isPolarChart = layout === "centric" || layout === "radial";
-				if (compact) return createVNode(Fragment, null, [
-					createVNode(ChartDataContextProvider, { "chartData": props.data }, null),
-					createVNode(ReportMainChartProps, {
-						"width": width,
-						"height": height,
-						"layout": layout,
-						"margin": props.margin ?? defaultMargin
-					}, null),
-					isPolarChart && createVNode(ReportPolarOptions, {
-						"cx": props.cx ?? "50%",
-						"cy": props.cy ?? "50%",
-						"startAngle": props.startAngle ?? defaultProps.startAngle ?? 90,
-						"endAngle": props.endAngle ?? defaultProps.endAngle ?? -270,
-						"innerRadius": props.innerRadius ?? 0,
-						"outerRadius": props.outerRadius ?? "80%"
-					}, null),
-					createVNode(Surface_default, mergeProps(attrs, rest, {
-						"width": width,
-						"height": height,
-						"title": title,
-						"desc": desc
-					}), { default: () => [createVNode(ClipPath_default, { "clipPathId": clipPathId }, null), slots.default?.()] })
-				]);
+				if (compact) {
+					if (!hasValidSize.value) return null;
+					return createVNode(Fragment, null, [
+						createVNode(ChartDataContextProvider, { "chartData": props.data }, null),
+						createVNode(ReportMainChartProps, {
+							"width": effectiveWidth.value,
+							"height": effectiveHeight.value,
+							"layout": layout,
+							"margin": props.margin
+						}, null),
+						renderPolarOptions(isPolarChart),
+						createVNode(Surface_default, mergeProps(attrs, rest, {
+							"width": effectiveWidth.value,
+							"height": effectiveHeight.value,
+							"title": title,
+							"desc": desc
+						}), { default: () => [createVNode(ClipPath_default, { "clipPathId": clipPathId }, null), slots.default?.()] })
+					]);
+				}
+				if (!responsive && !hasValidSize.value) return null;
 				if (props.accessibilityLayer) {
 					attributes.tabindex = props.tabIndex ?? 0;
 					attributes.role = props.role ?? "application";
@@ -143,34 +152,29 @@ function generateCategoricalChart({ chartName, defaultProps = {}, defaultTooltip
 				for (const [key, value] of Object.entries(attributes)) if (key.startsWith("on") && typeof value === "function") eventHandlerAttrs[key] = value;
 				else svgAttributes[key] = value;
 				return createVNode(Fragment, null, [
-					createVNode(ChartDataContextProvider, { "chartData": props.data }, null),
-					createVNode(ReportMainChartProps, {
-						"width": width,
-						"height": height,
+					hasValidSize.value && createVNode(ChartDataContextProvider, { "chartData": props.data }, null),
+					hasValidSize.value && createVNode(ReportMainChartProps, {
+						"width": effectiveWidth.value,
+						"height": effectiveHeight.value,
 						"layout": layout,
 						"margin": props.margin ?? defaultMargin
 					}, null),
-					isPolarChart && createVNode(ReportPolarOptions, {
-						"cx": props.cx ?? "50%",
-						"cy": props.cy ?? "50%",
-						"startAngle": props.startAngle ?? defaultProps.startAngle ?? 90,
-						"endAngle": props.endAngle ?? defaultProps.endAngle ?? -270,
-						"innerRadius": props.innerRadius ?? 0,
-						"outerRadius": props.outerRadius ?? "80%"
-					}, null),
-					createVNode(RechartsWrapper, mergeProps({
+					hasValidSize.value && renderPolarOptions(isPolarChart),
+					createVNode(ChartsWrapper, mergeProps({
+						"responsive": responsive,
+						"onResize": handleResize,
 						"style": props.style,
 						"class": props.class,
-						"width": width,
-						"height": height
-					}, eventHandlerAttrs), { default: () => [createVNode(Surface_default, mergeProps(svgAttributes, {
-						"width": width,
-						"height": height,
+						"width": effectiveWidth.value,
+						"height": effectiveHeight.value
+					}, eventHandlerAttrs), { default: () => [hasValidSize.value && createVNode(Surface_default, mergeProps(svgAttributes, {
+						"width": effectiveWidth.value,
+						"height": effectiveHeight.value,
 						"title": title,
 						"desc": desc,
 						"style": FULL_WIDTH_AND_HEIGHT
 					}), { default: () => [createVNode(ClipPath_default, { "clipPathId": clipPathId }, null), slots.default?.()] }), slots.tooltip?.()] }),
-					createVNode(ReportChartProps_default, props, null)
+					hasValidSize.value && createVNode(ReportChartProps_default, props, null)
 				]);
 			};
 		}

package/dist/es/components/legend/Legend.mjs

@@ -12,7 +12,7 @@ var Legend_default = /* @__PURE__ */ defineComponent({
 	name: "Legend",
 	props: LegendVueProps,
 	setup(props, { slots }) {
-		const { legendRef, processedPayload, outerStyle, legendPortal, syncSettings, syncSize } = useLegend(props);
+		const { legendRef, processedPayload, outerStyle, legendPortal, resolvedLayout, positionViewBox, syncSettings, syncSize } = useLegend(props);
 		const { getItemStyle, getSvgStyle, formatValue, handleClick, handleMouseEnter, handleMouseLeave } = useLegendContent(props);
 		watchEffect(() => {
 			syncSettings();
@@ -20,7 +20,8 @@ var Legend_default = /* @__PURE__ */ defineComponent({
 		});
 		const renderDefaultContent = () => {
 			if (!processedPayload.value || processedPayload.value.length === 0) return null;
-			const { layout = "horizontal", align = "center", iconSize = 14 } = props;
+			const { align = "center", iconSize = 14 } = props;
+			const layout = resolvedLayout.value;
 			const finalStyle = {
 				padding: 0,
 				margin: 0,
@@ -73,13 +74,14 @@ var Legend_default = /* @__PURE__ */ defineComponent({
 			if (!processedPayload.value || processedPayload.value.length === 0) return null;
 			const contentProps = {
 				...props,
+				layout: resolvedLayout.value,
 				payload: processedPayload.value
 			};
 			if (slots.content) return slots.content(contentProps);
 			return renderDefaultContent();
 		};
 		return () => {
-			if (legendPortal.value == null) return null;
+			if (legendPortal.value == null || props.position != null && positionViewBox.value == null) return null;
 			const legendElement = createVNode("div", {
 				"class": "v-charts-legend-wrapper",
 				"style": outerStyle.value,

package/dist/es/components/legend/hooks/useLegend.mjs

@@ -1,10 +1,13 @@
 import { selectLegendPayload } from "../../../state/selectors/legendSelectors.mjs";
+import { getCartesianPosition, isOutsidePosition } from "../../../cartesian/getCartesianPosition.mjs";
 import { useAppDispatch, useAppSelector } from "../../../state/hooks.mjs";
-import { useChartHeight, useChartWidth, useMargin } from "../../../context/chartLayoutContext.mjs";
+import { useChartHeight, useChartWidth, useMargin, useViewBox } from "../../../context/chartLayoutContext.mjs";
 import { setLegendSettings, setLegendSize } from "../../../state/legendSlice.mjs";
 import { useLegendPortal } from "../../../chart/LegendPortalContext.mjs";
+import { selectLegendArea } from "../../../state/selectors/selectLegendArea.mjs";
 import { getUniqPayload } from "../../../utils/payload/getUniqPayload.mjs";
-import { defaultUniqBy, getDefaultPosition, getWidthOrHeight } from "../utils.mjs";
+import { cartesianPositionToCSSTranslate } from "../../../cartesian/cartesianPositionToCSSTranslate.mjs";
+import { defaultUniqBy, getDefaultPosition, getLayoutForPosition, getOutsidePositionOffset, getWidthOrHeight } from "../utils.mjs";
 import { computed, ref } from "vue";
 import { sortBy } from "es-toolkit/compat";
 import { useElementBounding } from "@vueuse/core";
@@ -16,14 +19,22 @@ function useLegend(props) {
 	const margin = useMargin();
 	const chartWidth = useChartWidth();
 	const chartHeight = useChartHeight();
+	const viewBox = useViewBox();
+	const legendArea = useAppSelector(selectLegendArea);
 	const legendRef = ref();
 	const { width: boundingWidth, height: boundingHeight } = useElementBounding(legendRef);
+	const resolvedLayout = computed(() => props.layout && props.layout !== "auto" ? props.layout : getLayoutForPosition(props.position));
 	const maxWidth = computed(() => chartWidth.value - (margin.value.left || 0) - (margin.value.right || 0));
-	const widthOrHeight = computed(() => getWidthOrHeight(props.layout, props.height, props.width, maxWidth.value));
+	const widthOrHeight = computed(() => getWidthOrHeight(resolvedLayout.value, props.height, props.width, maxWidth.value));
 	const boundingBox = computed(() => ({
 		width: boundingWidth.value,
 		height: boundingHeight.value
 	}));
+	const positionViewBox = computed(() => {
+		if (props.position == null) return null;
+		return isOutsidePosition(props.position) ? legendArea.value : viewBox.value;
+	});
+	const shouldReportDimensions = computed(() => props.portal == null && (props.position == null || isOutsidePosition(props.position)));
 	const processedPayload = computed(() => {
 		if (!contextPayload.value || contextPayload.value.length === 0) return [];
 		let finalPayload = getUniqPayload(contextPayload.value, props.payloadUniqBy, defaultUniqBy);
@@ -33,30 +44,58 @@ function useLegend(props) {
 		}
 		return Array.from(finalPayload);
 	});
+	const positionStyle = computed(() => {
+		if (props.position == null || positionViewBox.value == null) return;
+		const positionResult = getCartesianPosition({
+			viewBox: positionViewBox.value,
+			position: props.position,
+			offset: props.offset ?? 0
+		});
+		const outsidePositionOffset = getOutsidePositionOffset(props.position, props.offset ?? 0, boundingBox.value);
+		const positionMaxWidth = resolvedLayout.value === "vertical" ? (positionViewBox.value.width ?? 0) / 2 : positionViewBox.value.width ?? 0;
+		const positionMaxHeight = resolvedLayout.value === "horizontal" ? (positionViewBox.value.height ?? 0) / 2 : positionViewBox.value.height ?? 0;
+		return {
+			width: "max-content",
+			height: "max-content",
+			maxWidth: `${positionMaxWidth}px`,
+			maxHeight: `${positionMaxHeight}px`,
+			overflowY: "auto",
+			top: `${positionResult.y + (outsidePositionOffset.top ?? 0)}px`,
+			left: `${positionResult.x + (outsidePositionOffset.left ?? 0)}px`,
+			transform: cartesianPositionToCSSTranslate(positionResult.horizontalAnchor, positionResult.verticalAnchor)
+		};
+	});
 	const outerStyle = computed(() => {
 		const userStyle = props.wrapperStyle ? { ...props.wrapperStyle } : {};
 		if (props.portal) return userStyle;
 		const baseStyle = {
 			position: "absolute",
-			width: widthOrHeight.value?.width ? `${widthOrHeight.value.width}px` : props.width ? `${props.width}px` : "auto",
-			height: widthOrHeight.value?.height ? `${widthOrHeight.value.height}px` : props.height ? `${props.height}px` : "auto"
+			width: widthOrHeight.value?.width || props.width || "auto",
+			height: widthOrHeight.value?.height || props.height || "auto"
 		};
-		const positionStyle = getDefaultPosition(userStyle, props, margin.value, chartWidth.value, chartHeight.value, boundingBox.value);
+		const calculatedPositionStyle = positionStyle.value ?? getDefaultPosition(userStyle, {
+			layout: resolvedLayout.value,
+			align: props.align,
+			verticalAlign: props.verticalAlign
+		}, margin.value, chartWidth.value, chartHeight.value, boundingBox.value);
 		return {
 			...baseStyle,
-			...positionStyle,
+			...calculatedPositionStyle,
 			...userStyle
 		};
 	});
 	const legendPortal = computed(() => props.portal ?? legendPortalFromContext?.value);
 	const syncSettings = () => {
 		dispatch(setLegendSettings({
-			layout: props.layout,
+			layout: resolvedLayout.value,
 			align: props.align,
-			verticalAlign: props.verticalAlign
+			verticalAlign: props.verticalAlign,
+			position: props.position,
+			offset: props.offset
 		}));
 	};
 	const syncSize = () => {
+		if (!shouldReportDimensions.value) return;
 		dispatch(setLegendSize({
 			width: boundingBox.value.width,
 			height: boundingBox.value.height
@@ -69,6 +108,8 @@ function useLegend(props) {
 		processedPayload,
 		outerStyle,
 		legendPortal,
+		resolvedLayout,
+		positionViewBox,
 		syncSettings,
 		syncSize
 	};

package/dist/es/components/legend/type.mjs

@@ -2,7 +2,7 @@
 var LegendVueProps = {
 	layout: {
 		type: String,
-		default: "horizontal"
+		default: "auto"
 	},
 	align: {
 		type: String,
@@ -12,6 +12,14 @@ var LegendVueProps = {
 		type: String,
 		default: "bottom"
 	},
+	position: {
+		type: [String, Object],
+		default: void 0
+	},
+	offset: {
+		type: Number,
+		default: 0
+	},
 	width: Number,
 	height: Number,
 	iconSize: {

package/dist/es/components/legend/utils.mjs

@@ -1,5 +1,16 @@
 import { isNumber } from "../../utils/validate.mjs";
 //#region src/components/legend/utils.ts
+function getLayoutForPosition(position) {
+	if (position === "left" || position === "right" || position === "insideLeft" || position === "insideRight") return "vertical";
+	return "horizontal";
+}
+function getOutsidePositionOffset(position, offset, box) {
+	if (position === "top") return { top: box.height + offset };
+	if (position === "bottom") return { top: -box.height - offset };
+	if (position === "left") return { left: box.width + offset };
+	if (position === "right") return { left: -box.width - offset };
+	return {};
+}
 function getDefaultPosition(style, props, margin, chartWidth, chartHeight, box) {
 	const { layout, align, verticalAlign } = props;
 	let hPos = {};
@@ -22,4 +33,4 @@ function defaultUniqBy(entry) {
 	return entry.value;
 }
 //#endregion
-export { defaultUniqBy, getDefaultPosition, getWidthOrHeight };
+export { defaultUniqBy, getDefaultPosition, getLayoutForPosition, getOutsidePositionOffset, getWidthOrHeight };