Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stacked chart: autoupdate yaxis and blank holes after resize #74

Open
AniaKru95 opened this issue Jun 5, 2023 · 1 comment
Open

Stacked chart: autoupdate yaxis and blank holes after resize #74

AniaKru95 opened this issue Jun 5, 2023 · 1 comment

Comments

@AniaKru95
Copy link

Hi,
I have an issue with stacked chart.
On my page there are sidebar and chart.

  1. Sidebar is collapsed and chart has been rendered.
  2. I clicked on legend to hide series. My chart is updated properly (series is toggled and yaxis has been updated)
  3. I expand sidebar -> yaxis returned to initial values and blank holes appear on chart.

My code:

<template>
    <div id="chart">
        <apexchart type="bar" height="500" :options="chartOptions" :series="series"></apexchart>
    </div>
</template>

<script setup lang="ts">
import {ref} from "vue";

const chartOptions = ref({
    chart: {
        type: 'bar',
        height: 350,
        stacked: true,
        toolbar: {
            show: true
        },
        zoom: {
            enabled: true
        }
    },
    responsive: [{
        breakpoint: 480,
        options: {
            legend: {
                position: 'bottom',
                offsetX: -10,
                offsetY: 0
            }
        }
    }],
    plotOptions: {
        bar: {
            horizontal: false,
            borderRadius: 10,
            dataLabels: {
                total: {
                    enabled: true,
                    style: {
                        fontSize: '13px',
                        fontWeight: 900
                    }
                }
            }
        },
    },
    xaxis: {
        type: 'datetime',
        categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT',
            '01/05/2011 GMT', '01/06/2011 GMT'
        ],
    },
    legend: {
        position: 'right',
        offsetY: 40
    },
    fill: {
        opacity: 1
    }
})
const series = [{
    name: 'PRODUCT A',
    data: [44, 55, 41, 67, 22, 43]
}, {
    name: 'PRODUCT B',
    data: [13, 23, 20, 8, 13, 27]
}, {
    name: 'PRODUCT C',
    data: [11, 17, 15, 15, 21, 14]
}, {
    name: 'PRODUCT D',
    data: [21, 7, 25, 13, 22, 8]
}]
</script>

Sidebar is collapsed:
obraz

Sidebar is collapsed and Product B is hidden. (Everything works properly)
obraz

Sidebar is expanded and Product B is hidden (Wrong yaxis values and blank holes). Then I collapse again, but this view does not change.
obraz

@pluto0004
Copy link

I found a similar issue on the official website too.
https://apexcharts.com/docs/responsive/

When I hide one of the series, it only showed one of them at first. However when resizing the window, the hidden series appeared with transparent background even though the legend is still filtered.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants