origin is null
Skillkiller opened this issue · 1 comments
Skillkiller commented
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.
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?
Skillkiller commented
Swapping the import solved the problem for me. See: #251 (comment)