Annotations randomly rendered incorrect.

[pate313373]

Hi!,

I'm seeing weird and inconsistent behavior regarding annotations:

• Most of the time, they render correctly.
• Sometimes however, the labels have a completely wrong offset for no apparent reason and are outside the label container.

vue component

<template>
    <div ref="chartContainer" class="mx-6">
        <div v-if="loading || !dates.length || !events.length" class="headline">{{ msg }}</div>
        <div v-else>
            <apexchart width="100%" type="line" :series="events" :options="options" />
        </div>
    </div>
</template>
<script>
export default {
    name: 'ApexEvent',
    props: {
        code: Number,
        rawReports: Array,
    },
    data: () => ({
        loading: true,
        msg: '',
        events: [],
        dates: [],
    }),
    mounted() {},
    computed: {
        chartSize() {
            return {
                x: this.$refs.chartContainer.clientWidth,
                y: this.$refs.chartContainer.clientHeight,
            };
        },
        options() {
            var xaxisAnnotations = [];
            for (var i = 0; i < this.rawReports.length; i++) {
                const labelText =
                    i === this.rawReports.length - 1 ? 'selected period' : 'prior period ' + (this.rawReports.length - i - 1);

                xaxisAnnotations.push({
                    x: this.rawReports[i].reportStart,
                    borderColor: 'blue',
                    label: {
                        style: {
                            color: '#FFFFFF',
                            background: 'purple',
                            fontSize: '12px',
                            padding: {
                                left: 5,
                                right: 5,
                                top: 5,
                                bottom: 5,
                            },
                        },
                        text: labelText,
                    },
                });
                xaxisAnnotations.push({
                    x: this.rawReports[i].reportEnd,
                    borderColor: 'blue',
                    label: {
                        style: {
                            color: '#FFFFFF',
                            background: 'purple',
                            fontSize: '12px',
                            padding: {
                                left: 5,
                                right: 5,
                                top: 5,
                                bottom: 5,
                            },
                        },
                        text: labelText,
                    },
                });
            }

            return {
                chart: {
                    id: 'code' + this.code,
                    toolbar: {
                        show: true,
                    },
                },
                grid: {
                    show: true,
                },
                xaxis: {
                    categories: this.dates,
                },
                annotations: {
                    xaxis: xaxisAnnotations,
                },
            };
        },
    },
    watch: {
        code() {
            this.loadData();
        },
        start() {
            this.loadData();
        },
        end() {
            this.loadData();
        },
    },
    created() {
        this.loadData();
    },
    methods: {
        loadData() {
            this.loading = true;
            this.msg = 'loading data....';

            var requestBody;
            var reportType;
            if (this.code < 0) {
                reportType = 'eventTotalPerDay';
                requestBody = {
                    start: this.rawReports[0].reportStart,
                    end: this.rawReports[this.rawReports.length - 1].reportEnd,
                };
            } else {
                reportType = 'eventCodePerDay';
                requestBody = {
                    start: this.rawReports[0].reportStart,
                    end: this.rawReports[this.rawReports.length - 1].reportEnd,
                    code: this.code,
                };
            }

            this.$services.backend.api
                .post('/reports/' + reportType, requestBody)
                .then((res) => {
                    this.dates = res.data.dates;
                    this.events = res.data.events;
                })
                .catch((err) => {
                    this.msg = 'Error loading data! :-(';
                    this.dates = [];
                    this.events = [];
                    console.log(err);
                })
                .finally(() => {
                    this.loading = false;

                    console.log('chartSize: ', this.chartSize);
                });
        },
    },
};
</script>

package.json

"dependencies": {
    "@mdi/font": "5.9.55",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-apexcharts": "^1.6.1",
    "vue-router": "^3.2.0",
    "vuetify": "^2.4.0",
    "vuex": "^3.4.0",
    "weeknumber": "^1.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "^2.2.1",
    "sass": "^1.32.0",
    "sass-loader": "^10.0.0",
    "vue-cli-plugin-vuetify": "~2.4.0",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.7.0"
  }

Browser: Firefox 89.0 (64-bit)

Anyone had similar problems before?

Kind regards

[pate313373]

I have just noticed, that if I zoom in and out, they are rendered correctly.

[henryfw]

Calling chart.resetSeries() after adding a new annotation fixes it.

[github-actions[bot]]

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.