Skip to content

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

@aneas

Description

@aneas

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions