graphieros/vue-data-ui v3.28.6

on GitHub

New composable: useParentSize

An alternative way to make charts responsive: measure their parent container and use its reactive dimensions in the chart configuration.

Size your charts from their parent container with useParentSize. It returns computed width and height refs, observes parent resizing by default, and handles template refs automatically after mounting.

import { useParentSize } from 'vue-data-ui/composables';

Example with VueUiXy

<script setup>
import { computed, ref } from 'vue';
import { VueUiXy, useParentSize } from 'vue-data-ui';

const target = ref(null);
const { width, height } = useParentSize(target);

const dataset = [
    { name: 'Sales', type: 'line', series: [12, 18, 14, 25, 21, 30] },
];

const config = computed(() => ({
    responsive: false,
    chart: {
        width: width.value ?? 800,
        height: height.value ?? 400,
    },
}));
</script>

<template>
    <div style="width: 100%; height: 400px">
        <div ref="target">
            <VueUiXy :dataset="dataset" :config="config" />
        </div>
    </div>
</template>

Options

Each option accepts a plain value, a Vue ref, or a getter.

const scale = ref(0.5);
const { width, height } = useParentSize(target, {
    scale,
    offsetWidth: 0,
    offsetHeight: -150, // compensate the vertical space occupied by legend and zoom range

    // use these optionally if the parent has no fixed dimensions and you want to have fixed fallbacks.
    maxWidth: 1200,
    maxHeight: 800,
});

Each dimension is calculated as Math.min((parentSize + offset) * scale, maximum).

Bounded sizing and automatic cleanup

• Viewport limits prevent unbounded chart growth when the parent's dimensions depend on the chart's content. Default limits update when the browser window resizes; custom finite limits support larger charts.
• Negative or non-finite maximums fall back to viewport dimensions. During server rendering, no viewport limit is applied.
• Missing parents return undefined for both computed values without throwing.
• When called synchronously during setup or a component lifecycle hook, observers and window listeners are cleaned up automatically when the owning scope or component is disposed. Outside those contexts, call the returned stop() function manually.

Try it in the docs