vccs 0.4.1 → 0.5.0

package/dist/cartesian/axis/YAxis.d.ts

@@ -15,8 +15,8 @@ export declare const YAxis: import('vue').DefineComponent<import('vue').ExtractP
         default: boolean;
     };
     width: {
-        type: NumberConstructor;
-        default: number;
+        type: PropType<number | "auto">;
+        default: import('../../types/axis').YAxisWidth;
     };
     hide: {
         type: BooleanConstructor;
@@ -99,8 +99,8 @@ export declare const YAxis: import('vue').DefineComponent<import('vue').ExtractP
         default: boolean;
     };
     width: {
-        type: NumberConstructor;
-        default: number;
+        type: PropType<number | "auto">;
+        default: import('../../types/axis').YAxisWidth;
     };
     hide: {
         type: BooleanConstructor;
@@ -172,7 +172,7 @@ export declare const YAxis: import('vue').DefineComponent<import('vue').ExtractP
 }>> & Readonly<{}>, {
     tickFormatter: Function;
     unit: string;
-    width: number;
+    width: number | "auto";
     scale: string | Function;
     padding: Record<string, any>;
     type: string;

package/dist/cartesian/cartesian-axis/CartesianAxis.d.ts

@@ -110,6 +110,11 @@ export declare const CartesianAxis: import('vue').DefineComponent<import('vue').
         type: StringConstructor;
         default: string;
     };
+    /** Additional props to spread to each tick Text element. */
+    tickTextProps: {
+        type: ObjectConstructor;
+        default: any;
+    };
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     x: {
         type: NumberConstructor;
@@ -188,6 +193,11 @@ export declare const CartesianAxis: import('vue').DefineComponent<import('vue').
         type: StringConstructor;
         default: string;
     };
+    /** Additional props to spread to each tick Text element. */
+    tickTextProps: {
+        type: ObjectConstructor;
+        default: any;
+    };
 }>> & Readonly<{}>, {
     interval: string | number;
     tick: boolean;
@@ -207,4 +217,5 @@ export declare const CartesianAxis: import('vue').DefineComponent<import('vue').
     tickLine: boolean | Record<string, any>;
     tickSize: number;
     tickMargin: number;
+    tickTextProps: Record<string, any>;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/chart/{RechartsWrapper.d.ts → ChartsWrapper.d.ts}

@@ -1,6 +1,6 @@
 import { PropType, StyleValue } from 'vue';
 import { CategoricalChartFunc } from '../types';
-export declare const RechartsWrapper: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+export declare const ChartsWrapper: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     class: {
         type: PropType<import('../types').VueClassValue>;
         default: any;
@@ -33,6 +33,9 @@ export declare const RechartsWrapper: import('vue').DefineComponent<import('vue'
     onMouseUp: {
         type: PropType<CategoricalChartFunc>;
     };
+    onResize: {
+        type: PropType<(width: number, height: number) => void>;
+    };
     onTouchEnd: {
         type: PropType<CategoricalChartFunc>;
     };
@@ -42,6 +45,10 @@ export declare const RechartsWrapper: import('vue').DefineComponent<import('vue'
     onTouchStart: {
         type: PropType<CategoricalChartFunc>;
     };
+    responsive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     style: {
         type: PropType<StyleValue>;
     };
@@ -82,6 +89,9 @@ export declare const RechartsWrapper: import('vue').DefineComponent<import('vue'
     onMouseUp: {
         type: PropType<CategoricalChartFunc>;
     };
+    onResize: {
+        type: PropType<(width: number, height: number) => void>;
+    };
     onTouchEnd: {
         type: PropType<CategoricalChartFunc>;
     };
@@ -91,6 +101,10 @@ export declare const RechartsWrapper: import('vue').DefineComponent<import('vue'
     onTouchStart: {
         type: PropType<CategoricalChartFunc>;
     };
+    responsive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     style: {
         type: PropType<StyleValue>;
     };
@@ -100,4 +114,5 @@ export declare const RechartsWrapper: import('vue').DefineComponent<import('vue'
     };
 }>> & Readonly<{}>, {
     class: import('../types').VueClassValue;
+    responsive: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/chart/Surface.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'vue';
+import { StyleValue } from 'vue';
 import { VueClassValue } from '../types';
 interface SurfaceProps {
     width: number;
@@ -10,7 +10,7 @@ interface SurfaceProps {
         height?: number;
     };
     class?: VueClassValue;
-    style?: CSSProperties;
+    style?: StyleValue;
     title?: string;
     desc?: string;
 }

package/dist/chart/generateCategoricalChart.d.ts

@@ -67,6 +67,10 @@ export declare const CategoricalProps: {
     outerRadius: {
         type: (NumberConstructor | StringConstructor)[];
     };
+    responsive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     reverseStackOrder: {
         type: BooleanConstructor;
         default: boolean;

package/dist/container/Surface.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, SVGAttributes } from 'vue';
+import { SVGAttributes, StyleValue } from 'vue';
 import { VueClassValue } from '../types';
 interface ViewBox {
     x?: number;
@@ -11,7 +11,7 @@ declare const Surface: import('vue').DefineComponent<Omit<SVGAttributes, "viewBo
     height: number;
     viewBox?: ViewBox;
     class?: VueClassValue;
-    style?: CSSProperties;
+    style?: StyleValue;
     title?: string;
     desc?: string;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Omit<SVGAttributes, "viewBox"> & {
@@ -19,7 +19,7 @@ declare const Surface: import('vue').DefineComponent<Omit<SVGAttributes, "viewBo
     height: number;
     viewBox?: ViewBox;
     class?: VueClassValue;
-    style?: CSSProperties;
+    style?: StyleValue;
     title?: string;
     desc?: string;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/es/cartesian/axis/YAxis.mjs

@@ -2,9 +2,10 @@ import { useIsPanorama } from "../../context/PanoramaContextProvider.mjs";
 import { selectAxisViewBox } from "../../state/selectors/selectChartOffset.mjs";
 import { implicitYAxis, selectAxisScale, selectTicksOfAxis, selectYAxisPosition, selectYAxisSize } from "../../state/selectors/axisSelectors.mjs";
 import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
-import { addYAxis, removeYAxis } from "../../state/cartesianAxisSlice.mjs";
+import { addYAxis, removeYAxis, updateYAxisWidth } from "../../state/cartesianAxisSlice.mjs";
 import { CartesianAxis } from "../cartesian-axis/CartesianAxis.mjs";
-import { createVNode, defineComponent, mergeProps, watchEffect } from "vue";
+import { getCalculatedYAxisWidth } from "../../utils/YAxisUtils.mjs";
+import { createVNode, defineComponent, isVNode, mergeProps, nextTick, ref, watch, watchEffect } from "vue";
 //#region src/cartesian/axis/YAxis.tsx
 var YAxisImpl = /* @__PURE__ */ defineComponent({
 	props: { yAxisId: {
@@ -15,11 +16,55 @@ var YAxisImpl = /* @__PURE__ */ defineComponent({
 	setup(props, { attrs }) {
 		const isPanorama = useIsPanorama();
 		const axisType = "yAxis";
+		const dispatch = useAppDispatch();
 		const scale = useAppSelector((state) => selectAxisScale(state, axisType, props.yAxisId, isPanorama));
 		const axisSize = useAppSelector((state) => selectYAxisSize(state, props.yAxisId));
 		const position = useAppSelector((state) => selectYAxisPosition(state, props.yAxisId));
 		const cartesianTickItems = useAppSelector((state) => selectTicksOfAxis(state, axisType, props.yAxisId, isPanorama));
 		const viewBox = useAppSelector(selectAxisViewBox);
+		const chartDataLengthEmpty = useAppSelector((state) => !state.chartData.chartData?.length);
+		const cartesianAxisRef = ref(null);
+		const isAutoWidth = () => attrs.width === "auto";
+		const measureAxisWidth = () => {
+			const el = cartesianAxisRef.value?.$el;
+			if (!el) return;
+			const ticks = el.getElementsByClassName("v-charts-cartesian-axis-tick-value");
+			const label = el.getElementsByClassName("v-charts-label")[0];
+			return getCalculatedYAxisWidth({
+				ticks,
+				label,
+				labelGapWithTick: 5,
+				tickSize: typeof attrs.tickSize === "number" ? attrs.tickSize : 6,
+				tickMargin: typeof attrs.tickMargin === "number" ? attrs.tickMargin : 2
+			});
+		};
+		watch(chartDataLengthEmpty, (empty) => {
+			if (empty === false && isAutoWidth()) dispatch(updateYAxisWidth({
+				id: props.yAxisId,
+				width: 60
+			}));
+		});
+		const updateAutoWidth = () => {
+			if (!isAutoWidth() || axisSize.value == null) return;
+			const label = attrs.label;
+			if (typeof label === "function" || isVNode(label)) return;
+			const updatedYAxisWidth = measureAxisWidth();
+			if (updatedYAxisWidth == null) return;
+			if (Math.round(axisSize.value.width) !== Math.round(updatedYAxisWidth)) dispatch(updateYAxisWidth({
+				id: props.yAxisId,
+				width: updatedYAxisWidth
+			}));
+		};
+		watch([
+			axisSize,
+			cartesianTickItems,
+			() => attrs.label
+		], () => {
+			nextTick(updateAutoWidth);
+		}, {
+			flush: "post",
+			immediate: true
+		});
 		return () => {
 			const { ...allOtherProps } = props;
 			if (axisSize.value == null || position.value == null) return null;
@@ -31,7 +76,9 @@ var YAxisImpl = /* @__PURE__ */ defineComponent({
 				"width": axisSize.value?.width,
 				"height": axisSize.value?.height,
 				"ticks": cartesianTickItems.value,
-				"class": ["v-charts-yAxis yAxis"]
+				"tickTextProps": isAutoWidth() ? { width: void 0 } : { width: axisSize.value?.width },
+				"class": ["v-charts-yAxis yAxis"],
+				"ref": cartesianAxisRef
 			}), null);
 		};
 	}
@@ -53,7 +100,7 @@ var YAxisSettingsDispatcher = /* @__PURE__ */ defineComponent({
 		includeHidden: Boolean,
 		reversed: Boolean,
 		ticks: Array,
-		width: Number,
+		width: [Number, String],
 		orientation: String,
 		mirror: Boolean,
 		hide: Boolean,
@@ -113,7 +160,7 @@ var YAxis = /* @__PURE__ */ defineComponent({
 			default: implicitYAxis.allowDuplicatedCategory
 		},
 		width: {
-			type: Number,
+			type: [Number, String],
 			default: implicitYAxis.width
 		},
 		hide: {

package/dist/es/cartesian/cartesian-axis/CartesianAxis.mjs

@@ -90,6 +90,10 @@ var CartesianAxis = /* @__PURE__ */ defineComponent({
 		stroke: {
 			type: String,
 			default: "#666"
+		},
+		tickTextProps: {
+			type: Object,
+			default: void 0
 		}
 	},
 	setup(props, { slots }) {
@@ -235,7 +239,8 @@ var CartesianAxis = /* @__PURE__ */ defineComponent({
 					index: i,
 					payload: entry,
 					visibleTicksCount: finalTicks.length,
-					tickFormatter
+					tickFormatter,
+					...props.tickTextProps
 				};
 				return createVNode(Layer, {
 					"class": "v-charts-cartesian-axis-tick",

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, onMounted, ref } 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,24 @@ 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;
 		};
+		if (props.responsive) {
+			useResizeObserver(wrapperEl, (entries) => {
+				const { width, height } = entries[0].contentRect;
+				props.onResize?.(width, height);
+			});
+			onMounted(() => {
+				if (!wrapperEl.value) return;
+				const { width, height } = wrapperEl.value.getBoundingClientRect();
+				props.onResize?.(width, height);
+			});
+		}
 		const myOnClick = (e) => {
 			const chartPointer = getChartPointer(e);
 			if (chartPointer) dispatch(mouseClickAction(chartPointer));
@@ -136,7 +155,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 +185,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

@@ -5,13 +5,13 @@ 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 { Fragment, createVNode, defineComponent, mergeProps } from "vue";
+import { Fragment, createVNode, defineComponent, mergeProps, ref } from "vue";
 import { provideStore } from "@reduxjs/vue-redux";
 //#region src/chart/generateCategoricalChart.tsx
 var defaultLayout = "horizontal";
@@ -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,57 @@ function generateCategoricalChart({ chartName, defaultProps = {}, defaultTooltip
 				eventEmitter: void 0
 			} }, props.id ?? chartName) });
 			const clipPathId = provideClipPathId(props);
+			const responsiveSize = ref({
+				width: 0,
+				height: 0
+			});
+			function handleResize(width, height) {
+				const roundedWidth = Math.round(width);
+				const roundedHeight = Math.round(height);
+				if (responsiveSize.value.width === roundedWidth && responsiveSize.value.height === roundedHeight) return;
+				responsiveSize.value = {
+					width: roundedWidth,
+					height: roundedHeight
+				};
+			}
 			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 effectiveWidth = responsive ? responsiveSize.value.width : width;
+				const effectiveHeight = responsive ? responsiveSize.value.height : height;
+				const hasValidSize = validateWidthHeight({
+					width: effectiveWidth,
+					height: effectiveHeight
+				});
 				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) return null;
+					return createVNode(Fragment, null, [
+						createVNode(ChartDataContextProvider, { "chartData": props.data }, null),
+						createVNode(ReportMainChartProps, {
+							"width": effectiveWidth,
+							"height": effectiveHeight,
+							"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": effectiveWidth,
+							"height": effectiveHeight,
+							"title": title,
+							"desc": desc
+						}), { default: () => [createVNode(ClipPath_default, { "clipPathId": clipPathId }, null), slots.default?.()] })
+					]);
+				}
+				if (!responsive && !hasValidSize) return null;
 				if (props.accessibilityLayer) {
 					attributes.tabindex = props.tabIndex ?? 0;
 					attributes.role = props.role ?? "application";
@@ -143,14 +166,14 @@ 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 && createVNode(ChartDataContextProvider, { "chartData": props.data }, null),
+					hasValidSize && createVNode(ReportMainChartProps, {
+						"width": effectiveWidth,
+						"height": effectiveHeight,
 						"layout": layout,
 						"margin": props.margin ?? defaultMargin
 					}, null),
-					isPolarChart && createVNode(ReportPolarOptions, {
+					hasValidSize && isPolarChart && createVNode(ReportPolarOptions, {
 						"cx": props.cx ?? "50%",
 						"cy": props.cy ?? "50%",
 						"startAngle": props.startAngle ?? defaultProps.startAngle ?? 90,
@@ -158,19 +181,21 @@ function generateCategoricalChart({ chartName, defaultProps = {}, defaultTooltip
 						"innerRadius": props.innerRadius ?? 0,
 						"outerRadius": props.outerRadius ?? "80%"
 					}, null),
-					createVNode(RechartsWrapper, mergeProps({
+					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,
+						"height": effectiveHeight
+					}, eventHandlerAttrs), { default: () => [hasValidSize && createVNode(Surface_default, mergeProps(svgAttributes, {
+						"width": effectiveWidth,
+						"height": effectiveHeight,
 						"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 && createVNode(ReportChartProps_default, props, null)
 				]);
 			};
 		}

package/dist/es/container/Surface.mjs

@@ -21,7 +21,11 @@ var Surface = /* @__PURE__ */ defineComponent({
 		},
 		class: classProp,
 		style: {
-			type: Object,
+			type: [
+				String,
+				Object,
+				Array
+			],
 			default: void 0
 		},
 		title: {

package/dist/es/state/cartesianAxisSlice.mjs

@@ -25,6 +25,17 @@ var cartesianAxisSlice = createSlice({
 		removeYAxis(state, action) {
 			delete state.yAxis[action.payload.id];
 		},
+		updateYAxisWidth(state, action) {
+			const { id, width } = action.payload;
+			const axis = state.yAxis[id];
+			if (axis) {
+				const history = axis.widthHistory || [];
+				if (history.length === 3 && history[0] === history[2] && width === history[1] && width !== axis.width && Math.abs(width - (history[0] ?? 0)) <= 1) return;
+				const newHistory = [...history, width].slice(-3);
+				axis.width = width;
+				axis.widthHistory = newHistory;
+			}
+		},
 		addZAxis(state, action) {
 			state.zAxis[action.payload.id] = castDraft(action.payload);
 		},
@@ -33,7 +44,7 @@ var cartesianAxisSlice = createSlice({
 		}
 	}
 });
-var { addXAxis, removeXAxis, addYAxis, removeYAxis, addZAxis, removeZAxis } = cartesianAxisSlice.actions;
+var { addXAxis, removeXAxis, addYAxis, removeYAxis, addZAxis, removeZAxis, updateYAxisWidth } = cartesianAxisSlice.actions;
 var cartesianAxisReducer = cartesianAxisSlice.reducer;
 //#endregion
-export { addXAxis, addYAxis, addZAxis, cartesianAxisReducer, removeXAxis, removeYAxis, removeZAxis };
+export { addXAxis, addYAxis, addZAxis, cartesianAxisReducer, removeXAxis, removeYAxis, removeZAxis, updateYAxisWidth };

package/dist/es/state/selectors/axisSelectors.mjs

@@ -639,7 +639,7 @@ function getXAxisSize(offset, axisSettings) {
 }
 function getYAxisSize(offset, axisSettings) {
 	return {
-		width: axisSettings.width,
+		width: typeof axisSettings.width === "number" ? axisSettings.width : 60,
 		height: offset.height
 	};
 }
@@ -712,7 +712,7 @@ function selectYAxisPosition(state, axisId) {
 }
 var selectYAxisSize = createSelector(selectChartOffset, selectYAxisSettings, (offset, axisSettings) => {
 	return {
-		width: axisSettings.width,
+		width: typeof axisSettings.width === "number" ? axisSettings.width : 60,
 		height: offset.height
 	};
 });

package/dist/es/state/selectors/selectChartOffset.mjs

@@ -18,10 +18,13 @@ var selectChartOffset = createSelector([
 ], (chartWidth, chartHeight, margin, brushHeight, xAxes, yAxes, legendSettings, legendSize) => {
 	const offsetH = yAxes.reduce((result, entry) => {
 		const { orientation } = entry;
-		if (!entry.mirror && !entry.hide) return {
-			...result,
-			[orientation]: result[orientation] + entry.width
-		};
+		if (!entry.mirror && !entry.hide) {
+			const width = typeof entry.width === "number" ? entry.width : 60;
+			return {
+				...result,
+				[orientation]: result[orientation] + width
+			};
+		}
 		return result;
 	}, {
 		left: margin.left || 0,

package/dist/es/state/touchEventsMiddleware.mjs

@@ -1,7 +1,7 @@
+import { DATA_ITEM_DATAKEY_ATTRIBUTE_NAME, DATA_ITEM_INDEX_ATTRIBUTE_NAME } from "../utils/const.mjs";
 import { getChartPointer } from "../utils/chart.mjs";
 import { selectTooltipEventType } from "./selectors/selectTooltipEventType.mjs";
 import { setActiveMouseOverItemIndex, setMouseOverAxisIndex } from "./tooltipSlice.mjs";
-import { DATA_ITEM_DATAKEY_ATTRIBUTE_NAME, DATA_ITEM_INDEX_ATTRIBUTE_NAME } from "../utils/const.mjs";
 import { selectActivePropsFromChartPointer } from "./selectors/selectActivePropsFromChartPointer.mjs";
 import { selectTooltipCoordinate } from "./selectors/touchSelectors.mjs";
 import { createAction, createListenerMiddleware } from "@reduxjs/toolkit";

package/dist/es/utils/YAxisUtils.mjs

@@ -0,0 +1,29 @@
+//#region src/utils/YAxisUtils.ts
+/**
+* Calculates the width of the Y-axis based on the tick labels and the axis label.
+* @param params - The parameters object.
+* @param [params.ticks] - An array-like object of tick elements, each with a `getBoundingClientRect` method.
+* @param [params.label] - The axis label element, with a `getBoundingClientRect` method.
+* @param [params.labelGapWithTick] - The gap between the label and the tick.
+* @param [params.tickSize] - The length of the tick line.
+* @param [params.tickMargin] - The margin between the tick line and the tick text.
+* @returns The calculated width of the Y-axis.
+*/
+function getCalculatedYAxisWidth({ ticks, label, labelGapWithTick = 5, tickSize = 0, tickMargin = 0 }) {
+	let maxTickWidth = 0;
+	if (ticks) {
+		Array.from(ticks).forEach((tickNode) => {
+			if (tickNode) {
+				const bbox = tickNode.getBoundingClientRect();
+				if (bbox.width > maxTickWidth) maxTickWidth = bbox.width;
+			}
+		});
+		const labelWidth = label ? label.getBoundingClientRect().width : 0;
+		const tickWidth = (tickSize ?? 0) + (tickMargin ?? 0);
+		const updatedYAxisWidth = maxTickWidth + tickWidth + labelWidth + (label ? labelGapWithTick : 0);
+		return Math.round(updatedYAxisWidth);
+	}
+	return 0;
+}
+//#endregion
+export { getCalculatedYAxisWidth };

package/dist/state/cartesianAxisSlice.d.ts

@@ -1,7 +1,7 @@
 import { AxisRange } from './selectors/axisSelectors';
 import { SVGAttributes } from 'vue';
 import { RechartsScale, ScaleType } from '../types/scale';
-import { AxisDomain, AxisDomainType, AxisInterval } from '../types/axis';
+import { AxisDomain, AxisDomainType, AxisInterval, YAxisWidth } from '../types/axis';
 import { DataKey } from '../types';
 import { AxisTick, TickFormatter } from '../types/tick';
 export type AxisId = string | number;
@@ -68,8 +68,13 @@ export type XAxisSettings = CartesianAxisSettings & {
 };
 export type YAxisSettings = CartesianAxisSettings & {
     padding: YAxisPadding;
-    width: number;
+    width: YAxisWidth;
     orientation: YAxisOrientation;
+    /**
+     * Internal: recent measured widths, used to detect A→B→A oscillation
+     * when width is measured dynamically (width === 'auto').
+     */
+    widthHistory?: number[];
 };
 /**
  * Z axis is special because it's never displayed. It controls the size of Scatter dots,
@@ -83,6 +88,9 @@ type AxisMapState = {
     yAxis: Record<AxisId, YAxisSettings>;
     zAxis: Record<AxisId, ZAxisSettings>;
 };
-export declare const addXAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<XAxisSettings, "cartesianAxis/addXAxis">, removeXAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<XAxisSettings, "cartesianAxis/removeXAxis">, addYAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<YAxisSettings, "cartesianAxis/addYAxis">, removeYAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<YAxisSettings, "cartesianAxis/removeYAxis">, addZAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<ZAxisSettings, "cartesianAxis/addZAxis">, removeZAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<ZAxisSettings, "cartesianAxis/removeZAxis">;
+export declare const addXAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<XAxisSettings, "cartesianAxis/addXAxis">, removeXAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<XAxisSettings, "cartesianAxis/removeXAxis">, addYAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<YAxisSettings, "cartesianAxis/addYAxis">, removeYAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<YAxisSettings, "cartesianAxis/removeYAxis">, addZAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<ZAxisSettings, "cartesianAxis/addZAxis">, removeZAxis: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<ZAxisSettings, "cartesianAxis/removeZAxis">, updateYAxisWidth: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<{
+    id: AxisId;
+    width: number;
+}, "cartesianAxis/updateYAxisWidth">;
 export declare const cartesianAxisReducer: import('@reduxjs/toolkit').Reducer<AxisMapState>;
 export {};

package/dist/types/axis.d.ts

@@ -63,10 +63,20 @@ export type YAxisPadding = {
     bottom?: number;
 } | 'gap' | 'no-gap';
 export type YAxisOrientation = 'left' | 'right';
+/**
+ * Width of the Y axis in pixels.
+ * `auto` will attempt to resize the axis based on its content.
+ */
+export type YAxisWidth = number | 'auto';
 export type YAxisSettings = CartesianAxisSettings & {
     padding: YAxisPadding;
-    width: number;
+    width: YAxisWidth;
     orientation: YAxisOrientation;
+    /**
+     * Internal: recent measured widths, used to detect A→B→A oscillation
+     * when width is measured dynamically (width === 'auto').
+     */
+    widthHistory?: number[];
 };
 export type AxisRange = readonly [number, number];
 /**

package/dist/utils/YAxisUtils.d.ts

@@ -0,0 +1,20 @@
+type IGetBoundingClient = Pick<Element, 'getBoundingClientRect'>;
+/**
+ * Calculates the width of the Y-axis based on the tick labels and the axis label.
+ * @param params - The parameters object.
+ * @param [params.ticks] - An array-like object of tick elements, each with a `getBoundingClientRect` method.
+ * @param [params.label] - The axis label element, with a `getBoundingClientRect` method.
+ * @param [params.labelGapWithTick] - The gap between the label and the tick.
+ * @param [params.tickSize] - The length of the tick line.
+ * @param [params.tickMargin] - The margin between the tick line and the tick text.
+ * @returns The calculated width of the Y-axis.
+ */
+export declare function getCalculatedYAxisWidth({ ticks, label, labelGapWithTick, // Default gap between label and tick
+tickSize, tickMargin, }: {
+    ticks: ArrayLike<IGetBoundingClient> | null;
+    label: IGetBoundingClient | null | undefined;
+    labelGapWithTick: number | undefined;
+    tickSize: number | undefined;
+    tickMargin: number | undefined;
+}): number;
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vccs",
   "type": "module",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Composable charting components for Vue 3 — an unofficial port of Recharts",
   "author": "rick-hup",
   "license": "MIT",