chartjs/chartjs-plugin-datalabels

origin is null

Skillkiller opened this issue · 1 comments

Hello,
I use Chart.js with the Datalabels plugin together with Sveltekit. As soon as I register the Datalabels plugin, I get the following error.
grafik

Here is my test setup:

<script lang="ts">
	import { onMount } from 'svelte';
	import { browser } from '$app/env';
	import { COLORS } from '$lib/chart/Util';
	import Chart from 'chart.js/auto/auto.js';
	import ChartDataLabels from 'chartjs-plugin-datalabels';

	import type { Dataset } from '$lib/chart/dataset';

	export let chartTitle: string;
	export let yAxesName: string;
	export let labels: string[];
	export let dataset: Dataset;

	let portfolio;
	const config = {
		type: 'bar',
		data: {
			labels: labels,
			datasets: [
				{
					label: dataset.name,
					data: dataset.data,
					backgroundColor: COLORS
				}
			]
		},
		options: {
			borderRadius: '10',
			plugins: {
				title: {
					display: true,
					text: chartTitle
				}
			},
			responsive: true,
			maintainAspectRatio: false,
			scales: {
				y: {
					min: 0,
					title: {
						display: true,
						text: yAxesName
					}
				}
			}
		}
	};
	onMount(async () => {
		if (browser) {
			Chart.register(ChartDataLabels);
			const ctx = portfolio.getContext('2d');
			// Initialize chart using default config set
			var monthChart = new Chart(ctx, config);
		}
	});
</script>

<div class="aspect-video">
	<canvas bind:this={portfolio} />
</div>

Does anyone know how I can fix this problem?

Swapping the import solved the problem for me. See: #251 (comment)