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.