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

Yaxis annotations at the very top edge of the graph are displayed at the wrong y-coordinate #2770

Closed
aneas opened this issue Nov 11, 2021 · 0 comments · Fixed by #2771
Closed
Labels
bug Something isn't working

Comments

@aneas
Copy link

aneas commented Nov 11, 2021

Description

This only happens when the top edge of the annotation is positioned at the y-coordinate 0.

The bug is caused by a wrong null-check in

y: (y2 || y1) + anno.label.offsetY - 3,

If y2 is null, then y2 || y1 is correct. If y2 is 0, however, then y1 is wrongly used instead.

Steps to Reproduce

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
<script>
    let chart = new ApexCharts(document.querySelector("#chart"), {
        chart: {
            type: 'line',
            width: 300,
            height: 200,
            toolbar: { show: false }
        },
        series: [{
            data: [0, 1]
        }],
        annotations: {
            yaxis: [
                {
                    y: 0.0,
                    y2: 0.5,
                    label: {
                        text: '0.0 to 0.5',
                        offsetX: -60,
                        style: { background: '#00ff00' }
                    }
                },
                {
                    y: 0.5,
                    y2: 1.0,
                    label: {
                        text: '0.5 to 1.0',
                        style: { background: '#ff0000' }
                    }
                },
                {
                    y: 1.0,
                    y2: 1.01,
                    label: {
                        text: '1.0 to 1.01',
                        style: { background: '#ffff00' }
                    }
                }
            ]
        }
    });

    chart.render();
</script>

Expected Behavior

The green annotation should be at y=0.5, the red one at y=1.0, and the yellow one at y=1.01.

Actual Behavior

The red annotation is placed at y=0.5 instead of y=1.0

Screenshots

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
1 participant