breaks if update the height

[NeluQi]

The chart breaks if you update the height

I have

<VueApexChart
width="100%"
:type="optionsChart.chart.type"
:height="`${settings.chartHeight ?? 200}px`"
:options="optionsChart"
:series="optionsChart.series ?? []"
/>

When the chartHeight change- the chart disappears

[duduyo]

Same thing for me.
I found this workaround : use the height attribute only for the first display (ie provide a non reactive value), and then update it via the options object (use a reactive value).

Extract of my code :

<template>
            <apexchart
                :height="myHeight"
                :options="myOptions"
                :series="mySeries"
            ></apexchart>
</template>
<script setup lang="ts">
interface Props {
    height: number;
    options: ApexOptions;
    series: ApexAxisChartSeries;
}
const props = defineProps<Props>();

const myHeight = prop.height;  // this one is not reactive - won't change
const myOptions = computed<ApexOptions>(() => {
    chart: {
        height: prop.height;  // this one is reactive thanks to the computed
    ...
    },
    ....
});

</script>

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.