CODEWITHSUNDEEP
javascripttypescriptvue.jschart.jsvuejs3
Kugel
Kugel

Reputation: 838

Chartjs backgroundColor for line chart does not appear in Vue app

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:

enter image description here

But the line chart has no gradient:

enter image description here

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.org/docs/latest/charts/line.html), but also no luck.

Upvotes: 2

Views: 1973

Answers (1)

devSauRaV
devSauRaV

Reputation: 116

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

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

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

Upvotes: 10

Related Questions