I'm trying to render a background (gradient, but simple color also doesn't work) for a line chart using chart.js 3.6.0 in a Vue 3 app. Users can toggle between a bar chart and a line chart (for the same dataset). Interestingly it works for the bar chart:

But the line chart has no gradient:

This is the data configuration:

data: {
    labels: props.labels as string[],
    datasets: [
        {
            data: props.data as number[],
            backgroundColor: getBackgroundColor(), // returns the gradient
            borderColor: getBorderColor(), // returns a color
            fill: true // tried all possible values for this
        }
    ]
}

I have tried to remove everything that might cause an issue, but even the most basic configuration with hard-coded data doesn't work.

The canvas is accessed using a ref:

<template>
    <canvas class="statistics-canvas" ref="canvas" width="100%" height="100%"></canvas>
</template>

<script lang="ts">
    // ...
    setup() {
        const canvas = ref(document.createElement("canvas"));
        let chart: Chart;

        onMounted(() => createChart());

        function createChart() {
            chart = new Chart(canvas.value, {/*...*/});
        }

        return {
            canvas
        };
    }
</script>

Any ideas about what might be causing this? I have also tried coping the configuration from the chartjs docs (.html), but also no luck.

I'm trying to render a background (gradient, but simple color also doesn't work) for a line chart using chart.js 3.6.0 in a Vue 3 app. Users can toggle between a bar chart and a line chart (for the same dataset). Interestingly it works for the bar chart:

But the line chart has no gradient:

This is the data configuration:

data: {
    labels: props.labels as string[],
    datasets: [
        {
            data: props.data as number[],
            backgroundColor: getBackgroundColor(), // returns the gradient
            borderColor: getBorderColor(), // returns a color
            fill: true // tried all possible values for this
        }
    ]
}

I have tried to remove everything that might cause an issue, but even the most basic configuration with hard-coded data doesn't work.

The canvas is accessed using a ref:

<template>
    <canvas class="statistics-canvas" ref="canvas" width="100%" height="100%"></canvas>
</template>

<script lang="ts">
    // ...
    setup() {
        const canvas = ref(document.createElement("canvas"));
        let chart: Chart;

        onMounted(() => createChart());

        function createChart() {
            chart = new Chart(canvas.value, {/*...*/});
        }

        return {
            canvas
        };
    }
</script>

Any ideas about what might be causing this? I have also tried coping the configuration from the chartjs docs (https://www.chartjs/docs/latest/charts/line.html), but also no luck.

• javascript
• typescript
• vue.js
• chart.js
• vuejs3

1 Answer 1

Please check the registrar file for chart js in your project. Add Filler to Chart.register()

import {
  ...,
  Filler,
} from 'chart.js';

Chart.register(
...,
Filler,
);